Folder Structure

An organized folder system makes it easier to find what you need. The directory bonik/ contains the folder hierarchy.

• public/ : Get all static files, such as JPGs, PNGs SVGs, and PDFs, inside of this folder.

• src/_server_/ : Using axios-mock-adapeter (opens in a new tab), fetch the entire server API from this folder.

• src/app/ : Bonik has more than 55 pages in total, and this folder contained all of the page folders. For creating page we follow the next 14 app router approach. If you want to learn more about go here Next.js Routing (opens in a new tab)

• src/components/ : We created a large number of reusable components for the entire project. Each reusable component was taken from this folder.

• src/contexts/ : This folder contains all global contexts, including StyledContext (for styled components theme).

• src/data/ : All shared data, including countries, navigation, and navbar-navigation, are contained in this folder.

• src/hooks/ : All global hooks are found in this folder. such as useWindowSize and useScroll.

• src/page-sections/ : There were more than 55 pages total in the project, and inside each page's section (components, styled components, and hooks) were pre-existing and based on the page name. As example, for checkout page page-sections/checkout

• src/theme/ : The project theme setup, theme options, and colors are located from here.

bonik/
├── public/
|   └── assets/
|       └── images/
├── src/
|   ├── __server__/
|   |   ├── __db__
|   |   |   ├── all dummy data inside
|   ├── app/
|   |   ├── (auth)
|   |   |   ├── login
|   |   |   ├── signup
|   |   |   └── layout.jsx
|   |   |
|   |   ├── (layout-1)
|   |   |   ├── fashion-1
|   |   |   ├── fashion-2
|   |   |   ├── fashion-3
|   |   |   └── layout.jsx
|   |   |   └── many more page folders
|   |   |
|   |   ├── (layout-2)
|   |   |   ├── grocery-1
|   |   |   ├── grocery-2
|   |   |   └── layout.jsx
|   |   |   └── many more page folders
|   |   |
|   |   ├── (sales)
|   |   |   ├── sales-1
|   |   |   └── sales-2
|   |   |   └── layout.jsx
|   |   |
|   |   ├── page.jsx
|   |   ├── layout.jsx
|   |   ├── loading.jsx
|   |   ├── not-found.jsx
|   |   |
|   ├── components/
|   |   ├── accordion
|   |   ├── banners
|   |   ├── carousel
|   |   ├── carousel-cards
|   |   ├── category-cards
|   |   ├── navbar
|   |   ├── layouts
|   |   └── Includes many more reusable components folder
|   |
|   ├── contexts/
|   |   ├── app-context
|   |   ├── StyledContext.jsx
|   |
|   ├── data
|   ├── hooks
|   ├── lib
|   ├── models
|   ├── page-sections
|   |   ├── cart
|   |   ├── checkout
|   |   ├── fashion-1
|   |   ├── fashion-2
|   |   ├── fashion-3
|   |   └── Few more folders
|   |
|   ├── theme
|   ├── utils
|   |   ├── __api__
|   |   |   └── all api functions create inside
└── README.md

Component structure are straight forward.

• Reusable atomic components are located in src/components
• Layout components are located in src/components/layouts.
• Bigger static components are located in src/page-sections
  • Static component means, these components has static data which you need to modify