Student Grade Reporting System Frontend

Name : Gbadago Frank Mawuli

ID : 11232324

Project Overview

This project is a front-end web application for a Student Grade Reporting System. It simulates a real-world application where students can view, report, and manage their academic grades. This system addresses the issue of missing or unrecorded grades in a student's profile.

Application Structure

The application consists of 7 main pages:

• Homepage: Introduction to the system and its purpose.
• Login Page: Mock login interface for student authentication.
• Dashboard: Displays an overview of the student’s current grades and alerts for missing grades.
• Grade Report: Shows a detailed view of the student's grades filtered by semester or academic year.
• Missing Grade Form: Enables students to report missing grades.
• Instructor Contact Page: Lists instructors' contact information with a simulated email feature.
• Help and Support: Provides FAQs and a mock support contact form.

Technical Details

• Framework/Technology Used: [React]
• Responsive Design: Implemented using [CSS Flexbox/Grid, Bootstrap, Tailwind CSS].
• JavaScript Functionality: Used for form validations, dynamic content rendering, and simulating interactions.

Setup and Installation

To set up the project locally, follow these steps:

git clone https://github.com/frankmawuli/Frontend-Grading-Assignment.git
cd frankMau
npm install
npm start

This will start the application on localhost at the default port.

Usage

Describe how to use the application, highlighting key functionalities such as logging in, viewing grades, reporting missing grades, and contacting instructors.

Grading System Application

Getting Started

Logging In

• Navigate to the application's login page.
• Enter your credentials (username and password).
• Click the "Login" button.

Upon successful login, you'll be redirected to the dashboard.

Dashboard

The dashboard provides an overview of your current grades and alerts for missing grades. Key features include:

• A list of courses with respective grades.
• Alerts for any missing grades.
• Quick assessment of academic progress.

Grade Report

Access the Grade Report page to view a detailed breakdown of grades for each course. Features include:

• Semester filter for viewing grades by academic period.
• A table or list displaying courses and grades.
• Ability to track performance over different semesters.

Reporting Missing Grades

• Identify missing grades on the dashboard or grade report.
• Navigate to the specific course or grade with the issue.
• Use the reporting mechanism to notify instructors.
• Provide additional details or comments when reporting.

Contacting Instructors

• Utilize the contact feature for communication with instructors.
• Find the contact section, accessible from the dashboard or a dedicated page.
• Select the course or instructor for communication.
• Compose messages for concerns, inquiries, or clarification regarding grades.

Navigation and User Interface

• Intuitive navigation between sections.
• User-friendly interface with clear labels, buttons, and visual cues.

Security and Privacy

• Encrypted user credentials during login.
• Optional two-factor authentication for enhanced security.
• Privacy measures for protecting sensitive student data.

Help and Support

• Help or support section for issue resolution.
• FAQs, documentation, or a support ticket system.

Accessibility

• Design considerations for accessibility, ensuring inclusivity.
• Alternative text for images and keyboard navigation.

Logout

Always log out of the application when done to secure personal information.

Contribution

To contribute to this project, please follow these guidelines:

1. Fork the repository.
2. Create a new branch for your feature.
3. Commit your changes and push them to your branch.
4. Submit a pull request for review.

Please adhere to the project's coding standards and provide clear and detailed pull request descriptions.