manniru/pwa-crud-app

pwa-crud-app

hmmStart

An example CRUD PWA app with user authentication.

View the app at https://hmmstart.vercel.app/

Built with

• Next.js
• Styled Components
• Ant Design
• Formik
• Apollo Client
• Apollo Server
• Prisma

Features

• User sign up/in/out
• Progressive Web App
• Password resets
• Create/Read/Update/Delete ideas
• Individual routes for ideas
• Cursor based pagination
• Form validation
• Local GraphQL schema
• Access token refreshing
• Refresh token versioning
• Mailtrap.io integration
• Normalize CSS
• Global CSS style and theming
• Webpack Bundle Analyzer
• Accessibility auditing
• Code linting

Lighthouse audit

Testing

• React Testing Library

Refreshing Authentication

• On sign-in or sign-up, a long-lived Refresh JWT and short-lived Access JWT are generated by the Apollo server.
• The Refresh token is stored in a cookie.
• The Access token is included in the graphQL response.
• On the client, the Access token is stored in a global variable for subsequent requests.
• Using Apollo Client middleware, the Access token is validated before every request.
• If the Access token is expired, the middleware fetches a new one from the express server.
  • which validates the Refresh token before sending a new Access token.
• The Refresh token can be invalidated by incrementing the version.
  • This is done by making a graphQL request of:
    • mutation { revokeRefreshToken(id: "some-user-id") }
  • This will prevent the Access token from refreshing until the user signs in again.

Getting Started

Clone project

git clone https://github.com/hmmChase/hmmStart.git

Install dependencies

1. Navigate to project root cd hmmStart
2. Run npm install
3. Run npm run frontend:install
4. Run npm run backend:install

Set environment variables

1. Locate .env.example in both /frontend and /backend
2. Make a copy of both
3. Rename copy to just .env

Setup Prisma server

For simplicity's sake, we are using a demo server.

• First time
  • Visit Prisma and sign up
  • Install CLI and login

1. Navigate to /backend
2. Run npm run deploy -- -n
3. Select Demo server
4. Complete the prompts
5. Copy HTTP endpoint
6. Paste endpoint in .env as PRISMA_ENDPOINT value
7. Run npm run schema
   • Do this everytime you make a change to datamodel.prisma

Setup Mailtrap

Can skip if you don't try to reset a password.

• First time
  • Visit Mailtrap and sign up
  • Create demo inbox

1. Copy Host, Port, Username, and Password values
2. Paste in /backend/.env

Start the app

1. Navigate to root /
2. Run npm run app
3. Visit http://localhost:8008/

Deploy to Vercel

No guarantee this will work.

• First time
  • Visit Vercel and sign up
  • Install Vercel Desktop and login

1. Navigate to root /
2. Run vercel
3. Copy aliased URL
4. Follow vercel-secrets.md to setup secrets
5. Run vercel
6. Visit the URL