Vibe Check

A whimsical social media site where users post and check out ‘vibes’ in the form of curated playlists, pictures, and activity suggestions.

Tech Used

  • Python

    We used Python in our back-end for FastAPI, unit tests, models, etc.

  • React

    We used React’s components and hooks to build our User Interface.

  • Docker

    We used Docker to launch our application locally.

  • FastAPI

    We used FastAPI as a framework in our back-end.

  • Tailwind

    We used Tailwind’s CSS framework in our front-end.

  • mongoDB

    mongoDB stores our application’s data.

  • Redux

    Redux works with React to handle how data is processed in Vibe Check.

Features

Sign In

Users need to be authenticated to use the site. If it’s their first time using the site, they proceed to “Check Up” to create an account.

Main Page

Users are able to filter a carousel of vibes according to mood and click on one for a detail view.

List of User’s Vibes

Users can look at, edit, and delete all the vibes they’ve made.

List of All Vibes

Users can check out all the vibes made by others but cannot edit or delete them.

Create a Vibe

Users are able to create a vibe to share with others. The app interacts with Spotify’s API to allow the user to add a playlist to the vibe.

Accessibility Audit

Using the web accessibility tools WAVE, AXE, and Siteimprove, I audited Vibe Check’s design for errors. The 25 changes I made to the front-end code included:

  • Sharper contrast for better readability

  • More form labels to help people using screen readers

  • Appropriate use of level one headings for easier site navigation

  • Improved responsiveness at different screen sizes