Character Chords (Front End)

Discover your perfect playlist with Character Chords, the app that combines the fun of taking a personality test with the joy of music exploration. Find new music that resonates with you, explore the fictional world of your favorite characters through music, and uncover real-life kindred spirits along the way. Let AI choose your next song for you based on your moral leanings, personality traits, and musical preferences!

Table of Contents

• Directory
• Technical Details
  • Spotify OAuth
• Getting Started
• Wireframes
  • Home Page
  • Quiz Page
  • Character Page
  • Playlist Page (not logged in)
  • Playlist Page (logged in)
• Goals
  • Learning Goals
  • Future Goals
• Contact Us
• Contributors

Directroy

Hosted Website

Backend Service Site

Backend Repository

Technical Details

Character Chords is a full-stack Ruby on Rails app that uses a variety of technologies to provide a seamless and engaging music exploration experience. Here are some of the key technologies we use:

• Ruby: Character Chords is built with Ruby, a powerful and dynamic programming language that is well-suited to web development.
• Ruby on Rails: This application is also built with Ruby on Rails, a powerful web framework for easy web development with APIs and data storage options.
• PostgreSQL: We used PostgreSQL for robust web application data storage and management.
• HTML/CSS: We use HTML and CSS to create the app's user interface and styling, respectively.
• Tailwind CSS: Character Chords leverages Tailwind CSS, a utility-first CSS framework, to create a streamlined and responsive design.
• CircleCI: We use CircleCI for our continuous integration and continuous deployment (CI/CD) pipeline, which automates the testing and deployment of new code changes.
• Ruby on Rails CI: Character Chords is also tested using Ruby on Rails CI, a GitHub Action that runs tests for Ruby on Rails applications.
• Spotify OAuth: We use Spotify OAuth to enable users to log in to the app securely and access their Spotify accounts.
• Amazon S3: Character Chords utilizes Amazon S3 for cloud storage, which allows us to securely store and manage user-generated content like playlists and user data.
• External APIs: Character Chords consumes external APIs from Spotify and OpenAI to provide personalized music recommendations based on user preferences and personality traits.

Spotify OAuth

By using Spotify OAuth, our users can log in securely to their Spotify accounts without the need to create a new account or remember another set of login credentials. By authorizing our app to access their Spotify account, we can retrieve their user data and use it to personalize their experience within our app. This allows our users to seamlessly integrate their existing Spotify preferences with our app. Overall, using Spotify OAuth provides a more personalized and user-friendly experience for our users, which can increase engagement and retention.

Getting Started

Character Chords is a full-stack Ruby on Rails app that requires you to clone and set up both the frontend and backend repositories. You will need to ensure all required gems are installed and that environment variables are properly configured in order to run the app locally. Additionally, this app establishes API endpoints for use with the Character Chords Front End repository.

To get started, clone this repo down and install all gems by running:

bundle install

Next, run this command to make sure the database is properly created and migrated:

rails db:{create,migrate}

After running that command, inspect /db/schema in the application to make sure the database was properly created. This is what the schema for this repo should look like:

If you'd like to run the test suite for this repo, make sure you are connected to a server (either via the deployment on Heroku or localhost) and run this command:

bundle exec rspec spec

Wireframes

Home Page

Quiz Page

Character Page

Playlist Page (not logged in)

Playlist Page (logged in)

Goals

• Learning Goals

  • Create a web application that solves a real world problem and utilizes Service-Oriented Architecture (SOA).
  • Implement authentication via OAuth and consume at least two other APIs.
  • Develop a Rails "back end" API that acts as the interface layer to the database, handles API consumption, and uses Serializers.
  • Gain professional development benefits such as experience working on a larger team, understanding the impact of changes on a system, and familiarity with SOA/multi-app systems.

• Future Goals

  • With additional time and resources, we would like to implement the ChatGPT API in at least two other locations in the project. First, in the creation of the questions and answers for quizzes. We would like for the user to be able to input a profession or a theme and then receive the relevant alignment questions based off of their input. As of the production of this project (April 2023), the API only supports Chat GPT3.5 and not 4.0, making longer and more complex queries more volatile based on user input.
  • We would also like to implmenet DALL-E 2, the image generator of Open AI to provide a fictional album cover that is based off of the individual user's character selected and music genre. We would then upload the image to the user's Spotify playlist and send them the image in PDF format along with their playlist selection.

Contact Us

Thank you for using Character Chords! If you have any questions, suggestions, or bug reports, please don't hesitate to get in touch. You can contact us by creating a new issue on this repo page. We appreciate your feedback and look forward to hearing from you!

Contributors

Hady Matar	Harrison Ryan	James Taylor	Weston Sandfort
Github LinkedIn	Github LinkedIn	Github LinkedIn	Github LinkedIn