Folder Structure

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

• public/ : Contains static assets like images (JPG, PNG), vector graphics (SVG), documents (PDF), and other media files. These files are served directly from the root URL path.

• src/__server__/ : Contains mock server API endpoints using axios-mock-adapter (opens in a new tab) for development and testing. This folder simulates backend API responses without requiring a real server.

• src/app/ : Contains all page folders using Next.js 15 App Router architecture. The project includes over 55 pages with their corresponding components, layouts, and route handlers. Each page follows Next.js file-based routing conventions. Learn more about Next.js routing in their official documentation (opens in a new tab).

• src/components/ : Contains reusable UI components like buttons, cards, dialogs, forms, and other shared elements that are used across multiple pages. These components follow a modular architecture to maintain consistency and reduce code duplication.

• src/contexts/ : Contains global context provider for state management:

  1. CartContext: Manages shopping cart state, including add/remove/update items and cart calculations

• src/data/ : Contains shared data files such as:

  1. Country lists and information
  2. Navigation menu structures
  3. Navbar navigation configurations
  4. Other reusable data constants

• src/hooks/ : Contains reusable custom React hooks for shared functionality across components. Examples include:

  1. useWindowSize: Track viewport dimensions
  2. useScroll: Monitor page scroll position
  3. And other utility hooks

• src/page-sections/ : Contains page-specific components, styled components, and hooks organized by page name. Each page has its own dedicated folder (e.g., page-sections/checkout for the checkout page). With over 55 pages in the project, this structure helps maintain clear separation and organization of page-level components.

• src/theme/ : Contains theme configuration including:

  1. Project theme setup and options
  2. Color palette definitions
  3. Typography settings
  4. Component-level theme customizations

bonik/
├── public/
|   └── assets/
|       └── images/
├── src/
|   ├── __server__/
|   |   ├── __db__
|   |   |   ├── all dummy data inside
|   ├── app/
|   |   ├── login
|   |   ├── signup
|   |   ├── fashion-1
|   |   ├── fashion-2
|   |   ├── fashion-3
|   |   ├── many more page folders
|   |   ├── 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/
|   |   └── CartContext.tsx
|   |
|   ├── 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 Organization

Component structure are straight forward. The components in this project are organized into different categories based on their purpose and reusability:

Atomic Components

• All reusable atomic components are located in src/components/
• These include basic UI elements like buttons, inputs, cards etc.

Layout Components

• Layout components that define page structure are in src/components/layouts/
• Examples include layout-1, layout-2, admin-dashboard, customer-dashboard

Page Section Components

• Larger, page-specific components are stored in src/page-sections/
• These components typically contain static data that needs to be customized
• Used for building complete page sections like hero areas, feature sections etc.