Degree Planner

See this project: here

Building an Interactive Course Schedule Management Web Application

As university students navigate their academic journey, organizing and planning their course schedule plays an essential role in their success. To help students efficiently manage their courses, I built an interactive web application that allows them to visualize and organize their course schedule for each semester. In this article, I'll walk you through the process of building this full-stack application using React, React DnD, Python, and web scraping.

Extracting University Program and Course Information

While my university provides a list of courses and programs in a CSV file format on their website, I found that a lot of information I needed for the web application was not included in these files. As a result, I turned to web scraping techniques to extract additional data to supplement the provided CSV files.

To ensure that students have access to accurate and up-to-date program and course information, I utilized web scraping techniques with Python. Using the BeautifulSoup and requests libraries, I wrote a script to extract relevant data from the university's website. This data includes course descriptions, course prerequisites, credit values, and more.

The scraped data was then combined with the information from the CSV files to create a comprehensive dataset. This dataset was converted to JSON format for easy integration into the web application.

Building the Frontend with React

The frontend of the application was built using React, a powerful JavaScript library for building user interfaces. I designed an intuitive interface that allows students to drag and drop courses between different semesters, effectively managing their course schedule in a visual manner.

To implement the drag-and-drop functionality, I used the React DnD library. This library provides a high-level abstraction for drag-and-drop interactions, enabling seamless interactions between different components.

Visualizing Course Progression and Prerequisites

One of the key features of the application is the ability to visualize course progression and prerequisites. When a student moves a course to a semester column, the application checks whether the course prerequisites are met based on the courses placed in previous semesters. If a course does not meet its prerequisites, it is visually highlighted in red to alert the student.

This feature ensures that students are aware of any potential conflicts and can schedule their courses in the correct order.

Tracking Academic Progress

In addition to managing individual courses, the application also allows students to select their program of study. Upon selecting a program, the application automatically calculates the number of credits completed and displays the total credits required for graduation. This feature enables students to track their academic progress and stay on track towards graduation.

Responsive Design for Mobile and Desktop

To accommodate different screen sizes and devices, I implemented a responsive design that ensures a seamless user experience regardless of the device used. Whether students are accessing the application on their desktop computer, laptop, or mobile device, the interface adjusts to provide an optimal user experience.

Final Thoughts

Building this interactive course schedule management web application was a rewarding experience that allowed me to apply my skills in React, web scraping, and user experience design. The application serves as a valuable tool for university students, helping them effectively manage their academic journey and achieve their goals.

Whether you're a student looking to organize your courses or a developer interested in exploring React and web scraping, I hope this article provided valuable insights into the process of building a full-stack web application.