Developing a Web App to Fetch & Display Upcoming Events
Website
Overview
The goal of this project is to develop a serverless, progressive web application (PWA) using React and a test-driven development (TDD) approach. The app integrates with the Google Calendar API to fetch and display upcoming events seamlessly.
Key features include a responsive design for accessibility across devices and offline functionality, enabling use without an internet connection. TDD ensures high-quality, reliable code through continuous testing during development. This project leverages modern web technologies and best practices to create an efficient, user-friendly event management tool.
Role
Platform
Duration
Technology
Tools
Developer
Desktop
2,5 months
React, Axios, AWS, O-Auth, Jest -Cucumber, Puppeteer, Recharts
VS Code
#Steps
Developing Process
The development of Meet-App followed a Test-Driven Development (TDD) approach, starting with defining core features like filtering events by city, showing/hiding event details, specifying the number of events, and offline accessibility. Using React for the frontend, I integrated the Google Calendar API via Axios to fetch events. I implemented state management to manage event data and conditional rendering for event details. For data visualization, I used Recharts to display event statistics in a chart view. The app supports offline functionality through service workers, showing cached data when there’s no internet connection. Testing was done using Jest for unit tests, Cucumber for acceptance tests, and Puppeteer for end-to-end tests. The app was deployed using AWS Lambda for the serverless backend, ensuring smooth deployment and scalability.
#Steps
Next
Improving the app's UX/UI, adding new features like sharing events with others, and implementing user authentication so users can save and manage their favorite events.
Host the app on platforms like Netlify or AWS for public access, and conduct user testing.
Allow users to create and manage their events within the app.
#Learning
Takeaways
I’ve learned how to develop a PWA that works seamlessly across devices and offers offline functionality.
I also learned to write test cases before coding to ensure reliable and robust features, realizing the importance of continuous testing for efficient debugging and refactoring.
I gained experience fetching, parsing, and displaying data using the Google Calendar API. Additionally,
I deepened my knowledge of serverless app design, reduced dependency on traditional backends, and improved my understanding of cloud-based services for better scalability and cost-efficiency.
