Welcome to Meet App, a serverless, progressive web application (PWA) with React using a test-driven development (TDD) technique. The application uses the Google Calendar API to fetch upcoming events.
- Filter events by city
- Show/hide event details
- Specify number of events
- Use the app when offline
- Add an app shortcut to the home screen
- View a chart showing the number of upcoming events by city
As a user, I should be able to filter events by city So that I can easily view events happening in a specific city of my interest.
- Given user hasn’t searched for any city;
- When the user opens the app;
- Then the user should see a list of all upcoming events.
- Given the main page is open;
- When user starts typing in the city textbox;
- Then the user should see a list of cities (suggestions) that match what they’ve typed.
- Given the user was typing “Berlin” in the city textbox and the list of suggested cities is showing;
- When the user selects a city (e.g., “Berlin, Germany”) from the list;
- Then their city should be changed to that city (i.e., “Berlin, Germany”) and the user should receive a list of upcoming events in that city.
As a user, I should be able to show/hide an event's details So that I can easily toggle between viewing the event's summary and accessing its additional information.
- Given a user is viewing an event list;
- When the page loads;
- Then the event elements should be collapsed by default.
- Given a user is viewing an event list;
- When the user clicks on an event element;
- Then the event details should be expanded and displayed to the user.
- Given a user has expanded an event to see its details;
- When the user clicks on the expanded event element;
- Then the event details should be collapsed and hidden from the user.
As a user, I should be able to specify the number of events I want to see So that I can customize the display to show a desired amount of events that suits my preference and browsing needs.
- Given a user is using the event app;
- When the user doesn't specify a number of events to display;
- Then the default number of events shown should be 32.
- Given a user is using the event app;
- When the user specifies a number of events to display;
- Then the app should update and show the specified number of events to the user.
As a user, I should be able to use the app when offline So that I can access event information even without an internet connection, ensuring continuous usability and convenience.
- Given a user has previously accessed the event app with an internet connection;
- When the user has no internet connection;
- Then the app should display the cached data to the user.
- Given a user has no internet connection;
- When the user tries to change the app settings (city, time range);
- Then the app should display an error message informing the user that the changes cannot be made without an internet connection.
As a user, I should be able to view data visualization in the form of charts or graphs So that I can easily interpret and understand the distribution or trends of events, enabling better insights and decision-making.
- Given a user is viewing the event app;
- When the user requests to view a chart with the number of upcoming events in each city;
- Then the app should generate and display a chart showing the distribution of events in each city.
The Meet App leverages serverless functions, specifically AWS Lambda, to handle various backend operations. Here's how serverless functions are used in the app:
- When a user registers for an event, a serverless function is triggered to handle the registration process. The function interacts with the database and adds the user's registration details. This ensures a seamless and efficient registration experience for users.
- The app allows users to search for events based on city name. When a user performs a search, a serverless function is invoked to retrieve and filter the relevant event data from the database. The function dynamically generates the search results and returns them to the user interface, enabling efficient event discovery.
- By utilizing serverless functions, the Meet App benefits from automatic scaling based on demand. As the app experiences varying levels of user activity, the serverless functions scale dynamically, ensuring optimal performance without the need for manual provisioning or managing infrastructure. Additionally, serverless functions offer cost efficiency as they charge based on actual usage, eliminating the cost of idle resources.
- Serverless functions provide a simplified development experience for the Meet App. With serverless architecture, developers can focus on writing the business logic and functionality of the app without the need to manage servers or infrastructure. This streamlined development approach allows for faster iterations and updates to the app.
In summary, the Meet App effectively utilizes serverless functions to handle event registration, search, offline support, scalability, and cost efficiency. The use of serverless technology simplifies development and ensures a seamless user experience, making it a valuable component of the app's architecture.
- JavaScript: Programming language used for the client-side development;
- React.js: JavaScript library for building the user interface;
- React Scripts: Preconfigured scripts for efficient React application development, including hot reloading, production builds, linting, testing, and deployment.
- Recharts: Charting library for creating interactive and customizable charts in React applications.
- Enzyme: JavaScript testing utility for React that makes it easier to test React components' output.
- gh-pages: GitHub Pages deployment library for easily publishing static websites from a GitHub repository.
- googleapis: Library for accessing various Google APIs and services.
- Prettier: Code formatter for consistent and clean code styling;
- npm: Package manager for managing dependencies and running scripts;
- OAuth2: Secure authorization framework for granting limited access to user resources between websites and applications without sharing credentials;
- AWS Lambda: Serverless computing service by AWS for running code without managing servers, ensuring scalability and simplified development.
- Jest: JavaScript testing framework for unit testing and assertions.
- Cucumber: Behavior-driven development (BDD) testing framework for testing application behavior using plain-text specifications.
- Puppeteer: Node.js library for controlling headless Chrome or Chromium browsers, used for automated browser testing and web scraping.
Special thanks to my Tutor Stanley Okwii(CareerFoundry) and my Mentor Faizal Patel(CareerFoundry) for guiding me throughout the development process.
If you have any questions, comments, or feedback about this website, please feel free to reach out to me using the contact form on the website or by emailing me at rochagbriel@gmail.com.