Next.js Boilerplate

Description

A Typescript boilerplate web project using Next.js (App Router) and Tailwind, and Postgres. User authentication (username/password) has been set up using NextAuth.js.

This boilerplate contains:

• 🔑 User auth and session management using NextAuth.js
• 👪 ORM using Prisma
• 📄 A user signup page, sign in page, and user list page using React, Tailwind, and Daisy UI
• 🌍 State management using Redux RTK query
• ✅ CI/CD using Github Actions
• 💻 E2E testing using Cypress
• 🤡 Unit testing using Jest

Note that SSR is not included in this boilerplate as it is not really applicable user authentication (which uses redux to update state). Feel free to add SSR to your own pages though!

Installation

1. Install Node LTS
2. Install Docker
3. Clone this repo
4. Create the following .env file ```

   next-auth

   SECRET=

database

POSTGRES_HOSTNAME=localhost POSTGRES_PORT=5432 POSTGRES_USER=postgres POSTGRES_PASSWORD=postgres POSTGRES_DB=postgres DATABASE_URI=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOSTNAME}:${POSTGRES_PORT}/${POSTGRES_DB}?schema=public

5. Run the following in the root directory

npm run install npm migrate

6. For [automatic tagging](https://github.com/anothrNick/github-tag-action), allow read and write permissions for workflows in your github repo's Settings > Actions > General > Workflow permissions section.

### Start locally
The following command will containerize, build, and start the database, backend, and frontend

npm run up npm run dev

### Setup user profile image upload Supabase (optional)
1. Sign up and create a project on [supabase](https://supabase.com/dashboard).
2. Create a **public** storage bucket and add `SUPABASE_BUCKET` to the `.env` above
3. Add a policy to your bucket that allows `SELECT`, `INSERT`, `UPDATE`, and `DELETE`.
4. From Settings > API, add your URL and anon/public API keys to the `.env` as `SUPABASE_URL` and `SUPABASE_ANON_KEY`.