my-covid-story / www

We are a group of concerned citizens who could no longer stand by as Ontario is led into a humanitarian crisis. We believe the power of storytelling is an effective means to drive government action.

My Covid Story

This is an extremely early MVP, so there is a lot to do.

Our stack / architecture is:

• NextJS hosted on Vercel (already setup here)
• Prisma as our ORM (makes things pretty smooth)
• PostgreSQL Managed Database from Digital Ocean.

Quick Start

1. Clone this repo.
2. Install dependencies with npm i.
3. Copy .env.template to .env.
4. Get a local postgres db running. Docker is probably easiest, but local postgres would also work. With Docker installed, run docker run --name my-covid-story-dev -p 5432:5432 -e POSTGRES_PASSWORD=mycovidstory -d postgres:12.6-alpine (this will match the DB URL string in .env).
5. Run npx prisma migrate deploy to apply migrations in prisma/migrations.
6. Run npx prisma db seed --preview-feature to see test data from prisma/seed.ts.
7. Run npm run dev to start the dev server. Open http://localhost:3000 in your browser to see the app.
8. Run npm test to run the test suite. This also gets run automatically on each Pull Request.

Prisma Migrate

We use Prisma Migrate to manage the evolution of our database schema. To work around a current limitation in Prisma, we exclude certain relation fields from the schema when running prisma migrate.

These fields are marked with a //nomigrate comment in the schema.prisma file. Excluding them is handled automatically by the prisma.sh wrapper script for the prisma CLI. For simplicity, you can always use ./prisma.sh intead of npx prisma and the script will do the right thing.

Learn More

This is a Next.js application bootstrapped with create-next-app and deployed on the Vercel Platform. To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.
• Next.js deployment documentation - deployment on Vercel.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

www's Issues

`/story/[id]` - individual story view

Build out /story/[id] where [id] is the ccuid from the DB of the story. I think for now, we use getStaticPaths to statically generate each post.

As we grow, we can constrain the number that we pre-render at build time and use fallback: true to render the rest on-demand. The render is then cached for future visits.

Responsive layout for single story (story detail) page

Currently, it doesn't look fantastic on a desktop browser. Design is in Figma (thanks Curtis!):
https://www.figma.com/file/hwuWoqcVWWWrukev8pl9rn/My-Covid-Story?node-id=42%3A0

Paginate story feed

We're getting to the point where we have enough stories that we should be paginating the feed page.

Twitter Integration

Add Fathom analytics

I've signed us up for a Fathom account to get some privacy first analytics going.

Get metadata working for stories

It's pretty critical that we have proper titles and descriptions for individual stories. For social sharing.

Copy url option on story share sheet

I'd like to be able to tap a button to copy the url in order to paste it in whatever app or tool I'm using.

What about adding commitlint?

I think adding commitlint inside a new husky commit-msg hook would help in standardizing the commit messages and maybe even in creating an automatic changelog. There are plenty of tools for that, if you want I can open a PR for this.

Add reject reason to Story for moderators

Ensure Thank you page cant be hit directly

To keep analytics as clean as possible, ensure that you can only hit https://www.mycovidstory.ca/stories/thanks from submitting the form

Import image assets into public asset directory

Place in select image assets into /public/img/background for use as stock images for story tiles.

Call Sentry on form submit errors (?)

Pass form payload (minus any PII) to Senty for backup.

Update our GitHub org avatar to match our favicon

Little cosmetic enhancement.

Share card on iOS spacing

We need to add some bottom spacing on the share card and drawer so that the swipe between apps bar isn't super close to the floating ribbon or drawer contents

Add remaining word / character limits to `title` and `content`

As you get close to the char / word limit, display remaining to help users.

Persistent Layout for smoother page transitions

https://adamwathan.me/2019/10/17/persistent-layout-patterns-in-nextjs/

Add Sharing Controls to Form Submission

Relies on #6

• Where would you like your story to be shared? (Checkboxes)
• What information would you like to share along with your story? (Checkboxes)
• Can a journalist contact you for more information or an interview (Radio buttons)
• If yes, please enter your preferred method of contact (text box)

Admin Portal

A simple authenticated portal where admins can view a list of unapproved stories and approve them.

PRD Link: https://docs.google.com/document/d/13w_pOfNRXx9BiDL9nh6AbMR50wi9xjRZtlv9divlJDc/edit?pli=1#heading=h.uu9oyxsnsre

Custom 404 page

We should have a custom 404 page rather than relying on the NextJS default

Social Share buttons

We want users to be able to share the stories of fellow Ontarians via social media. On each page a Share This Story will slide open a drawer with social buttons

https://www.npmjs.com/package/react-share

Add `react-google-recaptcha` to form flow

Using this package

Allow moderators to view all approved stories

Style submission form to match designs

Need to adjust the Chakra theming to get us closer to design spec.

Responsive layout for story feed page

Currently, it doesn't look fantastic on a desktop browser. Design is in Figma (thanks Curtis!):
https://www.figma.com/file/hwuWoqcVWWWrukev8pl9rn/My-Covid-Story?node-id=42%3A0

Map postal code FSAs to city names

FSAs (the first three digits of a postal code) aren't meaningful to most users. It would be helpful to show the name of the city where that FSA resides.

Canada Post has an API, but it's intended for looking up a specific address and it has a per-call cost.

Wikipedia has the data, but it's spread out over 18 pages of HTML. I don't see any raw data. I suppose it would be possible to scrape the pages and assemble the data ourselves.

I also found this by Googling. I don't know if it's actually free or if it's any good, and I didn't create an account to try downloading.

Map FSA Postal code to Elected Official

Ties into #76 in that we need to map the FSA to geo spacial data and perform actions accordingly

Allow moderators to add content warnings

Todo: need list of content warnings

`format` command running on staging

Prettier / eslint is configured, but just need to add a command and wire it up to husky so that our commits are all nice and consistently formatted.

Update schema for SEO

Include the following schema into the head of the HTML page to aid in SEO

<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Organization", "name": "MyCovidStory", "alternateName": "MyCovidStory.ca", "url": "https://MyCovidStory.ca", "logo": "", "sameAs": [ "https://www.facebook.com/MyCovidStoryCA", "https://twitter.com/MyCOVIDStory_CA", "https://www.instagram.com/MyCovidStory_CA/", "https://github.com/my-covid-story/www", "https://MyCovidStory.ca" ] } </script>

Update favicon

We still have the Vercel default, and should update.

Update updatedAt when moderating

Currently when a moderator changes the status of a story the updatedAt column isn't updated.

Uppercase postal prefix before we store it

Should be an easy solve.

Hookup server side Sentry calls

Probably want some server side sentry to capture any issues there.

Linting auto sort imports

Add `/about` page

See Figma for content

Adding multi language support

• Introduce localization for the following languages - Urdu, Hindi, Punjabi. At this point in time, unless it is possible for us to get someone to translate all static fields for us, we will need to depend on translating the text using Google Translate at a minimum
• Add a message on the story page to remind users that they are more than welcome to share their story even if it is not in English
• Add in a link for users to be able to contact us to volunteer their support for translation (addressed in #102)

Update prod DATABASE_URL to use pooled connection

Allow moderators ability to edit title/content

Needs a larger discussion to around transparency of edits

Store partial form data to localstorage

Should be fairly straightforward, here's an article on it.

Add in links to direct people to our FB / Instagram pages

Link to Facebook - https://www.facebook.com/MyCovidStoryCA
Link to Instagram https://www.instagram.com/mycovidstory_ca/

Changes required:

• Add FB / Insta links on the main page's top banner
• On story submission success page, add in a button to share our FB page and Instagram profile

Include links to our social profiles

Add Twitter and Facebook buttons to the nav, and to the thank you page.

Improve story form field behaviour

• Clear the contact fields (name, email, phone twitter) when the contact check is unchecked
• When one of the optional contact fields has a value, display an optional label beside the other two.

Automatic Export Consented Contacts

Every morning we should export a list of contacts who consented to being contacted by the media. This could be sent to Slack

https://vercel.com/docs/solutions/cron-jobs

Submission Form

Basic Overview:
Welcome/Intro
Data governance stuff
Form

• I am a [dropdown]
• Are you sharing your own story or someone else's [dropdown]
• Postal Code [text box]
• Name [text box]
• Tell us your story [text box] (prompt: "Please share your Covid story with us")

PRD Link: https://docs.google.com/document/d/13w_pOfNRXx9BiDL9nh6AbMR50wi9xjRZtlv9divlJDc/edit?pli=1#heading=h.twy5jk5i31u8

Add "Help us Translate" link to footer

This would send an email to [email protected] with a set subject.

Automatically email stories to Premier & key cabinet personnel

As an MVP, we will first focus on...:

• sending an email with the link to stories to premier + key cabinet personnel. Every story will trigger an email to these parties, for now (no curation)
• Once a story has been sent, add a label on the story to say we have shared to the premier/key cabinet personnel.

All stories are shared, as long as the story is published and approved. Unlike sharing with media personnel, we only share the public facing link to the premier & cabinet (which is publicly accessible anyway).

Will this project be going global?

I'm an Italian student who had a very similar idea to the project you're developing and I would love to contribute and see it available globally, even outside Canada. Do you think it's something that could be done?

List all stories on /

• API rework (to support server-side and client-side rendering)
• Basic stories feed at /stories
• More responsive layout
• Background images (one from each category-based collection)
• FSA to city mapping
• Single story details at /stories:id
• Navigation from feed to single story
• Include name for display, but only if not anonymous

404 page with undraw svg

Added image that can be exported from Figma as an svg or other file type.

https://www.figma.com/file/hwuWoqcVWWWrukev8pl9rn/My-Covid-Story?node-id=752%3A0

Category tag wrapping