Skip to content

Latest commit

 

History

History
44 lines (29 loc) · 2.67 KB

README.md

File metadata and controls

44 lines (29 loc) · 2.67 KB
Raw

Udemy Clone

This project is a clone of the homepage and the course detail page of the popular online learning platform Udemy, built with React, React Router, React Hooks, Material UI, and CSS modules. It was part of my summer internship at bld.ai.

You can view the live demo of the project here.

Installation and Usage

To run the project locally, follow these steps:

  • Make sure you have Node.js and npm installed on your machine.
  • Clone the repository: git clone https://github.com/aboelsooud/Udemy-Home-Page-React.git
  • Install the dependencies: npm install
  • Start the development server: npm start
  • Open http://localhost:3000 in your browser

Technologies and Tools

This project was built with the following technologies and tools:

  • React: The JavaScript library used for building the user interface and the components of the project. It also manages the state and the props of the project.
  • React Router: The library used for creating dynamic and user-friendly routes for the project. It also provides the links and the navigation for the project.
  • React Hooks: The feature used for adding functionality and logic to the functional components of the project. It also allows the use of custom hooks for reusing the code and the logic.
  • Material UI: The framework used for adding responsive and modern design to the project.
  • CSS modules: The technique used for adding scoped and modular CSS to the project. It also allows the use of variables, mixins, and nesting for writing cleaner and maintainable CSS code.
  • GitHub Pages: The hosting service used for deploying the project.

Key Features and Functionalities

This project replicates some of the key features and functionalities of Udemy, such as:

  • A home page with a navbar, a hero section, a courses section, and a footer
  • A course detail page with the course title, instructor, rating, price, description, curriculum, reviews, and related courses
  • A responsive and mobile-friendly design that adapts to different screen sizes and devices
  • A dynamic and user-friendly routing that changes the URL and the content based on the selected category and course
  • A hover effect that shows the course title, instructor, rating, and price when the mouse is over a course card
  • A click event that opens the course detail page when the course card is clicked
  • A search feature that allows users to search courses by name

Contributing

This project was built during my internship at bld.ai company. If you want to contribute to this project, please fork the repo and submit a pull request. You can also contact me at mahmoudabooelsooud@gmail.com for any questions or feedback.