Skip to content

This is a Online Course related MERN Stack project Wich was done by me when I am Practice React, MongoDB, Firebase, Express js, Aj a payment method I used stripe.

Notifications You must be signed in to change notification settings

rahim-uddin-jsr/acting-fable-client

Repository files navigation

Project Name: Acting Fable

**Site : Live Link

Server Site Code Link: Link

About this Project

This project was simple Learning website. In this website we focus Acting and drama Learning related Courses. In this project uses The Stripe Payment method. This project was done by me after a good practice of Express Mongo CRUD Operation.

Some Of Features of This Projects

  1. User Registration and Login System: The website provides a user-friendly registration and login system for students, instructors, and administrators. Users can create an account using their email and password, and optionally provide additional information such as name, photo, gender, phone number, and address. Social login options are also available for convenience.

  2. Responsive Navbar and Footer: The website features a consistent navigation bar and footer design across all pages, ensuring easy access to essential sections. The navbar includes the website logo/name, Home, Instructors, Classes, Dashboard, and a conditional display of the user profile picture or Login button.

  3. Homepage with Slider Section: The homepage includes an attractive slider section showcasing relevant images, text, information, and messages. This section captivates visitors and creates an engaging visual experience.

  4. Popular Classes Section: The website highlights the top 6 classes based on the number of students enrolled. It displays relevant pictures and provides a glimpse of each class, enticing users to explore further.

  5. Popular Instructors Section: The website showcases the top 6 instructors based on the number of students in their classes. Each instructor is represented with an image, name, and optionally, the number and names of the classes they teach.

  6. Extra Attractive Section: A unique and visually appealing section is added to the website, utilizing animation effects and creative design to capture the attention of visitors.

  7. Instructors Page: This page presents a comprehensive list of all the instructors associated with the summer camp school. Each instructor is displayed with their image, name, and optionally, the number and names of the classes they teach. A "See Classes" button allows users to explore the classes taught by a specific instructor.

  8. Classes Page: The Classes page showcases all the approved classes offered by the summer camp school. Each class card includes an image, name, instructor name, available seats, price, and a "Select" button. If the user is not logged in, they are prompted to log in before selecting a course. Additionally, if the available seats for a class are zero, the class card background is highlighted in red.

  9. Student Dashboard: A private dashboard accessible only to students provides a personalized space for managing selected and enrolled classes. The dashboard includes the following sections:

    • My Selected Classes: Students can view the classes they have booked, along with relevant class information. They can also delete a selected class if needed.
    • My Enrolled Classes: Students can see all the classes they have successfully enrolled in after making a payment.
  10. Payment Processing: Students can click the "Pay" button for a selected class, which redirects them to the payment page for completing the transaction. Upon successful payment, the available seats for the class are reduced by 1. The class details are then shown on the My Enrolled Classes page and removed from the My Selected Classes page. A payment history page is also available for students to track their payment records.

  11. Instructor Dashboard: An exclusive dashboard accessible only to instructors allows them to manage their classes. The instructor dashboard includes the following features:

  • Add a Class: Instructors can add a new class by filling out a form that includes the class name, image, instructor name (auto-filled based on the logged-in instructor), instructor email (auto-filled), available seats, and price. The newly created class is initially set to pending status.
  • My Classes: Instructors can view all the classes they have added, along with relevant information such as the status (pending/approved/denied), total enrolled students, and a feedback/update button. If a class is denied, the admin can provide feedback explaining the reason.
  1. Admin Dashboard: The admin dashboard is accessible only to administrators, allowing them to

In this projects use technology

  • Express Js
  • Mongodb
  • Axios
  • TanStack Query
  • React Js
  • React Router Dom
  • Tailwind Css
  • Firebase Auth
  • Daisy Ui
  • React Icon

About

This is a Online Course related MERN Stack project Wich was done by me when I am Practice React, MongoDB, Firebase, Express js, Aj a payment method I used stripe.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published