DreamCoupons

A modern coupon management platform built with React, TypeScript, and Vite.

Technology Stack

• Frontend Framework: React 19.2.0
• Language: TypeScript 5.9.3 (Strict mode)
• Build Tool: Vite 7.2.2
• Styling: SASS/SCSS 1.94.1 with CSS Modules
• Routing: React Router DOM 7.9.6
• State Management: React Context API
• HTTP Client: Native Fetch API

Project Structure

DreamCoupons/
├── public/                   # Static assets
├── src/
│   ├── api/                  # API client and endpoints
│   │   ├── client/          # HTTP client
│   │   ├── endpoints/       # API endpoint definitions
│   │   ├── interceptors/    # Request/response interceptors
│   │   └── types/           # API type definitions
│   ├── assets/              # Images and styles
│   │   └── styles/          # SCSS architecture
│   │       ├── abstracts/   # Variables and mixins
│   │       └── base/        # Reset, typography, global
│   ├── components/          # React components
│   │   ├── common/          # Reusable components
│   │   ├── forms/           # Form components
│   │   └── layout/          # Layout wrappers
│   ├── config/              # Configuration files
│   ├── contexts/            # React contexts
│   ├── hooks/               # Custom React hooks
│   ├── pages/               # Page components
│   │   ├── auth/            # Authentication pages
│   │   ├── dashboard/       # Dashboard page
│   │   ├── errors/          # Error pages
│   │   ├── profile/         # Profile page
│   │   └── settings/        # Settings page
│   ├── routes/              # Router configuration
│   ├── services/            # Utility services
│   ├── types/               # TypeScript type definitions
│   ├── utils/               # Helper functions
│   ├── App.tsx              # Root component
│   └── main.tsx             # Application entry point
├── .env.development         # Development environment variables
├── .env.production          # Production environment variables
├── .env.example             # Environment template
├── package.json             # Dependencies and scripts
├── tsconfig.json            # TypeScript configuration
├── vite.config.ts           # Vite configuration
└── eslint.config.js         # ESLint configuration

Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Clone the repository
2. Install dependencies:

npm install

3. Copy environment variables:

cp .env.example .env.development

4. Update environment variables in .env.development with your API endpoints

Development

Start the development server:

npm run dev

The application will open automatically at http://localhost:5173

Build

Build for production:

npm run build

Preview production build:

npm run preview

Linting

Run ESLint:

npm run lint

Architecture Highlights

Path Aliases

The project uses TypeScript path aliases for clean imports:

• @/ → src/
• @api/ → src/api/
• @components/ → src/components/
• @contexts/ → src/contexts/
• @hooks/ → src/hooks/
• @pages/ → src/pages/
• @services/ → src/services/
• @types/ → src/types/
• @utils/ → src/utils/
• @config/ → src/config/
• @routes/ → src/routes/

State Management

The application uses React Context API with multiple focused contexts:

• AuthContext: Authentication state and methods
• ToastContext: Toast notifications
• LoadingContext: Global loading states
• ModalContext: Confirmation modals

Routing

Protected routes are implemented using React Router v7 with:

• PrivateRoute wrapper for authenticated routes
• Route constants in route-paths.ts for type safety
• Layout-based routing (MainLayout for app, AuthLayout for auth)

Styling

SCSS architecture with:

• Design tokens in _variables.scss
• Mixins for reusable patterns
• CSS Modules for component-scoped styles
• Utility classes in global styles

Environment Variables

Required environment variables:

VITE_API_URL=<your-api-url>
VITE_MEDIA_API_URL=<your-media-api-url>
VITE_APP_NAME=DreamCoupons
VITE_ENVIRONMENT=development

Features

• User Authentication (Login, Forgot Password, Reset Password)
• Protected Routes
• Dashboard
• User Profile Management
• Settings
• Toast Notifications
• Loading States
• Confirmation Modals
• Responsive Design
• Error Handling

Contributing

1. Create a feature branch
2. Make your changes
3. Run linting and type checking
4. Submit a pull request

License

Private - All rights reserved

Version

1.0.0