SkillKits

A Real-world classroom application for a better interaction between students and teachers.

🔗 Live Demo

The website is Hosted Here

---

Main Features

Landing Page

The landing page gives us a brief introduction about this app. Anyone can Signup if its a new user or login if its an old one. The syling of all the pages inside the app is done using "styled-components". AOS library (animate on scroll) is used to animate the content while scrolling!

Authentication

The Student/Faculty is required to provide his email, username and password for signup.

Top Navbar

Once you are logged in, the top navbar will contain the button to join a class and a button to log out.

Dashboard

All the logged in users are directed to the dashboard page where there will be the list of subjects the student/faculty is a part of.Clicking on any of the componenet would redirect them to the subject screen.

Subject Screen

This screen consists of the subject Data. The assignments,notifications related to the subject.

Submit Assignment

When a student wants to submit a assignment, he/she can click on the assignment component and it will redirect them to another screen, where they can paste the google drive link of the assignment.

Schedule and Assignments Deadline

In the dashboard screen, there is a button called calendar, when clicked will display the schedule/assignments which are to be completed by the student with the deadline.

Submissions Screen

This is for the faculty members who wants to see the assignments submitted by the students.They can grade them here itself, and the marks will be notified to that particular student.

Join Class

When a student clicks on the join class button in the dashboard, a dialog is opened asking for the necessary subject code, when clicked correctly will add the student to the subject.

Create Class

This is a faculty operation which helps him create a class, when clicked on the create class button, a dialog is opened asking for name of the subject.When entered, it will create a subject and it will contain the subject code which can be used by the students to join the subject.

---

Tech Stack and Concepts used:

• Frontend: Reactjs, Javascript, MaterialUI, HTML, CSS, Styled-components
• Backend: Nodejs, Expressjs
• Databse: MongoDB
• Deployment: Heroku, Netlify
• Tools: Git

---

Setting Up the Project 🔧

Clone the repo

git clone https://github.com/Zeph-T/SkillKits.git

*Frontend

1. change the directory to Frontend

   cd Frontend
   

2. Install NPM packages

   npm install

3. Create a .env file and add values accordingly.

4. Run the server (Note : Make sure you start the Backend server before the Frontend server to avoid unnecessary errors.)

   npm start 
   

• Backend

1. change the directory to Backend

   cd Frontend
   

2. Install NPM packages

   npm install

3. Create a .env file and add values accordingly.

4. Run the server

   npm start