From January to March (Winter Quarter) 2025, I instructed the course INFO655: Intro to Web Programming at Drexel CCI.
This was the second iteration of a course I revamped at the college after it had not been offered for over a decade and its previous incarnation using Java in the course description. The mutual decision between me and Dr. Weimao Ke (who teaches the follow-on course, INFO670: Cross-Platform Mobile Development) was to use the React Framework due to its established community, support, documentation, etc. rather than adopting a more modern framework with the expectation that React fundamentals could be extrapolated to these others by the students in the future if interested.
As I have not written much about teaching here, I am using this waypoint to enumerate the topics we covered, the lessons learned in the second offering of the course, highlight students’ projects, and enumerate improvements I plan to make for next year’s offerings.
Topics
The 2025 edition of the course had 16 graduate students, split between two sections: 6 in the face-to-face section and 9 in an online section. All students were delivered the same material with the expectation that the face-to-face students would attend a synchronous lecture and interactive session while the online students were permitted to participate asynchronously over the 10-week period. The students came from a variety of Master’s degree-seeking programs at Drexel ranging from HCI to Robots and Automation with the largest majority coming from the Information Systems and Computer Science majors. This variety of background necessitated a web programming primer for the first week of class to (potentially re-)introduce HTML, CSS, and JavaScript and highlight React’s place in both building up and straddling these technologies with its state management and JSX-based rendering. In the following weeks we took a deeper dive into React (Week 2), learned about conditional rendering and server basics (Week 3), explored the dynamics and practice of passing props (Week 4), and learned how to write test cases for components (Week 5).
Students were given a midterm exam in Week 6 as well as a session of optimizing performance in their component hierarchies. In Week 7 we discussed deployment and in Week 8 GraphQL. For the last lecture session (Week 9) of the term, we went over Authentication and some advanced topics to prepare interested students for the follow-on course (INFO670). Throughout the term, students progressively worked on a progressively built series of assignments that had them build an audio playlist (without the need to integrate actual audio) to get hands-on experience with the technologies and approach they were learning about. Also throughout the term, students were required to give project checkins, essentially milestones, for their course project that they individually built and presented in Week 10. Online students were given the option to post their presentations to the Blackboard discussion board and other students were encouraged to give feedback to their peers’ projects with the expectation that other students could comment and their their peers’ projects as well.
Student Projects
During the first week of the term, students were required to declare the course project they hoped to build throghout the term. While they were permitted to change the project if deemed unfeasible, most students stuck with it and were able to implement new concepts as we discussed them in class. All students were required to post their code and (ideally) instructions to run their React application onto GitHub. I would like to highlight some of the projects here.
Nicole created an interface to build custom avatars, implementing the hair, eyes, mouth, etc. as reusable components.
- Source: https://github.com/ideknic/AvatarCreator
- Deployment: https://avatarcreator.surge.sh
Athmeeya created a study planner that incorporated task management, notifications, and dark mode.
- Source: https://github.com/AthmeeyaM/INFO-655-project-Study-Planner-
- Deployment: https://athmeeyam.github.io/INFO-655-project-Study-Planner-/
Vanshika built a personalized travel hub to allow users to document photos of their trip, budget expenses, and organize a packing list.
- Source: https://github.com/V-Security-beep/PERSONAL-TRAVEL_companion
- Deployment: https://v-security-beep.github.io/PERSONAL-TRAVEL_companion/
Brenda built a fitness stopwatch that allows users to track timed sessions, splits, and progress over time.
Future Improvements
The need to overhaul this course due to the usage of older technologies was felt even between the first and second offerings of this course. In December 2024, as I prepare to teach the course in January 2025, React 19 was released, which streamlined some aspects of caching (e.g., memoization can be handled by React Compiler), changed the preference of boilerplate generators (Vite over the now-deprecated create-react-app), and provided full support for custom elements everywhere.
On the other end, the 2024 edition of INFO655 had students use Jest and React’s Testing Library for the preferred testing framework whereas this proved difficult for some students in React 19 due to different preferred frameworks. This aspect, unfortunately, was not incorporated into the 2025 course due to my late realization. It will be updated in the 2026 iteration.
Additionally, students expressed in their feedback that the number of checkins required was a bit too numerous. The original basis for them was to keep students on-track and to address any difficulties they were encountering in building their project. In the future, this feedback will be incorporated with fewer checkins more evenly distributed over the term.
Conclusion
As a course of my own design, I have enjoyed getting the opportunity to polish the rough edges with two cohorts of students and know there is still much to be improved. In the future, at some point, Dr. Ke and I may move on from React as long as newer web programming paradigms can be implemented just as easily by students from diverse academic backgrounds.