Code structure
The codebase is based on monorepo project structure. It comes with code modularity both solo makers and tech teams can benefit from.
For instance, you can create a reusable design system package that can be used
in multiple apps (e.g. web, docs, or Chrome extension). This will make sure you
avoid writing repetitive code.
Apps and Packages
There are two main folders in the root of the codebase - apps and packages.
- apps
-- web
- packages
-- database
-- es-lint-config-custom
-- tailwind-config
-- tsconfig
-- uiApps Folder
web: a Next.js app (the main one, used for demo purposes)
The codebase provides you with the Next.js app as a starting point but you can
use other React-based frameworks too and still benefit from the codebase -
packages are either Javascript/Typescript libraries (e.g. database or
emailing) or React things (e.g. ui). Simply use the web app as a guide
when creating your own apps.
Packages Folder
The packages folder contains a collection of reusable and ready-to-use
packages used throughout the monorepo:
database: powered by Prisma, the Node.js and Typescript ORM.emailing: powered by react email and Sendgrideslint-config-custom: ESLing configurations.tailwind-config: Tailwind CSS configurations.tsconfig: Typescript configurations.ui: Beautifully designed components by shadcn/ui. Based on Radix & Tailwind CSS & Lucide Icons. Fully customizable.