Skip to main content

Project Structure

Project Directory Structure​

Here's a breakdown of the directory structure of the project:

public​

This directory contains static content that is served directly to clients. It may include assets such as images, fonts, or other files that need to be accessible to the public.

src​

  • app: Contains the application router, managing routing within the application. It may include subdirectories corresponding to different sections or modules of the application (e.g., dashboard, static pages, API routes).

  • components: Contains reusable components used throughout the application, such as UI elements, layouts, or functional components.

  • config: Configuration files for the application, including environment variables, constants, or settings.

  • data: Contains static demo data used for development or testing purposes.

  • db: Contains database schemas or related files for database management.

  • email templates: Contains templates for email notifications used in the application, such as invitation emails or authentication emails.

  • hooks: Contains custom React hooks used in the application for shared logic or state management.

  • lib: Contains utility functions or libraries used across the application.

  • server: Contains server-side code, such as services or actions for interacting with databases or external APIs.

Config Files​

  • .env.example: Example environment variables file, providing a template for setting up environment variables required by the application.

  • .eslintrc.json: ESLint configuration file, defining linting rules for JavaScript code.

  • .gitignore: Gitignore file, specifying files and directories to be ignored by version control systems like Git.

  • .prettierignore: Prettier ignore file, specifying files and directories to be ignored by the code formatter Prettier.

  • next.config.js: Configuration file for Next.js, if the project is a Next.js application.

  • package.json: Manifest file for npm packages, listing dependencies and scripts for building, testing, and running the application.

  • pnpm-lock.yaml: Lock file generated by the pnpm package manager, ensuring consistent dependency versions across installations.

  • postcss.config.js: Configuration file for PostCSS, a tool for transforming CSS with JavaScript plugins.

  • prettier.config.js: Configuration file for Prettier, a code formatter used to enforce consistent code style.

  • tailwind.config.js: Configuration file for Tailwind CSS, a utility-first CSS framework.

  • tsconfig.json: TypeScript configuration file, specifying compiler options and settings for TypeScript projects.

File tree​

├── public                  // Staticly served content
|  └── ...
|
├── src
|  ├── app                  // App router
|  |  ├── (blank)
|  |  ├── (dashboard)
|  |  ├── (static)
|  |  ├── api
|  |  ├── join
|  |  ├── login
|  |  └── ...
|  |  
|  ├── components           // contains all the common components here
|  |  └── ...
|  |
|  ├── config               // configuration files
|  |  └── ...
|  |
|  ├── data                 // static demo data
|  |  └── ...
|  |
|  ├── db                   // database schemas
|  |  └── ...
|  |
|  ├── email templates      // email teamplate for invitation and login autentication
|  |  └── ...
|  |
|  ├── hooks                // contains all the custom hooks
|  |  └── ...
|  |
|  ├── lib                  // contains all the custom hooks
|  |  └── ...
|  |
|  ├── server 
|  |  ├── service           // server-actions for communication with db and other api .
|  |  └── action
|  |
|  ├── auth.ts              // authentication config file for lucia auth
|  ├── env.mjs              // contains required env varibale validation
|  ├── middleware.ts        //route protection and middlware handle 
├── .env.example            // contains environment variables
├── .eslintrc.json.json     // eslint configuration file
├── .gitignore              // gitignore file
├── .prettierignore         // prettierignore file
├── next.config.js          // next.js configuration file
├── package.json            // manifest file
├── pnpm-lock.yaml          // a lock file generated by the pnpm package manager.
├── postcss.config.js       // postcss configuration file
├── prettier.config.js      // prettier configuration file
├── tailwind.config.js      // tailwind configuration file
├── tsconfig.json           // typescript configuration file
└── ...