Skip to content

Sam-Wonjae-Lee/Matchify-Frontend

Repository files navigation

Matchify Logo

Matchify

Discover new friends with shared music tastes, explore exciting events, and connect with a vibrant community. Matchify uses music data from Spotify to connect users, recommend events, and facilitate messaging and social interactions.
Backend Repository · Matchify Early Version · View Demo · Request Feature · Bug Report

Project Description

Key Features

Spotify User Login

Users start with a Welcome Screen introducing Matchify's features, then proceed to Sign Up by entering personal details. Next, they connect their Spotify account to personalize recommendations. Users complete their profile by adding location, a profile picture, and a bio. Finally, they receive confirmation of their account creation and are directed to the main Feed.

Home Page

A personalized feed with tailored music recommendations, friend activity, and shared playlists. Discover nearby music events and stay updated on what your friends are listening to and doing.

Profile

View/edit your profile with favorite songs, playlists, and music tastes. Share Spotify stats and feature your "Matchify playlist" for others to explore and get recommendations.

Events Page

Manage friend requests and view friend lists. Explore "Matchify Suggestions" to find and connect with recommended friends based on your music preferences.

Messaging

Stay connected with friends through group and individual chats. Share music, playlists, and event details directly in conversations, and enjoy seamless communication within the app.

Built With

Next.js React Tailwind
PostgreSql Nest.js Node.js

Installation

This is how to set up the project locally. To get a local copy running, follow the steps below.

Prerequisites

  • Node.js - For any Node.js project
  • npm - For installing dependencies

Instructions

  1. Clone the Repository
    Open your terminal and run the following command:

    git clone https://github.com/Sam-Wonjae-Lee/Matchify-Frontend.git
  2. Navigate into project directory
    Make sure to be in the project folder that has been cloned.

  3. Install dependencies with npm

    npm install
  4. Run the project
    The project backend needs to run as well. More information can be found here.

    npm run

Credits

Contributors

Andy Ren (1172097) - Developer
Calvin Liew (Calvin-Liew) - UI/UX Designer
Dmitrii Vlasov (Endlesssuply) - Developer
Frank Peng (Graves451) - Developer
Richard Chen (Riixardo) - Developer
Wonjae (Samuel) Lee (Sam-Wonjae-Lee) - Developer

Contact

For more questions or information about the project, please consult:
Wonjae (Samuel) Lee - wonjaesamuel.lee@mail.utoronto.ca

About

Frontend For Matchify | Next.js • React • Tailwind • Figma

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published