Meet App Case Study
Overview
This project was a serverless, progressive web app or PWA with React using a test-driven development approach. The app uses the Google Calendar API to fetch upcoming events and then allows the user to sort/search by city and see information specific to each event.
Purpose and Context
This project was one I worked on as part of my Career Foundry course in Full-Stack Web Development.
Objective
The main intent of the project was to expand on my knowledge in two concepts: Serverless and PWAs. They’ve both been growing in popularity and are considered the future of web development, thus making the project an important one to add to my skillset. Serverless is beneficial in that it requires no backend maintenance, is easy to scale, and is always available, while PWAs offer instant loading, offline support, push notifications, “add to home screen” prompts, and cross-platform compatibility.
Duration
This particular project took me about two months, as my time was half dedicated to this project, and half dedicated to polishing another project at the same time.
Credits
My role was the lead developer on this project with the aid of my CareerFoundry Tutor and Mentor.
Tools, Skills, Methodologies
The project was built using React and makes use of Google Calendar API/OAuth2 authentication, AWS lambda, & data visualization. It was developed using a test-driven development approach with the use of Jest/Puppeteer.
Project Process
First, I set up access to the Google Calendar API by the means of 3 serverless functions, allowing me to later fetch the coding events
hosted around the world and display them accordingly within my app.
I then proceeded to build out the main functionality of the app such as filtering events by city, showing/hiding event details, & specifying (and rendering the specified) number of events. Throughout this process I employed unit testing with Jest to ensure my individual app components functioned independently as well as integration testing to ensure all the components of my app functioned properly in conjunction with one another. At times, this was a frustrating step as I would feel my test cases should all pass, only to find that one (or more) were failing, but more often than not this issue was simply a case of misnaming parts of my test cases.
At this stage, I wrote the code to produce three different error messages when certain actions triggered them. One triggering when the user sets the events to render to a number outside of 1-32, one for when user is searching for a city with no events, and one to display when the user is offline. I then set up my service worker and web app manifest to convert my app to a full PWA with the capability of being installed on both computers as well as mobile devices.
And lastly rounded out the project with some data visualization via the Recharts library, with a pie chart breaking down the percentage of topics of discussion for events and a line chart showing the numbers of events per city.
Challenges
My main challenge for this project was learning how to write tests per TDD properly. Although the tests are written in JavaScript, they do have their own flavor of syntax that initially tripped me up a bit, especially when changing components of my "feature" files & not immediately recognizing the changes that needed to be made within my tests. Between reading Jest documentation, & sharing some of my issues with the CareerFoundry student community I was able to get a better grasp of this though and completed my project.
Conclusion
This project threw a lot of new knowledge my way between working with serverless functions & understanding and creating PWAs, as well as gave me more hands-on experience with React. While I did hit some bumps in the road building out the different components of this app, learning about and making use of test cases ultimately helped bring the project to life.