Project Configuration Files
The project uses several configuration files to manage different aspects of the build and development process.
Vite Configuration
The vite.config.js file configures the Vite build tool:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [tailwindcss(), react()],
})
The Vite configuration uses two plugins:
- @tailwindcss/vite - Integrates Tailwind CSS v4 with Vite
- @vitejs/plugin-react - Enables Fast Refresh using Babel
TypeScript Configuration
The tsconfig.json provides TypeScript and path alias configuration:
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"baseUrl": ".",
"paths": {
"@/": ["src/"]
}
},
"include": ["src"],
"exclude": ["node_modules"]
}
The @/ path alias allows you to import from the src directory using absolute paths instead of relative paths.
// Instead of: import { utils } from '../../../lib/utils'
import { utils } from '@/lib/utils'
Component Library Configuration
The components.json file configures UI component libraries and aliases:
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "",
"css": "src/index.css",
"baseColor": "neutral",
"cssVariables": true,
"prefix": ""
},
"iconLibrary": "lucide",
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"registries": {
"@animate-ui": "https://animate-ui.com/r/{name}.json",
"@aceternity": "https://ui.aceternity.com/registry/{name}.json",
"@react-bits": "https://reactbits.dev/r/{name}.json"
}
}
Shadcn/ui Style
Uses the “new-york” style variant
Icon Library
Lucide React for consistent icons
Component Registries
Access to Animate UI, Aceternity, and React Bits
Path Aliases
Organized import paths for components and utilities
ESLint Configuration
The eslint.config.js provides code quality and consistency rules:
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import { defineConfig, globalIgnores } from 'eslint/config'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{js,jsx}'],
extends: [
js.configs.recommended,
reactHooks.configs['recommended-latest'],
reactRefresh.configs.vite,
],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
parserOptions: {
ecmaVersion: 'latest',
ecmaFeatures: { jsx: true },
sourceType: 'module',
},
},
rules: {
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
},
},
])
The ESLint configuration enforces React Hooks rules and React Refresh compatibility for optimal HMR performance.
Internationalization Setup
The project supports multiple languages through i18next configuration in src/main.jsx:
Language Detection
Automatically detects browser language from navigator.language
Supported Languages
Three languages are supported:
- Spanish (es) - default
- English (en)
- French (fr)
Persistence
Selected language is saved to localStorage for persistence across sessions
Language Files Location
Translation files are located in:
src/locales/
├── en/global.json
├── es/global.json
└── fr/global.json
Analytics Configuration
The project integrates Vercel Analytics for tracking:
import { Analytics } from "@vercel/analytics/react";
// In your root component
<Analytics />
No additional configuration is required for Vercel Analytics when deployed on Vercel.
Next Steps
Development
Start the development server and begin building
