Skip to main content

​
Prerequisites

Before you begin, ensure you have the following installed on your system:
  • Node.js (v18 or higher recommended)
  • npm or yarn package manager
  • Git for version control

​
Installation

1

Clone the repository

Clone the Villa Buena E-Commerce repository to your local machine:
git clone <repository-url>
cd villa-buena-ecommerce
2

Install dependencies

Install all required dependencies using npm:
npm install
This will install the following key dependencies:
  • React 19.2.0 - UI framework
  • Vite 7.3.1 - Build tool and dev server
  • React Router DOM 7.13.1 - Client-side routing
  • Auth0 React 2.15.0 - Authentication
  • TanStack Query 5.90.21 - Server state management
  • Axios 1.13.6 - HTTP client
  • Zustand 5.0.11 - Client state management
  • Bootstrap 5.3.8 - CSS framework
  • Lucide React 0.577.0 - Icon library
3

Configure environment variables

Create a .env file in the root directory and configure the required environment variables.See the Environment Variables page for detailed configuration.
4

Start the development server

Run the development server:
npm run dev
The application will be available at http://localhost:5173 (default Vite port).

​
Development Stack

The project uses a modern React development stack:

​
Frontend Framework

  • React 19.2.0 with React DOM for building the user interface
  • JSX syntax for component templates

​
Build Tool

  • Vite - Lightning-fast development server with Hot Module Replacement (HMR)
  • @vitejs/plugin-react - Official Vite plugin for React with Fast Refresh

​
Code Quality

  • ESLint 9.39.1 - JavaScript linting
  • eslint-plugin-react-hooks - Enforces React Hooks rules
  • eslint-plugin-react-refresh - Ensures components can be safely refreshed
This project uses ES modules ("type": "module" in package.json), so all imports must use the .js extension or be properly resolved.

​
IDE Setup

For Visual Studio Code, install:
  • ESLint - For real-time linting feedback
  • ES7+ React/Redux/React-Native snippets - Code snippets for React
  • Prettier - Code formatter (optional, not configured in project)

​
ESLint Configuration

The project uses a flat config ESLint setup with:
  • ES2020 language features
  • Browser globals
  • React Hooks validation
  • React Refresh support for Vite
  • Ignores dist directory
Run npm run lint before committing to ensure your code meets the project’s quality standards.

​
Verify Installation

To verify your setup is working correctly:
1

Check the dev server

Start the dev server with npm run dev and open http://localhost:5173 in your browser.
2

Run the linter

Execute npm run lint to ensure ESLint is properly configured.
3

Test the build

Run npm run build to verify the production build works correctly.

​
Next Steps

Environment Variables

Configure API endpoints and authentication settings

Building

Learn how to build for production

Build docs developers (and LLMs) love

Get started for freeTalk to us