Skip to main content

​
Overview

CryptoDash follows a modular React architecture with clear separation of concerns. The project uses Vite as the build tool and follows modern React patterns with hooks and context.

​
Root Directory Structure

crypto-dash/
├── src/                    # Source code
├── public/                 # Static assets
├── index.html              # HTML entry point
├── package.json            # Dependencies and scripts
├── vite.config.js          # Vite configuration
├── tailwind.config.js      # Tailwind CSS configuration
└── eslint.config.js        # ESLint configuration

​
Source Directory (src/)

The source directory is organized into feature-based modules: 
src/
├── api/                    # API integration layer
├── components/             # React components
├── contexts/               # React Context providers
├── hooks/                  # Custom React hooks
├── layouts/                # Layout components
├── pages/                  # Page components
├── router/                 # Routing configuration
├── utils/                  # Utility functions
├── constants/              # Constants and configuration
├── i18n/                   # Internationalization
├── assets/                 # Images and static files
├── App.jsx                 # Root App component
├── main.jsx                # Application entry point
└── index.css               # Global styles

​
API Layer

The API layer is organized by feature domain: 
api/
├── axios.js                # Axios client configuration
├── dashboard/
│   └── dashboardApi.js     # Global crypto statistics
├── market/
│   └── marketApi.js        # Market data and charts
└── portfolio/
    └── portfolioApi.js     # Portfolio management

​
API Client Setup

The base axios client is configured in src/api/axios.js:
src/api/axios.js
import axios from 'axios'

const API_BASE_URL = import.meta.env.VITE_COINGECKO_BASE_URL ?? 'https://api.coingecko.com/api/v3'
const apiClient = axios.create({
  baseURL: API_BASE_URL,
  timeout: 10000,
})

​
Components Organization

Components are grouped by feature and complexity:
Reusable components used across the application:
  • CountUpValue.jsx - Animated number counter
  • ErrorBoundary.jsx - Error boundary wrapper
  • SkeletonLoader.jsx - Loading placeholders
  • ToastContainer.jsx - Toast notification display

​
Pages

Page components represent full routes: 
pages/
├── DashboardPage.jsx       # Main dashboard
├── PortfolioPage.jsx       # Portfolio management
├── MarketPage.jsx          # Market overview
├── AnalisisPage.jsx        # Analysis tools
├── TransactionsPage.jsx    # Transaction history
├── SettingsPage.jsx        # User settings
└── NotFoundPage.jsx        # 404 page

​
Routing Architecture

The application uses React Router v7 with a nested layout structure:
src/router/AppRouter.jsx
<BrowserRouter>
  <ErrorBoundary>
    <Routes>
      <Route path="/" element={<DashboardLayout />}>
        <Route index element={<Navigate to="/dashboard" replace />} />
        <Route path="dashboard" element={<DashboardPage />} />
        <Route path="portafolio" element={<PortfolioPage />} />
        <Route path="mercado" element={<MarketPage />} />
        {/* ... more routes */}
      </Route>
    </Routes>
  </ErrorBoundary>
</BrowserRouter>

​
Utilities

Utility modules provide helper functions:
  • dashboardCharts.js - SVG path generation for charts
  • dashboardFormatters.js - Number and currency formatting
  • csvExport.js - CSV export functionality

​
Constants

  • navigation.js - Navigation menu configuration

​
Internationalization

  • translations.js - Translation strings for English and Spanish

​
Entry Points

1

HTML Entry

index.html serves as the HTML shell with the root div
2

JavaScript Entry

main.jsx initializes React and wraps the app with providers:
src/main.jsx
createRoot(document.getElementById('root')).render(
  <StrictMode>
    <SettingsProvider>
      <ToastProvider>
        <App />
      </ToastProvider>
    </SettingsProvider>
  </StrictMode>,
)
3

App Component

App.jsx renders the router which handles all page navigation

​
Key Dependencies

From package.json: 
"dependencies": {
  "react": "^19.2.0",
  "react-dom": "^19.2.0",
  "react-router-dom": "^7.13.0",
  "axios": "^1.13.5",
  "tailwindcss": "^4.2.0"
}

​
Best Practices

  • Place reusable components in components/common/
  • Place feature-specific components in their respective feature folders
  • Keep page components simple and focused on layout
  • Group API functions by feature domain
  • Use the shared axios client from api/axios.js
  • Implement caching at the API layer when appropriate
  • Use PascalCase for component files: ComponentName.jsx
  • Use camelCase for utility files: utilityName.js
  • Use kebab-case for CSS files: style-name.css

​
Next Steps

State Management

Learn about Context API and custom hooks

API Integration

Understand the CoinGecko API integration

Theming

Explore the dark/light theme system

Build docs developers (and LLMs) love

Get started for freeTalk to us