Folder Structure

The default folder structure is outlined below:

├─ components
├─ components.json
├─ context
├─ globalConfig.js
├─ jsconfig.json
├─ lib
├─ next.config.js
├─ package-lock.json
├─ package.json
├─ pages
├─ postcss.config.js
├─ public
├─ README.md
├─ .env.example
├─ .gitignore
└─ tailwind.config.js

If it looks oddly familiar, that’s because it is. The base of this project was created using create-next-app. The rest of the project folder structure will be detailed down below.

Components Directory

The components directory contains 3 subdirectories and a file called Theme-Provider. The theme provider handles the theme state of the app (light, dark, and system modes). It also manages the state of the admin sidebar (open or closed).

Layout Directory

The layout directory handles all the components related to the admin dashboard structure, like the Sidebar and its content, the Navbar, and how they are all laid out on the dashboard.

Modular Directory

The Modular directory contains all the custom reusable components created for the application to run smoothly. It includes an admin directory that contains components accessible only to an admin or superuser. A directory labeled auth contains all the authentication components.

Context Directory

The context directory contains all the context files included in this project.

Lib Directory

The lib directory contains all the default logic in the application, such as authentication logic, user management logic, data fetching logic from Firebase, etc.

Feel free to extend and modify these to suit your use cases.

Complete Folder Structure

Find the complete folder structure below.

├─ blog-content
├─ components
│  ├─ layout
│  ├─ Modular
│  │  ├─ admin
│  │  ├─ auth
│  │  ├─ Containers
│  │  ├─ DataTables
│  │  ├─ LandingNav.jsx
│  │  └─ SEO.jsx
│  ├─ Theme-Provider.jsx
│  ├─ ui
├─ components.json
├─ context
│  ├─ AuthUserContext.jsx
│  ├─ OrganizationContext.jsx
│  └─ TeamContext.jsx
├─ globalConfig.js
├─ jsconfig.json
├─ lib
├─ pages
│  ├─ admin-onboarding.js
│  ├─ api
│  ├─ auth
│  ├─ index.js
│  ├─ user-onboarding.js
│  ├─ _admin
│  └─ _profile
│     ├─ profile-components
├─ postcss.config.js
├─ public
│  ├─ avatars
│  ├─ images
├─ README.md
├─ styles
│  └─ globals.css
├─ .env.example
├─ .gitignore
└─ tailwind.config.js