Overlap is a web application designed and created by six Integrated Engineering Students at UBC. One thing the COVID pandemic has showed us is the lack of socialibilty in music. Where you could previously go to parties or concerts and discover new music, the pandemic has limited the opportunities to expand your own horizons. Seeing this gap we decided to build an application that helps you connect with your friends to help build stronger relationships and keep connections that can fade in the online environment. Check out our app here.
The application integrates Spotify to collect a user's listening habits and lets you:
The application is built using the MERN stack. Our frontend is built with ReactJS and Bootstrap in addition to Redux for global state management. Our backend is a RESTful API built with ExpressJS, NodeJS, and MongoDB, and integrates the Spotify API.
npm installfor both directories.
.envfile in the
backenddirectory root folder and copy the following:
BACKEND_URL=http://localhost:8888 FRONTEND_URL=http://localhost:3000 CLIENT_ID= CLIENT_SECRET= ATLAS_URI=
Contact repo owner for client_id, client_secret, and atlas_uri. Alternatively, you could also build your own Spotify Application and run the repository as well with your own client. Here you can create your own client with Spotify.
.envfile in the
frontenddirectory root folder and copy the following:
npm startin the frontend directory.
node app.jsin the backend directory.
Check out our application here and specifically the "how it works" page if you want to learn more about it.
If you want to help contribute or read into our documentation you can look at your repository wiki which has the relevant and important information to our application. The wiki contains relevant API references and information on our database. A sample of what our documentation looks like is below for hthte users login endpoint.