Taken in Winter 2023 at the University of Michigan, taught by John Kloosterman.
EECS 485 at The University of Michigan
This course teaches the fundamentals of web development in a five project sequence, starting with a static site generated with Jinja HTML templates, and finishing with the creation of a search engine using the MapReduce algorithm implemented in the previous project.
The course uses common tools used in the industry such as SQLite, Jinja, Flask, and React. After completing the static site, we implemented server-side dynamic webpages and client-side dynamic webpages for our second and third projects respectively.
Server-Side Dynamic Pages
The first three projects are designed around implementing an Instagram clone in three different ways: a static clone using Jinja2 templates, a server-side dynamic clone using Flask, and finally a client-side dynamic clone using Flask and React.
We started our server-side clone by creating a basic script to create the database that will make up the content of our website.
After our data was finished, our main focus became implementing various GET and POST requests that clients would send when using the app.
With GET requests, we were mainly fetching data from our database to display to the user by using SQLite to access our data and render it to the HTML template using Flask.
POST requests were trickier to implement because we had to use information sent by the user to change our database--such as a user commenting on a post or liking a post.
Accessing information sent by the users was one of the more difficult aspects of this project, especially early on.
Client-Side Dynamic Pages
Much of the Client-Side code used much of the code from Server-Side pages as a foundation. We started our client-side clone by implementing a basic REST API using Python and Flask for handling all of the GET and POST requests our application would make. The main functionality we implemented in this project was real-time updates to the number of likes and comments on a given page, as well as a feed that would update infinitely as the user scrolled. Another feature we implemented was a post being updated with another like when the user double tapped or clicked on a post.