Live Project link : SkillUP

Backend Code : SkillUP

2. Admin email: mdsakebul66@gmail.com
3. Admin password: 123!Az
4. Teacher email: teacher@gmail.com
5. Teacher password: teacher@gmail.com
6. Student email: student1@nasmis.com
7. Student password: student1@nasmis.com

Project Overview

This project involves creating an interactive online learning platform using the MERN stack. The platform facilitates seamless communication between students and teachers, offering features such as responsive design, class management, user roles, and a dynamic homepage. Students can enroll in classes, access course details, submit assignments, and provide feedback. Teachers can add classes, manage enrollments, and evaluate student progress. The admin oversees teacher requests, user management, and class approvals, ensuring a comprehensive educational experience for all users.

SkillUp Website Features

1. Responsive Design:

   • The website is designed to be responsive, ensuring a seamless experience across various devices, including desktops, tablets, and mobile phones.

2. Navbar:

   • The navbar includes a logo, website name, Home, All Classes, Teach on SkillUP, and Sign In (when not logged in) button.
   • When logged in, the user's profile picture appears on the navbar.
   • Clicking on the profile picture displays a dropdown with options like User name, Dashboard, and Logout.

3. Homepage:

   • Banner section with relevant images/carousel.
   • Partners or collaborators section with logos and brief descriptions.
   • Highlighted classes section based on popularity or recommendations.
   • Feedback section in the student dashboard displayed through a carousel.
   • Section showing total users, total classes, and total student enrollment.

4. All Classes Page:

   • Displays classes in card format with information such as title, teacher name, image, price, short description, total enrollment, and enroll button.

5. Class Details Page:

   • Private route accessible after clicking the Enroll button.
   • Shows detailed information about the class, including teacher, price, etc.
   • Includes a Pay button redirecting to the payment page.

6. Teach on SkillUP Page:

   • Private route allowing users to apply for a teaching position.
   • Form includes fields like Name, Images, Experience, Title, and Category.
   • Submit for review button saves data in the database and shows the request on the admin dashboard.

7. Student Dashboard:

   • Private route with routes to My Enroll Class and Profile.
   • My Enroll Class page displays enrolled classes in card format with details.
   • My Enroll Class Details page shows assignments for each class and allows users to submit assignments.

8. Admin Dashboard:

   • Private route with routes to Teacher Request, Users, All Classes, and Profile.
   • Teacher Request page displays requests with options to approve or reject.
   • Users page shows all users with options to make a user admin.
   • All Classes page displays all classes with options to approve, reject, and see progress.

9. My Profile:

   • Displays user information, including name, role, image, email, and phone.

10. Teacher Dashboard:

    • Private route with routes to Add Class, My Class, and Profile.
    • Add Class page allows teachers to create classes with various details.
    • My Class page displays classes added by the teacher with options to update, delete, and see details.

11. Authentication:

    • Login and Registration pages with relevant error messages.
    • Google Sign-in option on the login page.
    • Registration form includes fields like Name, Email, Password, and PhotoURL.

Technologies used in the project

• React [Used for building declarative, efficient, and component-based user interfaces in JavaScript]
• Aos [Used for animation]
• Axios [Used for making HTTP requests]
• date-fns [Used for date manipulation and formatting]
• Firebase [Used for authentication]
• react-helmet-async [used for managing and updating document head tags asynchronously in React applications]
• react-hook-form [used for managing forms in React applications with hooks and optimized performance]
• react-hot-toast [used for displaying toast notifications in React applications]
• react-icons [used for incorporating scalable and customizable icons into React applications]
• react-rating-stars-component [used for adding customizable star ratings to React applications]
• react-router-dom [used for handling routing and navigation in React applications]
• react-select [used for creating powerful and customizable dropdown/select components in React applications]
• react-spinners [used for incorporating customizable loading spinners in React applications]
• Swiper [used for building touch-enabled sliders or carousels with smooth transitions and extensive customization options]
• Tailwind CSS [a utility-first CSS framework that provides a set of utility classes for building and styling modern user interfaces]
• Stripe [a payment processing platform that offers APIs and tools for businesses and developers to accept online payments]

Website Screenshot