Assignment12_category_022

📽️ Requirement Explanation Video 📽️

Collaborative Study Platform

🚩: 0 [ If we have any update we will mention it here ]. Do check frequently to

see if any updates have been made.

Key Rules:

●​ Include a minimum of 20 notable GitHub commits on the client side

●​ Include a minimum of 12 notable GitHub commits on the server side
●​ Add a meaningful readme.md file with the name of your website, Admin
username, password, and live site URL. Include a minimum of 10 bullet
points to feature your website.
●​ Make it responsive for all devices. You must make it responsive for mobile,
tablet, and desktop views. Make the dashboard responsive as well.
●​ After reloading the page of a private route, the user should not be
redirected to the login page.
●​ Use the Environment variable to hide the Firebase config keys and
Mongodb credentials.
●​ Don’t use any Lorem ipsum text in your website.
●​ Show sweet alert/toast/notification for all the crud operations,
successful authentication login, and sign-up. Don’t use the default
browser alert.
 ●​ Implement tanstack query in all the data fetching functionality (For GET

method only)

Objective

Assessment Introduction: Collaborative Study Platform

This assessment focuses on creating a Collaborative Study Platform that

connects students, tutors, and administrators to streamline study session
scheduling, resource sharing, and user management. By integrating these
functionalities into a single platform, we aim to enhance collaboration, improve
access to study materials, and ensure effective management of educational
activities. This project will outline the key features, design principles, and
implementation strategies necessary to develop a user-friendly and robust
platform that supports the dynamic needs of modern education.

Authentication & Authorization

1.​ User Registration:

a.​ Form for users to sign up as students, tutors, or administrators.
b.​ Input fields: name, email, photo(you can use direct link or upload
through imgbb as you want), password, and role selection (student,
tutor, admin).

Note: Don’t worry about the standardization of the project, rather implement
requirements as explained here)

2.​ User Login:

a.​ JWT-based authentication.
 b.​ Token generation upon successful login to manage sessions
securely.
c.​ Implement social login functionality using Google, and GitHub. ( For
social login by default you need to set the user role as a student)

Hints: While implementing social login, ensure the system gracefully assigns the
user role as a student.

3.​ Role-Based Access Control:

a.​ Middleware to check user roles and permissions.
b.​ Protect routes to ensure only authorized users can access certain
endpoints.

Main Tasks

HomePage:
The user can view 5 sections on the homepage, including the navbar and
footer:
1.​ Navbar
2.​ Banner Section
3.​ Study session section
4.​ Tutor Section
5.​ Footer
​
1.​ The Navbar includes a logo, website name, login button (when the user is
not logged in), and sign-up button (when the user is not logged in). If the
user is logged in, the navbar should display the user profile picture,
logout button, and dashboard button.

2.​ Create a beautiful banner section with a professional background image

relevant to this website.
Note: Do the necessary beautification of this section.

3.​ Show study session card ( 6 session cards ). Each session has a title and
description, an ongoing/closed button (if the registration time is over,
show closed, otherwise, show ongoing), and read more buttons.

Note: Show only approved sessions; don’t show pending or rejected sessions
(see points 13 and 20).

Hints: Check if the current date is greater than or equal to the registration start
date and less than or equal to the registration end date.

4.​ If the user is not logged in, the user will be redirected to the login page by
clicking the read more button. If the user is logged in, the user will be
redirected to a page where they can view the following information about
the selected session:
a.​ Session Title
b.​ Tutor name
c.​ Average rating
d.​ Session Description
e.​ Registration start date
f.​ Registration end date
g.​ Class start time
h.​ Class end date
i.​ Session duration
j.​ Registration fee (Registration fee can be free ( See points 20-b) )
k.​ Reviews of the study session provided by students ( see pints 8 )
l.​ Book now button (if the registration time is over, this button will be
replaced by a registration closed (disabled) button)
m.​ Any other necessary information relevant to this session.
​
Note: Disable the Book now button if the logged user is an admin or tutor.

Hints: filter all reviews and ratings by study session ID ( see points 8 ).
 5.​ If the registration fee is not free (registration fee is 0. 0 means it is free ) ,
by clicking the Book Now button, the user will be redirected to a payment
page. After successful payment, the session will be booked successfully.
If it is free, the session will be booked without payment.

Hints 1: Create a collection named "bookedSession" to store session info.

Hints 2: save all information about the study session including logged-in
student email, study session ID ( You will find _id from study session data. Set
this _id value as study session ID value ), and tutor email.

Hints 3: You will find the tutor email from the study session data.

6.​ Create a tutor section to show all tutors.

Student Dashboard (Private Route):

7.​ Student dashboard has the following route:

a.​ View booked session
b.​ Create note
c.​ Manage personal notes
d.​ View all study materials provided by the tutor

8.​ (View booked sessions route): Students can view his/her booked sessions.
Each session has a view detail button. By clicking this button:
a.​ Students view detailed information about the session.
b.​ Create a review section on the detailed page. Students can post a
review and rating for the study session.

Hints 1: Create a collection to store all reviews and ratings. Save reviews with a
session ID that comes from booked session data ( see points 4 and 5 ).

9.​ (Create note route): Students can create his/her notes. This page will have
a form with the following fields:
 a.​ Email readOnly ( Logged in user email )
b.​ Title
c.​ Description

Hints: Create a collection to store notes.

10.​( Manage personal notes route): Students can view all personal notes.
There will be update and delete buttons for each note to update and
delete note.

11.​( View all study materials route ): Students can access study materials
categorized by study session.

a.​ They can access only the materials of the sessions he booked.
b.​ They can see the images and link (Google Drive link )
c.​ They can download the images. Add a download button to each
image.
d.​ By clicking the link they can visit the URL (Google Drive link )

Hints 1: At first, show all booked sessions. By clicking a single session all
materials of the session should be displayed.

Hints 2: Find the materials by study session ID. You will find the session ID in the
booked session data.

Tutor Dashboard (Private Route):

12.​The tutor dashboard has the following route:

a.​ Create study session
b.​ View all study sessions created by a tutor
c.​ Upload materials
d.​ View all materials
 13.​( Create study session ) Tutor will create a session with the following
fields:
a.​ Session Title
b.​ Tutor name read-only ( Logged in user name )
c.​ Tutor email read-only ( Logged in user email)
d.​ session Description
e.​ Registration start date
f.​ Registration end date
g.​ Class start date
h.​ Class end date
i.​ Session duration
j.​ Registration fee read-only ( default 0 ) ( only admin can modify
this field, just set it to 0 )
k.​ Status ( default pending )
l.​ Any other necessary info if you need

14.​( View all study sessions route) The tutor can see his/her approved and
rejected sessions.

a.​ The tutor can send another new approval request to the admin for
rejected sessions.
b.​ After a new request is sent, the status changes from reject to
pending.

Hints: create a new study session with status ( pending )

15.​ (Upload materials route): The tutor will upload materials for his/her
approved sessions. He can upload an image and link ( Google Drive link ) as
materials. He can upload multiple materials for a single study session.
There will be a form with the following fields:
a.​ Title
b.​ Study session ID read-only ( This ID comes from the study session
data he wants to upload)
c.​ Tutor email read-only ( Logged in user email )
 d.​ Image upload
e.​ Link ( Resources material Google Drive link. For example- google
doc, google sheet )

Hints 1: Create a view link for images and save this link in the database ( You can
use ImgBB).
Hints 2: Fetch all approved sessions and add an upload material button to each
one.
Hints 3: just set an input text field to get the Google Drive link
Hints 4: Create a collection to store materials with the study session ID.

16.​(View all materials route) The tutor can view all the materials he uploaded.
He can also delete and update the materials.

Admin Dashboard (Private Route):

17.​Admin dashboard has the following route:

a.​ View all users
b.​ View all study session
c.​ View all materials

18.​(View all users) Admin views all users with the given roles.
a.​ He can update a user role

19.​(View all users) This page has a search bar. admin can search a user by
name or email. The search implementation functionality should be done in
the backend.

20.​ (View all study sessions route) Admin can view all sessions created by
the tutor ( see point 13 ).
a.​ He can approve a pending session or reject it.
b.​ If he approves, a modal popup will appear. This popup will contain
these input fields:
i.​ Is the session free or paid?
ii.​ If it is paid, he should specify the amount.
 iii.​ If it is free, just set the value to 0
c.​ After successfully rejecting, the rejected session will be removed
from the pending list.

21.​ (In “view all study sessions route” ) Show an update button and a delete
button with approved sessions. Don’t show these buttons with pending
study sessions The admin can update and delete a session by clicking
them.

22.​(View all materials route) Admin can view all materials and remove
inappropriate and outdated content.

Challenges requirements

***Implement tanstack query in all the data fetching functionality (For GET
method only) ***

1.​ Implement JWT on login (Email/Password and social) and store the token.
Make sure to store the token in local storage. Don’t use cookies

2.​ Implement pagination ( at least on 2 different pages )

3.​ Admin Dashboard:

4.​ If the admin rejects a study session, a modal popup will appear. This
popup will contain these input fields:
a.​ Rejection reason
b.​ Feedback

5.​ Tutor Dashboard:

a.​ The tutor views the rejection reason and feedback

Optional Tasks
1)​ Implement Axios interceptor.
2)​ Create a route in the admin dashboard to make an announcement.
3)​ Add a menu in the navbar to show all announcements the admin made.
This route will be public.
4)​ Add a route in the student dashboard to show all classmates for each
study session he booked.

What to Submit

1.​ Assignment variant :

2.​ Admin email:
3.​ Admin password:
4.​ Front-end Live Site Link:
5.​ Client Side Github Repository Link:
6.​ Server Side Github Repository Link: