I Made a Full Stack Web Application - Classrooms

I made a full stack multi-user web app Classroom using MERN stack, where principal (admin) can register new users that is teachers and students, then each user and student can login with their email and password, Each type of user has different scope of functionality

Project Video Demonstration

Deployed Link = https://classroom-frontend-klx8.onrender.com

Github repository = https://github.com/ameysanyal/classroom

Functionality of the Web App

Principal (Admin) Dashboard:

1. Can register new users (teachers and students)

2. Can create classroom and assign teacher to classroom

3. Can allot classroom to student

4. See the list of Teachers and Students in table form

5. Can change the detail of Student, Teacher and Classroom and delete them as well

Teacher Dashboard:

1. A teacher can be assigned to a single classroom only.

2. See the list of Students in their classroom in table form.

3. Teacher can see their assigned class details

4. Teacher can change the detail of Student or delete them as well

Student Dashboard:

1. Student can see other students in their classroom (classmates)

2. Student can see their allotted class details

Tech Stack Used

ReactJS, Nodejs, Tailwind CSS, Express, MongoDb and Deployed on Render

Packages Used in the application

On Frontend:

1) React Router DOM : react-router-dom package is a set of components that can be used to handle routing in a React application. Routing is the process of navigating between different parts of an application based on the URL.

2) Axios - https://www.knowledgehut.com/blog/web-development/axios-in-react#performing-post-request-with-axios%C2%A0

: Axios is a javascript library for making HTTP requests. It is used to communicate with the backend. it uses the promise-based approach to handle asynchronous operations.

3) React Icons - https://www.freecodecamp.org/news/how-to-use-react-icons/

: React icons is a library that helps you add icons (from all different icon libraries) to your React apps. it works with a bunch of different icon libraries like Font Awesome, Material UI, Bootstrap icons, and many others.

4) notistack : NotiStack is a notification library for React applications. It provides a simple way to display notifications (also known as toasts) to users in response to certain events or actions in the application.

5) React Time picker: React time picker is often preferable than input type="time" when you need more control over the appearance, functionality, and user experience of time selection in your application

On Backend:

1) express - expressjs is a backend web application framework for nodejs, it provides a set of features for building web applications and APIs. It simplifies routing, middleware usage, and handling of static files, errors, and templates.

2) mongoose - Mongoose is a JavaScript Object Data Modeling (ODM) library for MongoDB. It provides a schema-based solution for modeling application data, and includes built-in features like type casting, validation, query building, and business logic hooks.

Mongoose simplifies MongoDB operations in Node.js applications by providing a higher level of abstraction and useful features for data modeling and interaction

3) cors - CORS package simplifies handling of cross-origin requests in Express.js applications by providing middleware that manages CORS-related headers, ensuring secure communication between clients and servers.

4) dotenv - Loads environment variables from a .env file into process.env, which enables secure configuration management.

5) bcryptjs: It Provides hashing and salting of passwords for secure storage, commonly used in authentication systems.

6) jsonwebtoken: Generates and verifies JSON Web Tokens (JWTs) for secure authentication and authorization in web applications.