Skip to main content

​
Overview

DADDO is built as a modern single-page application (SPA) using React 18 with Vite as the build tool and bundler. The application follows a component-based architecture with centralized state management using Redux.

​
Technology Stack

Frontend Framework

React 18.2.0 with React Router v7.6.3

Build Tool

Vite 5.2.0 for fast development and optimized builds

State Management

Redux 5.0.1 with Redux Thunk 3.1.0

Styling

Tailwind CSS 4.1.11 with Vite plugin

​
Project Structure

The application follows a clear separation of concerns with the following directory structure: 
src/
├── Views/              # Page-level components
│   ├── LoginPage.jsx
│   ├── home.jsx
│   ├── CatalogPage.jsx
│   ├── createProduct.jsx
│   ├── createSell.jsx
│   ├── SellsView.jsx
│   ├── DashBoard.jsx
│   └── ...
├── components/         # Reusable UI components
│   ├── Protected_Route.jsx
│   ├── MyCatalogLink.jsx
│   ├── dash/          # Dashboard-specific components
│   └── sales/         # Sales-specific components
├── Redux/             # State management
│   ├── store.js       # Redux store configuration
│   ├── api.js         # Axios instance with interceptors
│   ├── Reducer/       # Redux reducers
│   │   ├── index.js
│   │   ├── authReducer.js
│   │   ├── productReducer.js
│   │   ├── catalogReducer.js
│   │   ├── sellsReducer.js
│   │   └── dashReducer.js
│   └── actions/       # Redux actions
│       ├── Auth/
│       ├── Products/
│       ├── Sells/
│       └── Dash/
└── assets/            # Static assets (images, icons, etc.)

​
Build Configuration

​
Vite Configuration

The application uses Vite with React and Tailwind CSS plugins:
vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    react(),
    tailwindcss()
  ],
})

​
Build Scripts

Available NPM scripts:
package.json
{
  "scripts": {
    "dev": "vite",              // Start development server
    "build": "vite build",      // Production build
    "preview": "vite preview",  // Preview production build
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0"
  }
}

​
Routing Architecture

The application uses React Router v7 for client-side routing with a clear separation between public and protected routes.

​
Route Configuration

src/App.jsx
import { Routes, Route } from 'react-router-dom'
import Protected_Route from './components/Protected_Route'

function App() {
  return (
    <Routes>
      {/* Public Routes */}
      <Route path="/" element={<Login/>} />
      <Route path="/create" element={<Create_user/>} />
      <Route path="/catalog/:userId" element={<CatalogPage/>} />
      <Route path="/allcatalogs" element={<CatalogList/>} />
      
      {/* Protected Routes */}
      <Route element={<Protected_Route/>}>
        <Route path="/home" element={<Home/>} />
        <Route path="/createProd" element={<Create_Product/>} />
        <Route path="/my-catalog" element={<MyCatalogLink/>}/>
        <Route path="/createSell" element={<Create_Sell/>}/>
        <Route path="/dash" element={<DashboardSPA/>} />
        <Route path="/Sells" element={<View_Sells/>} />
        <Route path="/products" element={<AllProductsPage/>}/>
        <Route path="/profile" element={<UserProfile/>} />
      </Route>
    </Routes>
  )
}

​
Protected Routes Implementation

Authenticated routes are protected using a wrapper component that checks for a valid authentication token:
src/components/Protected_Route.jsx
import { Navigate, Outlet } from "react-router-dom";
import { useSelector } from "react-redux";

const Protected_Route = () => {
  const token = useSelector(state => state.auth.token);
  return token ? <Outlet /> : <Navigate to="/" />;
};

export default Protected_Route;
The Protected_Route component uses Redux to check authentication state and automatically redirects unauthenticated users to the login page.

​
Authentication Flow

  1. User submits login credentials
  2. Redux action dispatches API request
  3. On success, token is stored in localStorage/sessionStorage
  4. Redux store updates with user data and token
  5. Protected routes become accessible
  6. Token is automatically included in subsequent API requests via interceptor

​
Deployment Configuration

​
Vercel Deployment

The application is configured for deployment on Vercel with SPA routing support:
vercel.json
{
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}
This configuration ensures all routes are handled by the React Router, allowing direct navigation to any route without 404 errors.

​
Environment Variables

The application requires the VITE_URL2 environment variable to be set for API communication.
.env
VITE_URL2=https://your-api-url.com

​
Key Dependencies

PackageVersionPurpose
react18.2.0Core UI library
react-router-dom7.6.3Client-side routing
redux5.0.1State management
redux-thunk3.1.0Async action handling
axios1.10.0HTTP client
tailwindcss4.1.11Utility-first CSS
recharts3.2.0Data visualization
qrcode.react4.2.0QR code generation
react-toastify11.0.5Toast notifications
lucide-react0.539.0Icon library

​
Performance Optimizations

  • Vite’s Fast Refresh: Hot module replacement for instant updates during development
  • Code Splitting: React Router automatically splits code by route
  • Optimized Production Builds: Vite produces highly optimized production bundles
  • Tree Shaking: Unused code is automatically removed from production builds

​
Next Steps

State Management

Learn about Redux store configuration and state structure

API Integration

Explore API configuration and authentication

Build docs developers (and LLMs) love

Get started for freeTalk to us