Skip to content

Latest commit

 

History

History
113 lines (83 loc) · 3.88 KB

README.md

File metadata and controls

113 lines (83 loc) · 3.88 KB
Raw

Beauty Courses Project

This project is a React application designed to list and showcase beauty courses from various salons. The design is inspired by modern, minimalist aesthetics with a focus on user-friendly navigation and clean UI.

Project Structure

The project is built with React, Vite, and Bootstrap for the front-end, utilizing JSONPlaceholder for demo content such as course images and instructor details.

Technologies Used

  • React: Front-end framework for building user interfaces.
  • Vite: Build tool that allows fast development.
  • Bootstrap: CSS framework for responsive, mobile-first design.
  • JSONPlaceholder: Fake REST API for testing and prototyping.

Project Plan

1. Setup and Initial Configuration

  • Initialize the project with Vite and React.

  • Install dependencies:

    npm install bootstrap react-bootstrap

  • Create the folder structure:

    src/
  components/
    HeroSection.jsx
    FeaturedCourses.jsx
    CategorySection.jsx
    Testimonials.jsx
  pages/
    Home.jsx
  assets/

2. Design Components

  • Hero Section: Design the landing section with a large image, headline, and call-to-action button.
  • Featured Courses: Display a grid of beauty courses, fetched from JSONPlaceholder, with images, titles, and instructor names.
  • Category Section: A list of categories for the beauty courses, each represented with a button.
  • Testimonials Section: Display student reviews with a small photo, name, and course feedback.

3. Fetching Data

  • Fetch images and course descriptions using https://jsonplaceholder.typicode.com/photos.
  • Fetch instructor and testimonial data using https://jsonplaceholder.typicode.com/users.

4. UI/UX Design

  • Implement a clean, modern aesthetic inspired by beauty and wellness industries.
  • Use Bootstrap for responsive layout and styling.
  • Add icons and hover effects for better user interaction.

5. Final Touches

  • Add navigation links to different course categories.
  • Implement dark mode support using React context.
  • Ensure mobile responsiveness.

Getting Started

  1. Clone the repository: 
    git clone https://github.com/visualGravitySense/beauty-courses-app.git
  2. Navigate into the project directory: 
    cd beauty-courses-app
  3. Install dependencies: 
    npm install
  4. Start the development server: 
    npm run dev

Future Enhancements

  • Add a real API integration for fetching course data from actual beauty salons.
  • Implement advanced filtering and search functionality for courses.
  • Add a detailed course page with booking options.

Contributing

Feel free to fork this repository and create pull requests to suggest improvements or fixes.

Tasks and Timeline

Task Time Estimate Status
Set up project and dependencies 1 day Completed
Build Hero section 0.5 days In progress
Implement Featured Courses 1 day Pending
Design Categories section 0.5 days Pending
Add Testimonials section 0.5 days Pending
UI/UX design refinements 1 day Pending

This README file gives an overview of the project's structure, tasks, and setup steps, ensuring contributors and collaborators can easily get started.

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available: