Dashboard Template Repository

Welcome to the Dashboard Template Repository! This repository provides a starting point for building a scalable and organized dashboard UI. It follows a clear folder structure that is easy to understand and maintain, ideal for newcomers to start their projects or use it as a reference.

Project Overview

This template includes:

• Auth Flow: Full auth flow: login, register, forget password, otp , verfiy

• auth-layout and app-layout: handled auth and main dashboard layout outlets

• A main UI built with ShadCN, React Query Table for efficient data handling, and various other libraries to facilitate smooth project development.

• Pre-configured Redux, SWR, API-inteceptor, React Router, i18n, DirectionProvider, and Toaster Provider to enable state management, routing, internationalization, and notifications.

• Example Modules: Vendor and Users, demonstrating best practices for managing modules that list data and perform CRUD operations.

• API Services: A separate service class for each module located at src/app/api/services, showcasing how to structure API calls and services for scalability and maintainability.

Folder Structure

The folder structure in this template is organized to promote clarity and separation of concerns. Here's an overview of the main directories:

src/
├── app/
│   ├── api/
│   ├── services/
│   │   ├── api.ts                  # man app interceptor to provided tokens and headers for private endpoints
│   │   ├── auth.service.ts         # auth service class
│   ├── config/
│   │   ├── envConfig.ts
│   ├── constants/                  # for all app constatns
│   │   ├── endPoints.ts            # all backend endpoints
│   │   ├── localStorageKeys.ts     # browser local storage keys
│   │   ├── mocks.ts                # mock data
│   │   ├── routes.ts               # all router routes
│   │   ├── swrKeys.ts              # swr uniqe key for each endpoint
│   ├── locales/
│   │   ├── translations.json       # arabic translation object
│   │   ├── translations.json       # english translation object
│   │   ├── config.ts               # i18n configration
│   ├── router/
│   │   ├── index.ts                # create browser router and handle routing layouts
│   │   ├── protected-route.tsx     # protected-route
│   ├── types/
│   │   ├── auth.types.ts           # types for each service
│   ├── components/                 # shadcn components  (auto generated folder dont miss with that)
│   ├── hooks/                      # Custom React hooks
│   ├── lib/
│   │   ├── utils.ts                # utilis like tailwind merge and cn
│   │   ├── helpers.ts              # function that help u through problem u faced
│   ├── modules/                    # Example modules (e.g., Vendor, Users)
│   ├── store/                      # Redux store and slice configurations

Key Features

1. Pre-configured Providers

This template includes the following pre-configured providers to help you get started quickly:

• Redux: For state management.
• SWR: For fetching data with caching.
• React Router: For routing and navigation between pages.
• i18n: For internationalization support.
• DirectionProvider: For RTL (Right-to-Left) and LTR (Left-to-Right) layout handling.
• Toaster Provider: For showing notifications using the toaster library.

2. Example Modules

• Vendor Module: Shows how to list vendor data and perform CRUD operations.
• Users Module: Displays user data and includes an example of managing user details with CRUD operations.

Each module includes:

• A service class for handling API requests.
• A data table using React Query Table for displaying data efficiently.
• Basic form components for managing CRUD operations.

3. API Service Structure

Each module has its own API service class located under src/app/api/services. These service classes manage interactions with backend APIs. This modular approach ensures that API logic is isolated per module, making the codebase easier to scale and maintain.

Example structure:

// src/app/api/services/vendorService.js
class VendorService {
  static getAllVendors() {
    // Fetch all vendors from the API
  }

  static createVendor(vendorData) {
    // Create a new vendor
  }

  // Other CRUD operations...
}

export default VendorService;

4. Configurations and Setup

This repository includes configuration files for:

• Redux (store, slices)
• React Router (routes setup)
• i18n (for multilingual support)
• Toaster (for UI notifications)
• Tailwind CSS (styling)

These configurations are pre-setup so you can focus on building features instead of worrying about boilerplate code.

Getting Started

To get started with this template, follow these steps:

1. Clone the repository:

git clone https://github.com/your-repository/dashboard-template.git
cd dashboard-template

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

Your app should now be running at http://localhost:5173.

4. Modify and Build Your Project:

• Customize the modules, services, and components to fit your project's needs.
• Utilize the example modules as a guide for structuring your own.

Contributing

We welcome contributions to this repository! Please feel free to open an issue or create a pull request with your improvements.

This template is designed to make it easier for newcomers to adopt a well-organized project structure while providing a solid foundation for building feature-rich dashboard applications.