Assignment Category: 1

Donation Website

Project Theme > In this assignment, you will build a web application for online group study with friends (Every registered user is a friend of others). Users can create assignments, complete them, and grade their friends' assignments. .

Node Package:

1. fontawesome
2. animate.css
3. firebase"
4. react date picker
5. react-awesome-slider
6. react-dom
7. react-hot-toast
8. react-icons
9. react-router-dom
10. react-toastify
11. react-flicking

Main Requirements

1.Layout Structure

Navbar: Website Name/Logo: Should reflect the theme Assignments Conditional Login/Logout: If not logged in, show a Login button. If logged in, show the user's profile picture and Logout button. On hovering over the profile picture, show the user’s display name. Pending Assignments (Private/Protected Route): Will show while user will be logged in Profile Picture (Dropdown): Create Assignments (Private/Protected Route) My Attempted Assignments (Private/Protected Route)

Footer: The design of the Footer is also flexible. You have to show Contact information, social media links, and a copyright notice with your own design.

2.Home

Home page(public)

Banner section - Design it based on the project theme

Feature section - showcase few features of this application

Faq - will have some frequently asked questions about your application features and uses

3. Create assignment page(private page)

Assignment creation Functionalities: Any logged in user is able to create an assignment for all users. An assignment will have a title, description, marks, thumbnail Image URL, assignment difficulty level(easy, medium, hard) [YOU MUST USE DROPDOWN/SELECT INPUT FIELD], and due date [use this package for selecting date “react-datepicker”] [Optional]: No need to keep user data with the assignment data who is creating the assignment. But if you want to make an update assignment feature like, only the user can update an assignment if he/she is the creator of the assignment. Then you can keep user info(email, name) with assignment data. See update assignment section below. A success message will be shown when the assignment will be created successfully.

4. Assignments page(public page):

will have all the assignments created by any user using “create assignment” form. Every individual assignment will have a thumbnail, title, marks, assignment difficulty level and a delete, update, and view assignment button. It's up to you how you will display the cards of the assignment Delete button functionality Only the user is able to delete an assignment who has created the assignment. A user is not able to delete assignments which are created by other users. Show a confirmation modal to confirm the delete action while pressing the delete button. Hint: While a user will create an assignment you have to store the user email with the assignment data [followed Assignment creation requirement]. And then while a user will be trying to delete an assignment you will compare the current user email with the assignment creator email. And if it matches then the assignment will be deleted. A successful message will be shown when the assignment will be deleted successfully. An error message will be shown when a user tries to delete an assignment which is not created by himself.

6. Authentication System

On Clicking the Login Button / browsing any private Route user will be redirected to this route. User Login User will show a Login page with a form, so that the user can Log in this application. Show a Title for Login. & Form with the following fields ( Email, Password, Forget Password, Login button )

If the user logs in successfully then navigate him to his desired Route / Home page. If not, show him an error with a toast/error message anywhere in the form.

There will be some other options like Show the user a Link for Register so that he can go to the register page. Show users a Social Login Button ( Google only ) . on Clicking it user authenticates with Google Navigate him to his desired Route / Home page.

User Registration Create a register page with a form, so that the user can register himself in this application. Show a Title for registration and a Form with the following fields ( Name, Email, Photo-URL, Password & Register Button )

If the user registers successfully then navigate him to his Home page. If not, show him an error with a toast/error message anywhere in the form.

Implement password validation For password validation you need to follow the below criteria. Show a password error in the form, and don't Register for an invalid password Must have an Uppercase letter in the password Must have a Lowercase letter in the password
Length must be at least 6 character

There will be some other options like Show the user a Link for Login so that he can go to the Login page. Show users a Social Login Button ( Google only ) . on Clicking it user authenticates with Google Navigate the user to the Home page.

💡Don’t implement email verification method as it will inconvenience the examiner. If you want, you can add these after receiving the assignment result.

⚠️ Logged in User must not redirect to Login on reloading any private route

7. My Submitted/attempted assignment page(private page)

will have all assignments which are submitted by the specific user. For example, if you logged in you will only see your submitted assignment on the My Assignment page. Show data in a table or grid as your likings. You can see the assignment title, assignment status, assignment marks, your obtained marks, and feedback(if you got the marks)

404 Page: If user wants to visit invalid routes Show user a Not Found Page with a button so that user can go back to home route

Challenges

1. Validation
2. Add filter assignments functionality based on assignment difficulty level and search assignment feature in Assignments Page. Filter and search features should be implemented with mongodb and backend API. [Hint: While you are posting an assignment there is a difficulty level field. So make a similar dropdown/filter button here. While users will select any level (easy, medium, hard) just find assignments from the database based on the difficulty level]
3. Theme Customization Add a Theme Toggling Button for changing themes from light to dark / dark to light. By changing the theme, it will make the full system dark / light based on user interaction.