Skip to main content

​
Starting the Development Server

Run the development server with Hot Module Replacement (HMR): 
npm run dev
The development server will start on http://localhost:5173 by default.
Vite’s HMR provides instant feedback when you save changes to your files.

​
Available Scripts

The project includes several npm scripts defined in package.json:
ScriptCommandDescription
devviteStart development server with HMR
startviteAlternative command to start dev server
buildvite buildBuild for production
previewvite previewPreview production build locally
linteslint .Run ESLint on the entire codebase

​
Building for Production

Create an optimized production build: 
npm run build
The build output will be generated in the dist/ directory.

​
Preview Production Build

Test the production build locally: 
npm run preview

​
Project Structure

Understand the organization of the source code: 
src/
├── components/          # Reusable React components
│   ├── projects/        # Project-specific components
│   │   └── Carousel.jsx # Project carousel component
│   ├── LangSwitcher.jsx # Language switcher component
│   ├── Navbar.jsx       # Navigation bar
│   ├── Scroll.jsx       # Scroll utilities
│   ├── SwitchTheme.jsx  # Theme toggle switch
│   └── ThemeSwitcher.jsx # Theme management
│
├── pages/               # Page components for routing
│   ├── Home.jsx         # Landing page
│   ├── About.jsx        # About page
│   ├── Projects.jsx     # Projects showcase
│   └── Contact.jsx      # Contact page
│
├── locales/             # Internationalization files
│   ├── en/global.json   # English translations
│   ├── es/global.json   # Spanish translations
│   └── fr/global.json   # French translations
│
├── lib/                 # Utility functions and helpers
│
├── utils/               # Additional utilities
│   └── startViewTransition.js # View transition utilities
│
├── App.jsx              # Main application component
├── main.jsx             # Application entry point
└── index.css            # Global styles and Tailwind directives
The project follows a feature-based structure with clear separation between components, pages, and utilities.

​
Hot Module Replacement (HMR)

Vite provides Fast Refresh for React components:
1

Instant Updates

Changes to React components are reflected immediately without full page reload
2

State Preservation

Component state is preserved during updates when possible
3

Error Recovery

Syntax errors show overlay with details, clearing automatically when fixed
If you export non-component values from a component file, Fast Refresh will perform a full reload for that module.

​
Fast Refresh Best Practices

Single Component per File

Export only one component per file for optimal HMR

Named Exports

Use named exports for components when possible

Hooks at Top Level

Keep hooks at the top level of components

Avoid Anonymous Functions

Use named function components for better debugging

​
Code Quality with ESLint

Run linting to check code quality: 
npm run lint

​
ESLint Rules

The project enforces several important rules:
  • React Hooks Rules - Ensures hooks are used correctly
  • React Refresh - Validates Fast Refresh compatibility
  • No Unused Variables - With exception for uppercase/constant patterns
  • ES2020+ Features - Modern JavaScript syntax allowed
ESLint runs on all .js and .jsx files, ignoring the dist directory.

​
Theme Development

The project includes dark/light theme support using next-themes: 
import { ThemeProvider } from 'next-themes'

// Wrap your app with ThemeProvider
<ThemeProvider attribute="class" defaultTheme="system">
  {children}
</ThemeProvider>

​
Theme Colors

Tailwind is configured with neutral as the base color in components.json, using CSS variables for dynamic theme switching.

​
Internationalization Development

Add or modify translations in the locale files:
1

Edit Translation Files

Modify src/locales/{lang}/global.json files
2

Use Translation Hook

import { useTranslation } from 'react-i18next'

const { t } = useTranslation('global')
const text = t('key.path')
3

Test Language Switching

Use the LangSwitcher component to test different languages

​
Debugging Tips

React DevTools

Install React DevTools browser extension for component inspection

Vite Network Access

Use --host flag to access dev server from other devices

Clear Cache

Delete node_modules/.vite to clear Vite’s dependency cache

Source Maps

Vite provides source maps automatically in development mode

​
Next Steps

Components

Explore available UI components

Deployment

Learn how to deploy your application

Build docs developers (and LLMs) love

Get started for freeTalk to us