#StayHomeForSG

#StayHomeForSG is a fullstack project I built for a client aimed at raising awareness of the COVID-19 situation in Singapore. It aggregates health data from various sources and presents the user with some informative quizzes. Working together with a UI/UX designer who created the designs, I coded the frontend in React (NextJS) and backend in python Flask which scrapes data from various websites using the BeautifulSoup4 library. The scraped data is cached and rescraped on a daily basis so the data displayed is only accurate to the day (which is sufficient for our purposes). You can check it out here!

My thoughts

It was rather fun to design and implement a reusable quiz card component in React that could support two separate quizzes, each with their own quirks (e.g. break screens) but sharing fundamentally similar logic (e.g. deterministic finite state machine).

Some other challenging and interesting (sometimes frustrating) problems I encountered include:

• Calculating the offset and timing the auto-scroll when cards are opened on mobile.
• Synchronizing the points on the number-of-cases vs time graph under “Impact of Measures” to their corresponding measure so that when the point is tapped, the card will open (if closed) and the inner timeline div will auto-scroll to the corresponding measure (e.g. work-from-home the default). Conversely, if a measure is selected, the corresponding point on the graph will be highlighted.
• An endpoint that will “screenshot” and render the score the user has achieved on a quiz to populate the og:image tag with the score for more impactful social media sharing / integration.
• CSS alignment and breakpoint issues, lol.

For deployment, I containerized all the services (NextJS, Flask, and nginx) into docker images to be deployed by docker-compose with ease. I used the React framework, NextJS (basically React with server-side rendering) for better search engine optimization and performance such as quicker first meaningful paint.