This is a Next.js project bootstrapped with create-next-app
.
- Copy the
.env.example
file in to the same directory and name it.env.local
- Inside the
.env.local
file, add values to the variables you need for local development - Now that the environment variables are set, install Docker and Docker Compose to run a local PostgreSQL database. (Install docs)
- After getting Docker Compose installed, run the following command in the root
directory of the project to start the local database (the first time you run
this command, the database creds from
.env.local
will be applied):
docker-compose up
- Now that the database is running, run the following command in the root directory of the project to create the database schema:
npm run prisma:migrate -- dev
- Finally, start the dev app and see what breaks!
npm run dev
Seeding data will instert fake user and process data into the database. First, we need to insert the process data, which includes a user, a role, a queue, some steps, and a stage. To insert the data, run
npm run prisma:migrate reset
To get projects imported into the system, login into the dev appilcation with:
## Getting Started
To run the app, you need to add some environment vars to configure (1) a local database connection and (2) Auth0:
For the database, make sure you have postgresql installed, and then create a db. If on macOS:
brew install postgresql brew services start postgresql createdb simple-marketplace
Then create a `.env` file at the root of the project that looks like (if on macOS, replace {your-user-name} with your macOS username):
DATABASE_URL="postgres://{your-user-name}@localhost:5432/simple-marketplace?connection_limit=1"
AUTH0_SECRET=abc123
AUTH0_BASE_URL=http://localhost:3000
AUTH0_ISSUER_BASE_URL=https://dev-12345.us.auth0.com
AUTH0_CLIENT_ID=def456
AUTH0_CLIENT_SECRET=12345678abcdefg
Ask a Lifelike dev for the Auth0 environment variable values.
To confirm the database is setup correctly and to create your initial DB, run: `npx prisma db push`
Once local variables are setup, you can run the app from the root of the directory:
npm install npm run dev
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## Project Structure
### Next.js Basics
The basic structure of the repo follows the standard structure of a [Next.js](https://nextjs.org/docs) project.
### Structure Overview
Most code is split between 3 directories, `pages`, `backend`, and `frontend`:
`pages` is a standard Next.js structure which hosts all of the _pages_ in the app. Pages can be react routes or API endpoints. Practically, you can think of these files as entry points to the app (either URLs a user would visit or API URLs that would be used by frontend code) Files in `pages/api` directory include all the [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
`backend` contains code that is used in the backend of the app (at the top level, mostly APIs in `pages/api`).
* `backend/db` contains the [Prisma](https://www.prisma.io/) Schema file which is used for defining the DB tables and generating an ORM-like "Prisma client".
* `backend/models` contains classes related to key entities in the app. These classes wrap the Prisma client so we can access entities in the DB, but they are also a good place to put business logic, validation, etc.
`frontend` contains code that is used by the frontend of the app (at the top level, mostly non-API `pages`):
* `frontend/components` contains, as you might guess, react components.
* `frontend/data` contains client code that uses [SWR](https://swr.vercel.app/) for fetching and managing data in the front end.
* `frontend/styles` contains some configuration code used by [MUI](https://mui.com/) for theming a baseline component library.