https://github.com/awebcode/react-project-interview

Course Buy Website built with Vite, React🛒 Course Listing: View all available courses. 📑 Course Details: Learn more about each course. 🧾 Checkout System: Secure and easy checkout for course purchases. 📱 Responsive Design: Fully optimized for mobile, tablet, and desktop devices. 🔄 Fast Navigation: Using client-side rendering for instant page
https://github.com/awebcode/react-project-interview

course-project course-website mern-cart mern-course react-course

Last synced: 28 days ago
JSON representation

Course Buy Website built with Vite, React🛒 Course Listing: View all available courses. 📑 Course Details: Learn more about each course. 🧾 Checkout System: Secure and easy checkout for course purchases. 📱 Responsive Design: Fully optimized for mobile, tablet, and desktop devices. 🔄 Fast Navigation: Using client-side rendering for instant page

• Host: GitHub
• URL: https://github.com/awebcode/react-project-interview
• Owner: awebcode
• Created: 2024-10-22T01:38:35.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-10-23T02:48:34.000Z (over 1 year ago)
• Last Synced: 2025-01-23T03:33:16.660Z (about 1 year ago)
• Topics: course-project, course-website, mern-cart, mern-course, react-course
• Language: JavaScript
• Homepage: https://react-project-interview.vercel.app
• Size: 3.65 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
#Course Buy Website 📚

This is a modern platform for buying online courses, built using Vite, React, and Tailwind CSS. The project provides a seamless experience for browsing, exploring, and securely purchasing courses.

#📋 Table of Contents

Demo

Features

Tech Stack

Installation

Usage

Project Structure

Configuration

Contributing

License

Contact

#🎉 Demo

Access the live version of the project here:

Course Buy Website

#🚀 Features

🛒 Browse Courses: Users can view all available courses.

📄 Course Details: Get detailed information about any course.

🔐 Secure Checkout: Add courses to the cart and complete the purchase with ease.

📱 Mobile Friendly: The website is fully responsive.

🌙 Dark Mode: Switch between light and dark modes effortlessly.

⚡ Blazing Fast: Instant page navigation with client-side routing.

🛠 Tech Stack

Frontend: Vite + React

Styling: Tailwind CSS

Routing: React Router

State Management: React Hooks (useState, useEffect)

Icons: Heroicons

Deployment: Vercel / Netlify

⚙️ Installation

Prerequisites

Ensure you have Node.js and Yarn installed on your system.

Clone the Repository:

git clone https://github.com/awebcode/react-project-interview.git

cd course-buy-website

Install Dependencies:

yarn install

Run Development Server:

yarn dev

Build for Production:

yarn build

Preview the Production Build:

yarn preview

#🚀 Usage

After starting the development server, visit http://localhost:5173 in your browser.

Home Page: Browse all courses.

Course Details: Click on any course to view more details.

Checkout: Add courses to the cart and purchase them.

#📂 Project Structure

graphql

Copy code

├── public/            # Static assets (images, icons)

├── src/

│   ├── assets/        # Course images and icons

│   ├── components/    # Reusable React components (e.g., Header, Footer)

│   ├── pages/         # Main pages (Home, Course, Checkout)

│   ├── routes/        # Routing configurations

│   ├── styles/        # Tailwind CSS styles

│   ├── App.jsx        # Main application component

│   └── index.js       # Entry point

├── .gitignore         # Files to ignore in version control

├── index.html         # Main HTML entry point

├── package.json       # Project dependencies and scripts

├── postcss.config.js  # PostCSS configuration

├── tailwind.config.js # Tailwind CSS configuration

└── README.md          # Project documentation

🔧 Configuration

Tailwind CSS

If you want to customize the Tailwind CSS configuration, modify the tailwind.config.js file.

module.exports = {

  content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],

  theme: {

    extend: {},

  },

  plugins: [],

}

#🤝 Contributing

Contributions are welcome! Please follow these steps:

##Fork the repository

###Create a new branch

git checkout -b feature/your-feature-name

Commit your changes

git commit -m "Add your message here"

Push to the branch

git push origin feature/your-feature-name

Open a Pull Request

#📄 License

This project is licensed under the MIT License. See the LICENSE file for more information.

#📧 Contact

If you have any questions or suggestions, feel free to reach out!

GitHub: @awebcode

Email: asikurrahaman997@.com