Skip to content

README.md

Latest commit

 

History

History
160 lines (118 loc) · 5.52 KB

README.md

File metadata and controls

160 lines (118 loc) · 5.52 KB

🤝 MeetLink - The App for Meetups and Events

Live Demo

🌐 Live Demo

Try out MeetLink here: https://ibxibx.github.io/meetlink/

📝 Description

MeetLink is a serverless, progressive web application (PWA) built with React using a test-driven development (TDD) approach. The app uses the Google Calendar API to fetch upcoming events for a specific city, allowing users to view and interact with event details.

🌟 Key Features

  1. 🏙️ Filter events by city
  2. 📋 Show/hide event details
  3. 🔢 Specify number of events
  4. 🔌 Use the app when offline
  5. 📱 Add an app shortcut to the home screen
  6. 📊 Display charts visualizing event details

🛠️ Technologies Used

  • ⚛️ React
  • 📅 Google Calendar API
  • ☁️ AWS Lambda (for serverless functions)
  • 📃 GitHub Pages (for hosting)
  • 🧪 Jest (for testing)
  • 📈 Recharts (for data visualization)

🏗️ Architecture

MeetLink Architecture Diagram

This diagram illustrates the serverless architecture of the MeetLink app:

  1. 💻 User's Device: Where users interact with the MeetLink React App (PWA).
  2. ⚛️ MeetLink React App: The frontend of our application, including:
    • 🔄 Service Worker: Enables offline functionality and faster loading.
    • 💾 Local Storage: For caching data and enabling offline use.
  3. 🌐 Amazon API Gateway: Acts as the entry point for API calls from the app to Lambda functions.
  4. ⚡ AWS Lambda Functions: Serverless functions handling various operations:
    • 🔐 Authentication Function: Manages user authentication.
    • 📥 Event Retrieval Function: Fetches events from Google Calendar API.
    • ⚙️ Data Processing Function: Processes and filters event data.
  5. 📅 Google Calendar API: The external service our app interacts with to get event data.

📖 User Stories and Scenarios

🏙️ Feature 1: Filter Events by City

User Story: 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.

Scenarios:

  1. When user hasn't searched for a city, show upcoming events from all cities
  2. User should see a list of suggestions when they search for a city
  3. User can select a city from the suggested list

📋 Feature 2: Show/Hide Event Details

User Story: As a user, I should be able to expand and collapse event details so that I can see more or less information as needed.

Scenarios:

  1. An event element is collapsed by default
  2. User can expand an event to see its details
  3. User can collapse an event to hide its details

🔢 Feature 3: Specify Number of Events

User Story: As a user, I should be able to change the number of events displayed so that I can see more or fewer events at once.

Scenarios:

  1. When user hasn't specified a number, 30 is the default number
  2. User can change the number of events they want to see

🔌 Feature 4: Use the App When Offline

User Story: As a user, I should be able to access the app's content offline so that I can view event information without an internet connection.

Scenarios:

  1. Show cached data when there's no internet connection
  2. Show error when user changes the settings (city, time range)

📱 Feature 5: Add an App Shortcut to the Home Screen

User Story: As a user, I should be able to add a shortcut to the app on my device's home screen so that I can access it more quickly and easily.

Scenarios:

  1. User can install the meet app as a shortcut on their device home screen

📊 Feature 6: Display Charts Visualizing Event Details

User Story: As a user, I should be able to view charts with event details so that I can get a visual representation of the event data.

Scenarios:

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

⚙️ Technical Requirements

  • ⚛️ React application
  • 🧪 Built using the TDD technique
  • 🔑 Use of Google Calendar API and OAuth2 authentication flow
  • ☁️ Use of serverless functions (AWS lambda) for the authorization server
  • 📃 Hosted on GitHub Pages
  • 📱 Responsive design (works on mobile and desktop devices)
  • ✅ Passes Lighthouse's PWA checklist
  • 🔌 Works offline or with slow network connections using a service worker
  • 🎯 Implements an alert system using an OOP approach
  • 📊 Makes use of data visualization (recharts library)
  • 🧪 Covered by tests with a coverage rate >= 90%
  • 📈 Monitored using an online performance monitoring tool

🚀 Setup Instructions

📋 Prerequisites

  • Node.js (v14 or higher)
  • npm or yarn
  • Google Calendar API credentials

🔧 Installation

  1. Clone the repository:
git clone https://github.com/ibxibx/meetlink.git
cd meetlink
  1. Install dependencies:
npm install
  1. Create a .env file in the root directory and add your Google Calendar API credentials:
REACT_APP_GOOGLE_API_KEY=your_api_key
REACT_APP_GOOGLE_CLIENT_ID=your_client_id
  1. Start the development server:
npm start

🏗️ Building for Production

To create a production build:

npm run build

🧪 Running Tests

npm test

To view test coverage:

npm test -- --coverage

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.