Student Course Selection Website
Project Overview
A comprehensive course selection platform built with React and Flask, enabling students to efficiently manage their academic schedules. My team of five developed a student course selection website with features to streamline course management. Students can search for courses, organize their timetables, and leave comments and ratings to help others make informed decisions.
Visit the website
Problem
Traditional course registration systems are often cumbersome, lack real-time updates, and provide limited information for decision-making. Students struggle with schedule conflicts and accessing comprehensive course information in one place. The existing systems often lead to:
Scheduling Conflicts
Students face difficulties in visualizing potential schedule conflicts and managing course load effectively.
Information Access
Limited access to crucial information like course reviews, prerequisites, and real-time availability makes informed decision-making challenging. A dedicated platform designed to streamline course selection would greatly benefit students by providing a more organized and efficient approach.
Goal
The goal of this platform is to provide students with a centralized, up-to-date resource for course selection and planning. By offering interactive tools like timetables and discussion boards for course reviews, the system helps students save time and make more informed decisions.
Technical Details
The application is built using a modern tech stack that ensures scalability, performance, and maintainability. The frontend utilizes React with Material-UI for a polished user interface, while the backend is powered by Flask and SQLAlchemy for robust data management.
We began by selecting a monolithic architecture, given the project's small scale and limited number of contributors. This approach avoided the complexity and overhead of a cloud-based setup. To structure the website, we followed the MVC framework, separating concerns into three key components: the user interface, request handling, and data storage.
To manage collaboration efficiently, we adopted a SCRUM agile development process, holding weekly check-ins to track progress and assign tasks. We used GitHub Project Board to organize user stories and streamline workflow.
System architecture diagram showing the interaction between frontend and backend components
Key Features
Course Management
- Advanced course search and filtering system
- Interactive drag-and-drop timetable management
User Experience
- Course rating and review system
- Responsive design for all devices
- Intuitive user interface
Results
The Course Selection Website has successfully transformed the course registration experience for students, delivering significant improvements in efficiency and user satisfaction.
When visiting the website, new users must sign in or register to ensure their course selections are saved for future visits.
After logging in, users can navigate to the Course Search page to find courses using keyword search or category filters. Results are displayed in a table, where users can add courses to their selection with a single click.
For more details, users can click on a course code to view a dedicated page with complete course information. This page also features a comments and ratings section, allowing students to share insights and aid others in decision-making.
Course search and filtering interface
Detailed course information page
Interactive timetable management
Course ratings and reviews section