This is a Next.js project bootstrapped with create-next-app
.
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
# Custom secret known by server only
AUTH0_SECRET=abc123
# The base url of your application
AUTH0_BASE_URL=http://localhost:3000
# The url of your Auth0 tenant domain
AUTH0_ISSUER_BASE_URL=https://dev-12345.us.auth0.com
# Your Auth0 application's Client ID
AUTH0_CLIENT_ID=def456
# Your Auth0 application's Client Secret
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 with your browser to see the result.
The pages/api
directory is mapped to /api/*
. Files in this directory are treated as API routes instead of React pages.
The basic structure of the repo follows the standard structure of a Next.js project.
lib
is where most non-react-component code lives. There is an onion architecture layered in the following way (starting from center and going out)
-
The
db
directory contains the Prisma Schema file which is used for generating ORM, defining the DB tables, etc. -
The
domains
directory contains methods pertaining to core business logic and services. There are no references to Next.js API routes, react components, etc. Methods indomains
interface with the Prisma ORM to read and write to the database and Nextjs-auth0 sessions to extract user data (and in the future other 3rd party services). (Note: Because Next.js blurs the line between front and back-end, methods in this directory could be called directly from Next.js Pages via methods likegetStaticProps
, when data does not require authentication) -
The
apiHelpers
directory contains methods for handling Next.js API Route requests. It is responsible for mapping requests from Next.js API routes (found inpages/api/
) to core logic indomains
. -
The
frontend
directory hosts code exclusively used in the front end. Thedata
directory contains methods used within the react app for interacting with Next.js APIs (and possibly other data sources in the future). SWR is used for querying and caching data. Themui
directory contains some helper functions and the UI Theme file for MUI, which is the library we use for React UI components and styling