Skip to content

README.md

Latest commit

 

History

History
135 lines (108 loc) · 5.56 KB

README.md

File metadata and controls

135 lines (108 loc) · 5.56 KB

Student Grading System

A full-stack MERN application designed to modernize and streamline the academic grading process for educational institutions. This platform provides distinct, role-based dashboards and functionalities for Students, Teachers, and Admins.

The application is built with a fully responsive user interface using Material-UI and features a secure backend API, bringing efficiency and clarity to grade management.

Live Demo: https://student-grading-system-frontend.vercel.app/

Features

👩‍🎓 Student Portal

  • View Grades: Students can log in to view a clean, organized list of their grades for all enrolled courses, presented as cards on mobile and a table on desktop.
  • Secure Access: Each student is restricted to viewing only their own grades.

👨‍🏫 Teacher Portal

  • Course Overview: Teachers can view a list of all courses they are assigned to in a responsive card layout.
  • Grade Management:
    • Add Grades: Teachers can add new grades for any student enrolled in their courses via a simple modal form.
    • View Course Grades: Teachers can navigate to a detailed page to view a complete table of all grades for a specific course they teach.
  • Enroll Students: Teachers have the ability to enroll students into their courses.

👮‍♂️ Admin Portal

  • Full User Management (CRUD):
    • Create: Admins can create new user accounts (students, teachers, or other admins) through a modal form.
    • Read & Filter: Admins can view a responsive table of all users in the system and filter the list by role (student, teacher, admin).
    • Update: Admins can edit any user's details, including their name, email, and role.
    • Delete: Admins can delete any user from the system with a confirmation step.
  • Full Course Management (CRUD):
    • Create: Admins can create new courses and assign them to any teacher from a dropdown list.
    • Read & Filter: Admins can view a responsive list of all courses and filter them by teacher or semester.
    • Update: Admins can edit any course's details, including its name, description, and assigned teacher.
    • Delete: Admins can delete any course from the system with confirmation.
  • Student Enrollment: Admins can access an enrollment page for any course to add or manage enrolled students.

✨ General UI/UX Features

  • Fully Responsive Design: The entire application, from the landing page to the dashboards, is optimized for all screen sizes.
  • Dynamic Theming: Users can instantly switch between a light and dark theme with smooth transitions.
  • Modern Animations: The UI is enhanced with animations for page transitions, text effects, and interactive elements, powered by Framer Motion and GSAP.

Tech Stack

Frontend

  • Framework: React (Vite)
  • UI Library: Material-UI (MUI)
  • Routing: React Router
  • State Management: React Context API
  • API Client: Axios
  • Animations: Framer Motion, GSAP

Backend

  • Framework: Node.js, Express.js
  • Database: MongoDB (with Mongoose)
  • Authentication: JSON Web Tokens (JWT)
  • Password Hashing: bcrypt.js

Deployment

  • Platform: Vercel

Getting Started

To get a local copy up and running, follow these steps.

Prerequisites

  • Node.js (v18 or later recommended)
  • npm (comes with Node.js)
  • A MongoDB Atlas account (free tier available) or a local MongoDB installation

Installation & Setup

  1. Clone the Repository

    git clone [https://your-github-repository-url.git](https://your-github-repository-url.git)
cd student-grading-system

  2. Setup the Backend

    • Navigate into the backend directory: 
      cd backend
    • Install the necessary NPM packages: 
      npm install
    • Create a .env file in the backend directory. Copy the contents of .env.example (if provided) or create it manually with the following variables: 
      MONGO_URI=your_mongodb_atlas_connection_string
JWT_SECRET=your_super_secret_key_for_jwt_signing
PORT=5000
      Replace your_mongodb_atlas_connection_string with your actual connection string from MongoDB Atlas, ensuring you replace <password> with your database user's password. Replace your_super_secret_key_for_jwt_signing with a long, random, secure string.

  3. Setup the Frontend

    • Navigate into the frontend directory: 
      cd ../frontend
    • Install the necessary NPM packages: 
      npm install
    • Create a .env file in the frontend directory with the following variable: 
      VITE_API_URL=http://localhost:5000
      (This tells the frontend where to find the backend API during local development.)

Running the Application Locally

  1. Start the Backend Server

    • Open a terminal in the backend directory.
    • Run the command: 
      node server.js
    • You should see output indicating the server is running on port 5000 and connected to MongoDB.

  2. Start the Frontend Development Server

    • Open a separate terminal in the frontend directory.
    • Run the command: 
      npm run dev
    • Open your web browser and navigate to the local URL provided (usually http://localhost:5173).

You should now be able to interact with the application locally.