#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