Team MatchFixing (6381) | Gemini

Link to deployment: https://matchfixing-orbital24.vercel.app/

Project Scope and Aim: We aim to create a web application.

This application will not only connect people through sports but also facilitate finding sports buddies to play with. Ultimately, finding like-minded individuals with the same sporting intentions is our key aim.

We look to match people by sporting type through our application and facilitate the coordination of sports meetups with our matched individuals.

Motivation: Driven by our passion for sports, we have encountered a common challenge: finding fellow enthusiasts who share our precise sporting passions.

In acknowledging the diverse sports preferences within our social circles, we identified a gap—connecting with individuals eager to engage in the same sport.

Some sports thrive with multiple participants, amplifying the fun, productivity, and effectiveness of the experience. Additionally, considering the fact that different people have varying skill, many seek to engage with opponents or teammates of similar proficiency for a balanced and enjoyable experience.

Inspired by our individual struggles to find sporting buddies, this realisation sparked our mission to create a solution that seamlessly connects like-minded individuals, fostering enjoyable and fulfilling sporting experiences.

User Stories:

As a user who wants to find compatible players to engage in new sports with, I want to be able to search and filter for potential players based on a specified criteria such as my sport of interest, the proficiency of the other players, and many more criteria. Therefore, this will allow me to find the best possible match that I will be satisfied to play with.

As a prospective user who wishes to create a comprehensive and tailored profile within the system, I want to be able to access a user login and authentication system that allows me to create and maintain a personalized profile, ensuring an accurate representation of my athletic abilities and preferences, while also obscuring my personal details.

As individuals who have been matched and desire to know more about different amenities that are in the surroundings of a particular sporting facility, I want to be able to search for a sporting facility in the web application and I want to be able to see the various categories of nearby amenities such as food, parking, and many more. I also want the web application to be able to display the names and addresses of these places upon clicking on them.

As a user who has been successfully matched with potential sporting partners, who wants to establish a rapport and coordinate logistics prior to meeting in person, I want to be able to chat, interact and communicate with my sporting partner without having to exchange any personal details.

Features

User Matching Feature (core): Our web application allows users to create and submit requests for different sports. Users can specify their sport of interest, preferred location, date and time of the activity that they wish to engage in. If the user is not able to make it for their booking, they can cancel their active request. Users can then view these requests and filter them out based on the sport or the location. By considering such factors, users can send requests to one another, view their sent requests and accept or decline any incoming requests. Should a user accept a request, the booking will reflect on their main dashboard page together with the sport, location, date, time and partner that they will be playing with. Users can mark confirmed matches as complete once they have carried out the activity.

Personalised User Profiles and Authentication System (core): The web application offers a secure user authentication system for creating customized profiles. Users can showcase their current sports engagements, proficiency in various activities, and more, providing a comprehensive overview of their sporting interests and abilities.

Proximity-Based Amenities Finder (core): Leveraging geolocation data, the platform identifies nearby amenities suitable for users. By providing a range of options to choose from such as Transportation, Food and many more, MatchFixing makes it as convenient as possible for users as they do not have to navigate out of the web application to locate nearby amenities. Users can view the names and also the addresses of the different places as well.

Direct Messaging System (extension): Users can engage in communication through a dedicated chat interface, allowing matched individuals to interact online before meeting in person. This feature enhances user experience by facilitating pre-meetup discussions and planning. Similar to a forum and its reply system, we implement a chat feature which allows users to plan their meeting before the actual match.

Scope Of Project

The web application provides a straightforward user interface for users to select their respective sports and match based on certain criteria

Milestone 1 -Technical Proof Of Concept

Users are able to create accounts for the application. Users can create requests for matching sports.

Milestone 2 - Prototype

Users can create profiles with personalized descriptions.

Users can send, accept, decline and cancel requests with one another.

Users can find nearby amenities at the sporting facilities where they will be playing.

Test trial the application with peers, and receive any feedback from them.

Deployment of our web application for public use.

Milestone 3 - Extended system

Implement the Direct Messaging System to allow users to interact online.

Implement suggestions based on user feedback if possible.

Features to be completed by the mid of June:

Authentication System, integrating FE and BE.

Login/Register for Authentication.

Submit requests for Sports and required details.

Users can match with one another based on sport, location and other factors.

Custom Profiles.

Proximity-Based Amenities Finder.

Features to be completed by the mid of July:

Direct Messaging System.

Development Plan

3rd Week of May: Finalised pitch for Orbital Lift-off.

4th Week of May: Self-learning of necessary technologies.

5th Week of May: Create project and implement login/register feature

1st Week of June: Implement sports requests

2nd Week of June: Implement matching users based on requests and customisation of profiles

3rd Week of June: Implement the Proximity-Based Amenities Finder

4th Week of June: Deploy web application

1st Week of July: Implement notifications feature

2nd Week of July: Implement the Direct Messaging Sytem

3rd Week of July: Conduct system testing and settle miscellaneous tasks (e.g clean up code/formatting)

4th Week of July: Film Milestone 3 video and update README

Tech Stack

Front-End:

1. React.js

2. TypeScript

3. Next.js

Back-End:

1. Next.js

2. Prisma (ORM)

3. Supabase + PostgresSQL (Database)

API:

1. Google Maps

2. Google Client Authentication

Version Control:

1. GitHub

Testing:

1. Jest

Running the project

Link to deployment: https://matchfixing-orbital24.vercel.app/

Alternatively: Our Project Runs on Next.js

Install these dependencies to run the project:

npm install
npm install next-themes date-fns cmdk class-variance-authority lucide-react react-day-picker
npm install @radix-ui/react-dropdown-menu react-toast react-slot react-select react-label react-dialog 
npm install @radix-ui/react-hover-card react-popover react-checkbox react-tabs react-hook-form
npm install @emotion/react @emotion/styled @tanstack/react-table
npm install typescript ts-node  --save-dev tsconfig-paths
npm install vercel
npm i -S @react-google-maps/api
npm install --save-dev @types/google.maps
npm install --save use-places-autocomplete
npm i @googlemaps/js-api-loader

Software Development Process

Initial Planning/Development Scope

In this stage, we collected information for our web app. Our primary goal was to ensure we developed a product that matched users who wanted to play the same sport together. We set a scope that was realistic and could still deliver as a product.

Tasks and Activities:

• Project Meetings: We held meetings to discuss the project's scope, identifying key features and functionalities needed for the app. This laid the groundwork for our project.
• Tech Stack: We decided on the tech stack mentioned above which suited our needs for the web application.
• Liftoff: Finalised the project plan, including the timeline, milestones, and task assignments. This involved detailed discussions on the project deliverables.
• Liftoff Poster and Video: Created promotional materials to visualise the concept and attract initial user interest.

Learning Required Materials/Knowledge

In this stage, we learnt all the required knowledge to familiarise ourselves with the tech stack we plan to use, especially with React/Next.js which formed the foundation for our project.

Tasks and Activities:

• Step-by-Step Learning: For each part of our project, we learnt the required knowledge needed.
  • For example, we started off with UI design for the project first, so we read up on HTML, CSS to ensure we had the FrontEnd skills to make an attractive web application.
  • Following up, we learnt the Back-End(BE) knowledge required for our database, familiarising with SQL and JSON for sending requests to the BE, which was crucial for our application.

Design

This stage focused on creating mockups to visualise the app's structure and user interface.

Tasks and Activities:

• Github Setup: Set up the repository structure, which included organising the project's codebase and documentation. Ensured that we were familiar with how to use Github, especially for commits and push/pull.
• Designing User Interfaces (UI): Developed mockups for the app's main screens on paper, ensuring a user-friendly experience. Listed down many elements which we wanted to incorporate into our web application. Drawn out generic layouts that looked simple but still contained the essential features.

Implementation

Implementation involved coding the app based on the designs and plans created in the previous stages. This included frontend, backend, and database development.

Tasks and Activities:

• Coding Frontend (React.js): Implemented the user interface using React.js, ensuring a responsive and interactive experience.
• Setting up Backend (Supabase): Developed the backend using Supabase, focusing on user authentication, database management, and API integration.
• API Integration (Google Maps): Implemented the API for Google Maps which allows users to search for nearby amenities in their neighbourhood.

Examples and Justifications:

• Version Control: Utilised Git and GitHub for version control, enabling collaborative development and code review. Ensured commit messages are informative and succinct of what changes were implemented.
• Code Reviews: Conducted regular code reviews with each other to update each other on our progress. Made sure we understood each other’s decision for every step of the code.

Testing

Testing ensured the app was free of bugs and provided a smooth user experience.

Tasks and Activities:

• Testing during Development: Continuously conducting tests upon completion of core features in development to validate their functionality.
• Integration Testing: Conducted integration tests to ensure different parts of the app worked seamlessly together.
• User Testing: Conducted user testing to discover problems and troubleshoot them afterwards.
• Unit and Component-Side Testing: Used Jest and the React Testing Library to conduct unit testing. Involved testing individual units or components of our Next.js pages to ensure they work as intended. A unit is the smallest testable part of an application.

User Testing - Date and Task Description

• 19/5 Creating Initial Pages

  • Tools Used: React Test Library
  • Design of Test Cases: Created unit tests for React components
  • Issues Discovered: Discovered issues with component rendering.
  • Fixes Applied: Updated component logic and re-ran tests.

• 19/5 Github Setup

  • Tools Used: Git, Github
  • Design of Test Cases: Set up continuous integration (CI) for testing and for version control.
  • Issues Discovered: N/A
  • Fixes Applied: N/A

• 24/5 Implemented Authentication

  • Tools Used: Postman Agent
  • Design of Test Cases: Simulate the creation and sign in of accounts, using repeated accounts and attempts
  • Issues Discovered:
    • Usernames and emails could be repeated.
    • Password was not hashed/secure, could access from database.
    • API route not registering.
  • Fixes Applied:
    • Implement checks for repeated username and email.
    • Hashed passwords for an additional layer of security.
    • Ensure JSON of strings in the format for POST request.

• 30/5 Create Match Page (Requiring POST request)

  • Tools Used: Postman Agent
  • Design of Test Cases: Test cases entering every available sport
  • Issues Discovered:
    • Users can send capitalised, or not.
    • Date and Time not in the same format as its an empty string input.
  • Fixes Applied:
    • Formatted form to selection based to prevent formatting problems.
    • Limit sports choices to arrays so that users do not enter unrelated inputs.

• 2/6 Directories of web page

  • Tools Used: N/A
  • Design of Test Cases: N/A
  • Issues Discovered: Pages were not put into proper folders.
  • Fixes Applied: Created directories in source code. Sorted pages into logical folders.

• 3/6 Data Fetching and Mutation

  • Tools Used: Postman Agent
  • Design of Test Cases: Prisma ORM and Supabase DB fetches data and gives in different formats.
  • Issues Discovered: Standardised use of PRISMA ORM Data FETCH/MUTATION throughout project.
  • Fixes Applied: Standardised use of PRISMA ORM Data FETCH/MUTATION throughout project.

• 10/6 Implementing Nearby Amenities search

  • Tools Used: Simulating search for different locations and selecting different types of amenities.
  • Design of Test Cases: N/A
  • Issues Discovered:
    • After the first search, markers were not being cleared from the map when a user selects a different option from the amenities list.
    • Resulted in clustering and overcrowding of markers, making it difficult for users to view the amenities that they were searching for.
  • Fixes Applied: Created an array to capture initialised markers for each new search. Array is cleared after every search to ‘reset’ the map and clear all the previous markers present.

• 12/6 Session Log In/Log Out

  • Tools Used: Test Case of signing in and out with standard and Google accounts.
  • Design of Test Cases: N/A
  • Issues Discovered: Signing in and out does not refresh the NavBar, leading to wrong component rendering.
  • Fixes Applied: Implement session.refresh() at every step of the login/logout process to ensure correct components in the page renders.

• 17/6 Matching users

  • Tools Used: Test Case of creating and sending request using standard and Google Accounts.
  • Design of Test Cases: N/A
  • Issues Discovered: Users were able to send multiple requests for the same booking.
  • Fixes Applied: Integrated a check into the route handler that handles sending of user requests. Check ensures that if a request is already sent by that user for that booking, the user will not be allowed to send any more requests for that booking.

• 20/6 Implementing of Notifications Bar

  • Tools Used: Test Case of creating and sending request using standard and Google Accounts to test notifications functionality.
  • Design of Test Cases: N/A
  • Issues Discovered: Client-side component was trying to use a server-side function causing a build error that resulted in a module failing to parse.
  • Fixes Applied: Passed down data obtained from the server-side function as props to the child client component to allow the client-side component to use the data without causing build errors.

• 22/6 Deployment of Project

  • Tools Used: Vercel
  • Design of Test Cases: N/A
  • Issues Discovered: Components not suitable for Vercel-Side causing deployment issues.
  • Fixes Applied: Work around for components, either took out or implement properly. E.g. UseToast() was changed to alert as it interfered with the deployment.

• 22/6 Cancelling bookings

  • Tools Used: Test Case of creating and cancelling created bookings using standard and Google Accounts.
  • Design of Test Cases: N/A
  • Issues Discovered: Users were unable to cancel bookings that they had already created (that had no confirmed partner).
  • Fixes Applied: Integrated a check to ensure that the booking first exists in the database before cancelling and deleting it.

• 23/6 Deployment of Project

  • Tools Used: Vercel
  • Design of Test Cases: N/A
  • Issues Discovered: Application error: server side exception.
  • Fixes Applied: NEXT-AUTH and .env file causing errors. Fixed some settings.

• 26/6 Google Sign In

  • Tools Used: N/A
  • Design of Test Cases: Attempted to sign in using a Google account.
  • Issues Discovered: Cannot sign in using Google.
  • Fixes Applied: Google Sign-in API did not recognize Vercel deployment link as an authorized redirect URI. Added Vercel website to the OAuth in Google Cloud Settings for the project.

• 26/6 Updating of Profile Picture

  • Tools Used: N/A
  • Design of Test Cases: Updating profile using form given on the website.
  • Issues Discovered: If string input is not a valid URL and just any random string, an UNHANDLED RUNTIME ERROR occurs.
  • Fixes Applied: Next/image in Next.js only renders images with valid URLs in Component (used for our Navbar). Added a schema for userProfile which ensures the profile picture field only takes in URLs.

• 17/7 API Integration

  • Tools Used: Supabase, Vercel, GetStream.io
  • Design of Test Cases: Use of GetStream.io API for real-time chats between users for our extension feature.
  • Issues Discovered: API does not sync with Supabase seamlessly, requiring us to delete the DB data and alter much data.
  • Fixes Applied: Opted for simple SQL and POST requests instead of API integration, similar to a forum messaging system.

• 19/7 Server-Side Errors for Deployment

  • Tools Used: Vercel, Supabase
  • Design of Test Cases: Pushing commits to GitHub.
  • Issues Discovered: Vercel deployment kept running into client/server-side errors, rendering our website unusable. Project log kept being unable to find our DB (Supabase) data.
  • Fixes Applied: Checked Vercel project logs to isolate problems. Found out that the environment variable connected to our project had changed. Updated environment variable in Vercel.

• 20/7 Duplicate Notifications Appearing in Dashboard Home Page

  • Tools Used: N/A
  • Design of Test Cases: Test case of repeatedly sending in new requests to the user to debug the duplicate notification that was persisting.
  • Issues Discovered: When a user receives only one incoming request, the page would display the same notification twice for the user (e.g., "jonus has sent you a request!" appearing twice).
  • Fixes Applied: Implemented a useRef React hook to keep track of whether the notifications have been set initially. This avoids setting them multiple times on subsequent renders, solving the duplication issue that was occurring.

  Unit and Component-Side Testing - Date and Task Description

• Home Page

  • Design of Test Cases: Checks specific outputs (headings, images, text, links) produced by the component.
  • Issues Discovered: N/A
  • Fixes Applied: N/A

• About Us Page

  • Design of Test Cases: Checks specific outputs (headings, images, text, links) produced by the component. Checks if the Tabs React Component worked as intended.
  • Issues Discovered: Special symbols such as (“,*,’) required special symbols in code lines.
  • Fixes Applied: Used the special characters(', ", etc) to replace those characters.

• Sign In Page

  • Design of Test Cases: Component Testing: Mocking the SignInForm Component.
  • Issues Discovered: N/A
  • Fixes Applied: N/A

• Sign Up Page

  • Design of Test Cases: Component Testing: Mocking the SignUpForm Component.
  • Issues Discovered: N/A
  • Fixes Applied: N/A

• Sign In Page

  • Design of Test Cases: Component Testing: Mocking the CreateMatchForm Component.
  • Issues Discovered: Heading was not rendered.
  • Fixes Applied: Redid CreateMatchForm and put the header in the page.tsx code instead.

• Update Profile Page

  • Design of Test Cases: Component Testing: Mocking the UpdateProfileForm Component. Checked if HoverCard React Component was rendered
  • Issues Discovered: N/A
  • Fixes Applied: N/A

• Maps Page

  • Design of Test Cases: Component Testing: Renders the Map component. Loading State: Checks that the initial loading text is rendered indicating the map is in a loading state. Environment Setup: beforeAll is used to set up any necessary environment variables. Here, it mocks the Google Maps API key using process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY.
  • Issues Discovered: Using beforeAll affected other test cases in the test suites. The test might overwrite an existing environment variable that is critical for other parts of the application or tests.
  • Fixes Applied: By changing to beforeEach and afterEach, the test ensures that environment variables are set up and torn down properly. maintaining isolation and reducing the risk of side effects.

• Sidenav Component

  • Design of Test Cases: Component Testing: Ensured all the tabs of the navigation bar was rendered properly.
  • Issues Discovered: Sign out Button not rendering properly in SideNav Component. (Possibly due to popover)
  • Fixes Applied: Moved the Sign Out Button out of NavLinks and designed it separately, moved out to the SideNav file instead.

Examples and Justifications:

• Test Cases and Scenarios: Ensured that every part of the project worked before moving on to the next.
• Bug Tracking: Used tools such as the in-built DOM in browsers to track and manage bugs, ensuring timely resolution.

Documentation

Documentation was crucial for maintaining the project, providing guidelines for future development, and ensuring new team members could easily onboard.

Tasks and Activities:

• README and Project Log: Created a detailed README file and project log to document the development process, installation steps, and usage guidelines.

Examples and Justifications:

• Comprehensive README: Ensured the README file provided clear instructions and context for the project, making it easy for others to understand and contribute.
• Code Comments and Inline Documentation: Added comments and inline documentation within the codebase to explain complex logic and enhance code readability for each other.

Technical Proof Of Concept

Welcome Page

About Us Page

Sign-In Page

Sign-Up Page

Dashboard Page

Find a Match Page

Create a Match Page

My Bookings Page (Confirmed Bookings Tab)

My Bookings Page (Unconfirmed Bookings Tab)

Active Requests Page (Incoming Requests Tab)

Active Requests Page (Sent Requests Tab)

Chat Page

Locate Nearby Amenities Page

Settings Page

Update Profile Page