Code Monkey home page Code Monkey logo

meet's Introduction

Meet App - Documentation

The Meet App is a single-page, responsive web application that allows users to search for a city and get a list of events for Full-Stack Developers hosted in that city. The application is designed to provide users with an easy way to discover upcoming events and stay informed about events they are interested in attending. You can access the app here.

Technologies Used

The Meet App is made with the following technologies:

  • Frontend: JavaScript, React, Create-React-App (CRA), CSS, JestCucumber, Puppeter, Atatus, Lighthouse, Recharts
  • Backend: Node.js, Express, AWS Lambda functions (FaaS)
  • Database: Google Calendar API

Features, User Stories, and BDD Scenarios

Feature 1: Filter Events by City
As a user, I should be able to filter events by city, so that I can see the list of events that take place in that city.

Scenario 1:
When the user hasn't searched for a city, show upcoming events from all cities.

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

Scenario 2:
User should see a list of suggestions when they search for a city.

Given the main page is open
When the user starts typing in the city textbox
Then the user should see a list of cities (suggestions) that match what they've typed

Scenario 3:
User can select a city from the suggested list.

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

Feature 2:
Show/Hide an Event's Details
As a user, I should be able to see/hide event details so that I can better navigate throughout the various events and get information on the ones I want to know more about.

Scenario 1:
Events are displayed in a condensed format by default

Given that the user initiates a search for events occurring in their local area
When the resulting events are displayed
Then these events are presented in a collapsed format by default

Scenario 2:
The user can unfold an event to view its full details

Given the event search results for a specific area
When the user selects "show details" for a specific event
Then the selected event's details will be fully displayed, spanning the entirety of the page

Scenario 3:
The user can fold an event to conceal its details

Given that the user is viewing the expanded details of a specific event
When the user selects the "hide details" button
Then the expanded event details will be collapsed, returning the display to the original, condensed event format

Feature 3: Specify Number of Events
As a user, I should be able to specify the number of events loaded on the page to facilitate smoother navigation within the app.

Scenario 1:
When the user hasn't specified a number, 32 is the default number

Given that the events are prepared for display on the page
When the user doesn't specify the desired number of events to view
Then the app will automatically load 32 events

Scenario 2:
User can change the number of events they want to see

Given that the user initiates a search for local events
When the user initiates the event loading process
Then the user will have the opportunity to specify the quantity of events they wish to have displayed

Feature 4:
Use the App When Offline
As a user, I should be able to use the app even while offline, ensuring I stay informed about the events I was viewing while I was online.

Scenario 1:
Show cached data when there's no internet connection.

Given the situation where an internet connection is not present
Then the user is navigating the app
Then the app will display the cached data

Scenario 2:
Show an error when the user changes the settings (city, time range)

Given the situation where an internet connection is not available
When the user attempts to modify their search parameters (based on city or event date/time)
Then the app will display an error message, notifying the user that this action is not possible due to the lack of an internet connection

Feature 5: Data Visualization
As a user, I should be able to visualize data from the app so that I can understand the amount of upcoming events occurring in a particular city and be able to filter by event type.

Scenario 1:
Show a chart with the number of upcoming events in each city

Given that the app is loaded
When the user views the event listings
Then the app will display a chart that indicates the quantity of upcoming events in each city, categorized by topic.

Backend - Serverless Functions

The Meet App utilizes serverless functions written in Node.js and Express. These serverless functions are hosted on AWS Lambda and are responsible for handling the backend logic. They communicate with the Google Calendar API to fetch event data based on user requests. The use of serverless functions ensures scalability, cost optimization, and streamlined development for a smooth user experience.

Frontend and Backend (DataBase)

The frontend of the Meet App is written with JavaScript and React, using the Create-React-App (CRA) framework. The frontend is responsible for displaying the user interface and interacting with the user.

The backend of the Meet App is written with Node.js and Express, hosting serverless functions on AWS Lambda. The backend communicates with the Google Calendar API to fetch event data.

Conclusion

The Meet App provides users with a seamless experience in discovering upcoming events for Full-Stack Developers in various cities. With features like city-based event filtering, event details display, specifying the number of events, offline app usage, and data visualization, the Meet App offers a comprehensive solution for staying informed about exciting tech events.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.