Veloura Frontend

Veloura is a comprehensive skincare and salon booking platform. This repository contains the frontend application that connects customers with beauty services, enables salon owners to manage their businesses, and provides an administrative interface for platform oversight.

🚀 Project Overview

The application serves three primary user roles:

• Customers: Discover salons, book services, process payments, and engage with the community and AI assistant.
• Salon Owners: Manage salon profiles, services, staff, bookings, and customer reviews.
• Administrators: Oversee the entire platform, including users, salons, and service categories.

✨ Key Features

• Role-Based Access Control: Secure routing tailored to Customer, Salon Owner, and Admin roles.
• Salon Discovery & Booking: Interactive search, detailed salon profiles, and a streamlined booking flow.
• Integrated Payments: Secure payment processing utilizing the Cashfree Payment Gateway.
• AI Beauty Assistant: Automated beauty and skincare recommendations.
• Community Hub: A dedicated space for user engagement and discussions.
• Comprehensive Dashboards: Tailored portals for all user types to manage their respective data (profiles, bookings, services, etc.).

🛠 Technology Stack

• Framework: React 19
• Build Tool: Vite
• Routing: React Router DOM v7
• Styling: Tailwind CSS v3 with a custom design system
• HTTP Client: Axios
• Payments: @cashfreepayments/cashfree-js
• Linting: Oxlint

📁 Project Structure

src/
├── api/          # Axios configuration and API client setup
├── assets/       # Static assets (images, icons)
├── components/   # Reusable UI components (Layout, Navbar, ProtectedRoute)
├── context/      # React Context providers (AuthContext)
├── data/         # Static data or mock information
└── pages/        # Feature-specific views (Dashboards, Booking Flow, Auth)

📋 Prerequisites

• Node.js: Version 24 or higher (as configured in deployment workflows)
• npm: Standard node package manager

⚙️ Installation & Configuration

1. Clone the repository:

   git clone <repository-url>
   cd veloura/frontend

2. Install dependencies:

   npm install

3. Environment Variables: Create a .env file in the root directory (you can copy from .env.example):

   VITE_API_URL=http://localhost:5000/api

   Note: Update the URL to point to your backend server if it differs.

🚀 Running the Project

Start the development server with Vite:

npm run dev

The application will be accessible at the port specified in your terminal (typically http://localhost:5173).

📜 Available Scripts

• npm run dev: Starts the Vite development server.
• npm run build: Compiles and bundles the application for production into the dist/ folder.
• npm run preview: Previews the compiled production build locally.
• npm run lint: Runs the Oxlint linter to check for code quality issues.

🚢 Deployment

The project includes an automated deployment workflow using GitHub Actions (.github/workflows/deploy.yml).

• Trigger: Pushes to the main branch.
• Process: Builds the Vite application and deploys the dist/ folder to an AWS EC2 instance via rsync.
• Required GitHub Secrets:
  • SSH_HOST: The IP address or domain of the EC2 instance.
  • SSH_USER: The SSH username (e.g., ubuntu).
  • SSH_PRIVATE_KEY: The private key for SSH access.

📸 Screenshots or Demo

[Requires User Input]: Please provide links to live demos or add screenshots of the application here.

📄 API Documentation & Database

[Requires User Input]: The frontend consumes a REST API. Link to the backend repository or API documentation if available. Database configurations are managed by the backend.

📝 License

[Requires User Input]: Please specify the licensing details for this project.

👤 Author

[Requires User Input]: Add author information, contact details, or portfolio links here.