Coffee Hour

Summary

A mock of a coffee shop website where users can order coffees online I created as part of an assignment from my campus unit, ARC.

P.S. The database is no longer functional (R.I.P. Heroku) so the website practically doesn't have a back-end anymore. This leads to core functionality, such as seeing the menu, adding them to cart, and checking out not functioning anymore. 😔

Developer Diaries

This project was a great leap forward for me because it gives me a very short introduction but an introduction to how real website are built by a team. It was the largest project I did in terms of scope at the time and it was my first time working in a team, and so there were a lot that I learned from it.

Introduction to Teamwork

I didn't create this project alone. This was created by a team of 4 with me solely responsible for making the front-end. It was notable because of two things :

1. This was my first time making a non-trivial website with other people in a team (I work alone in all of my previous projects).

2. As a front-end developer I had to communicate in two directions. To the UI/UX designer and to the back-end developer.

I didn't have to communicate too much since the website was not that complex (it was relatively straightforward). But it's an intro to teamwork nonetheless.

Deeper Into Front-End

Looking at it now, the project wasn't too complex. But at the time, I never built something like this before. The site has half a dozen pages that are more complex than anything I've ever made. In terms of front-front-end I had to learn about many more CSS concept such as CSS grids (which I had never used before). Back-front-end wasn't too complex logic-wise but I had to learn about client-side routing using React Router and this :

Synchronizing Back-End and Front-End

My two Info Film projects had to make a GET request to an API, so I wasn't new to connecting front-end to back-end. But this was on a whole another level because there's a state that lives in the database (such as the user's cart) that has to be synchronized with the front-end. Luckily, one of my teammate suggested for me to use React Query, which makes doing so a breeze. To this day I still uses it (it's named Tanstack Query now) any time I need to have a front-end that is synchronized with the state at the back-end.

Too Complex for Github Pages

I don't remember exactly why, but it seems that Github Pages wasn't able to pick-up on the client-side routing that was executed using React Router (at least at the time that this project was originally deployed) and so all of the client-side routes only lead to 404 error by the Github Pages. To circumvent this, a 404.html was created to basically prevent Github Pages giving a 404 error, which results in the client-side routing working. This project leads me to finally realize the limitation of Github Pages and so I started to look into other more complicated, but free, services such as Vercel and Netlify.