Understanding Project Structure

A guide to understand the files and folder structure of the codebase

Let's dive into the essential files and folders.

1. app

• It includes all the frontend pages and the backend api routes.
• Structure Overview
  • (landing): Contains the layout and page files for your landing page.
  • (protected): Contains protected routes such as dashboard, pages, which are only logged in users can access.
  • api/auth: Contains backend authentication routes and configurations, including registeration, reset password, verification etc.
  • auth: Contains all the pages related to authentication, includes pages like login, register, reset password etc.

2. components

• Contains reusable UI components and are broken down to their respective folders. e.g., landing folder has components related to the landing page.
• Sections:
  • auth: Authentication-related components. Necessary components includes:
    • card wrapper: It is a reusable components used in every form UI, e.g., login, register, etc.
    • social: It is a component for signing in via OAuth e.g., Google, etc.
    • error card: This will show if there happens any error related to auth.
  • dashboard: It contains two components for navigation, sidebar for larger devices and mobile-sidebar for mobile devices.
  • landing: Contains components of different sections of landing pages e.g., pricing, faqs, demo, features etc.
  • shared: Contains components shared across different files.
  • ui: These are shadcn components. If you want to learn about them, click here.
  • form-error, form-success: Shows error/success messages based on the response from backend.

3. lib

• Contains helper/utility files used across the app.
• Files:
  • db.js: Handles database connection.
  • mail.js: Manages email-sending functionality.
  • password-reset-token.js, verification-token.js: Includes functions to get verification, password reset tokens from database.
  • routes.js: Contains route definitions used in middleware.
  • token.js: Generates verification, password reset tokens.
  • user.js: Contains functions to get user details from database by email or id.

4. prisma

• It contains all the database schema/models created using prisma.

5. schemas

• Contains data validation schemas to validate the data sent to the backend and received by the frontend.

1. constants.js

• This file holds all the constants (data), for example, navbar links, dashboard links, features data, etc.

2. middleware.js

• Checks whether the user is logged in or not and redirects accordingly.

3. auth.js, auth.config.js

• These files contain the configuration for setting up authentication, from OAuth to Credential Providers.

This guide provides a comprehensive understanding of how the project's files and folders are organized, making it easier for developers to navigate and modify the codebase efficiently.