React Dynamic Project Setup

A modern React application built with Vite, TypeScript, and Tailwind CSS, featuring a dynamic sidebar, robust API integration, and Redux state management.

🚀 Features

• Modern UI/UX: Clean interface with a collapsible sidebar, responsive navbar, and smooth animations.
• Dynamic Sidebar: Configurable menu items with support for nested submenus and tooltips.
• State Management: Powered by Redux Toolkit for efficient global state handling (User, Sidebar).
• API Integration: Centralized Axios instance with interceptors for auth tokens and error handling.
• Authentication: Secure token handling via localStorage and automatic header injection.
• Profile Page: Dedicated user profile page fetching data directly from the API.
• Toast Notifications: Integrated sonner for beautiful, customizable toast alerts.
• Dark Mode Support: Built-in support for light and dark themes (via Tailwind).

🛠️ Tech Stack

• Framework: React 19
• Build Tool: Vite
• Language: TypeScript
• Styling: Tailwind CSS 4
• State Management: Redux Toolkit
• Routing: React Router DOM
• HTTP Client: Axios
• Icons: Lucide React
• Notifications: Sonner

⚙️ Setup & Installation

1. Clone the repository

   git clone <repository-url>
   cd project-setup

2. Install dependencies

   npm install

3. Configure Environment Variables Create a .env file in the root directory:

   VITE_API_BASE_URL=https://nightly-dms-api.skill-mine.com/dms-v2-srv

4. Run the development server

   npm run dev

📂 Project Structure

src/
├── api/                # API layer
│   ├── services/       # Domain-specific services (e.g., userService)
│   ├── auth.ts         # Auth helpers (getAuthToken)
│   ├── axiosInstance.ts# Configured Axios instance
│   └── endpoints.ts    # API URL constants
├── components/         # Reusable UI components
│   ├── Navbar/         # Top navigation bar
│   ├── Sidebar/        # Collapsible sidebar
│   └── ui/             # Generic UI elements (Tooltip, etc.)
├── context/            # React Context (SidebarContext)
├── layouts/            # Page layouts (BaseLayout)
├── pages/              # Application pages (Dashboard, Profile)
├── router/             # Route definitions
├── store/              # Redux store setup
│   └── slices/         # Redux slices (userSlice)
├── styles/             # Global styles and CSS
├── types/              # TypeScript type definitions
└── utils/              # Utility functions

🔌 API Integration

The application uses a centralized axiosInstance located in src/api/axiosInstance.ts.

• Base URL: Configured via VITE_API_BASE_URL.
• Interceptors:
  • Request: Automatically attaches the Authorization: Bearer <token> header if a token exists in localStorage.
  • Response: Global error handling for 401, 403, and 500 errors using toast notifications.

Adding New APIs

1. Define the endpoint URL in src/api/endpoints.ts.
2. Create a service function in src/api/services/ (e.g., productService.ts).
3. Use the service in your components or Redux thunks.

👤 User Profile

The Profile Page (/profile) demonstrates a direct API call pattern using userService, bypassing Redux for data that doesn't need to be globally cached. It displays:

• User Avatar & Status
• Personal Information (Email, Phone)
• Account Details (ID, Onboarding Method, Last Login)

🤝 Contributing

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request