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.
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.
- 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.
To set up the project locally, follow these steps:
git clone https://github.com/your-github-username/DCIT_205_ASSIGNGMENT1.git
cd repo-name
npm install
npm startThis will start the application on localhost at the default port.
User Flow: Landing Page:
Upon visiting the site, users are greeted with an overview of the system. Navigation links are provided to guide users to different sections. Login Page:
Users access the system by entering their Student ID and PIN. The secure login form validates user credentials. Dashboard:
After successful login, users land on the dashboard. The dashboard provides an overview of the student's current grades. Alerts or notifications highlight any missing grades. Grade Report Page:
Users can navigate to the Grade Report page to view detailed information on all courses and respective grades. Options to filter grades by semester/academic year are available. Missing Grade Form Page:
If a student identifies a missing grade, they can visit the Missing Grade Form page. The form includes fields for Course name, Instructor name, Expected grade, and an Explanation field. Users submit the form to report the missing grade. Instructor Contact Page:
The system provides a list of instructors with contact details. Users have the option to send a simulated email to the instructor (mock-up). Help and Support Page:
An FAQ section provides guidance on grade reporting. A contact form for technical support (mock-up) is available. Navigation: A navbar/sidebar is present for easy navigation. A footer provides additional information and copyright details. Key Functionalities: Responsive Design:
The website is designed to be responsive, ensuring a seamless experience on various devices. Secure Login:
Users access the system with a secure login form using Student ID and PIN. Dashboard:
Users can view an overview of their current grades on the dashboard. Alerts notify users of any missing grades. Grade Report:
Detailed information on all courses and respective grades is available. Filtering options provide flexibility to view grades based on semester/academic year. Missing Grade Reporting:
Users can report missing grades using a form with necessary details. A confirmation message assures users of successful submission. Instructor Contact:
Users can find a list of instructors with contact details. Simulated email functionality allows users to communicate with instructors. Help and Support:
An FAQ section guides users on grade reporting. A contact form (mock-up) is available for technical support. This user flow and key functionalities ensure a comprehensive and user-friendly experience for students interacting with the Missing Grade Reporting System.
To contribute to this project, please follow these guidelines:
- Fork the repository.
- Create a new branch for your feature.
- Commit your changes and push them to your branch.
- Submit a pull request for review.
Please adhere to the project's coding standards and provide clear and detailed pull request descriptions.