Skip to content

Harmony Hub's frontend is built with React and Vite, using Redux Toolkit for state management, Styled Components and MUI for styling, and Framer Motion for animations. It features React Router for navigation and Axios for API calls, ensuring a seamless, responsive user experience.

License

Notifications You must be signed in to change notification settings

Alexandrbig1/harmony-hub

Repository files navigation

Harmony Hub

GitHub last commit GitHub license Netlify Status JavaScript Axios Vite React Redux Styled Components Framer Motion React Icons Node.js Version Express.js Version MongoDB Mongoose Version Git

Welcome to the frontend repository of Harmony Hub! This project delivers an intuitive and responsive interface that lets users generate personalized music based on their emotional state. Developed as part of the Cyberjam 2024 Hackathon, Harmony Hub provides an engaging and interactive way to enhance users' music experience.


Live Demo

Live Demo

Backend Repository

Backend

Backend APIs with Swagger Documentation

Swagger


Table of Contents


Features

  • Personalized Music Playlists: Generates curated playlists tailored to users' moods, music preferences, and energy levels.
  • User Authentication: Secure and streamlined login and registration with session handling.
  • Responsive Design: Fully optimized for both mobile and desktop for seamless user experience across devices.
  • Dynamic User Interaction: Real-time UI updates based on user selections, providing instant feedback and engagement.
  • Hackathon Project for Cyberjam 2024: Built with a focus on blending art, technology, and user-centered design for Cyberjam's innovation-driven hackathon.
  • Music AI Integration: Leverages Suno AI for high-quality music recommendation and creation.
  • On-Chain Component: Utilizes Chainlink Functions to integrate blockchain-powered features, enhancing transparency and security.

Tech Stack

  • Frontend Framework: React

  • Bundler: Vite

  • Styling: Styled Components

  • Animations: Framer Motion

  • State Management: Redux Toolkit

  • Routing: React Router

  • Form Validation: Formik and Yup

  • Backend:

    • Runtime: Node.js
    • Framework: Express.js
    • Database: MongoDB
    • Additional Backend Framework: Python Sanic
    • Hosting: Render
  • On-chain Component: Chainlink Functions

  • Music AI: Suno AI


About Hackathon Cyber Jam 2024

What we’re about

Cyberjam 2024 is an immersive hackathon taking place from October 19th to October 27th at Chicago's global innovation hub, 1871. Teams of 5 (we call them Jammers) will work together on phygital experiences combining art, technology, and innovation across five thematic tracks:

  • AI
  • Fashion
  • Governance
  • Sports/Gaming
  • Security & Privacy

Each team will include:

  • A Software Engineer
  • A Hardware Engineer
  • A Visual Artist
  • A Musician
  • A Wildcard (a communicator to bring it all together)

HackQuest

Harmony Hub Team


Team

  • Alex Smagin - Software Engineer
  • Morgan - WildCard / Product Manager
  • Tony - Fashion / Designer
  • Xtinct - Music & Art Artist, Designer
  • Sheila - Mentor

Screenshots

Harmony Hub App

Harmony Hub app Screenshot 1 (Harmony Hub Home Page)

Harmony Hub app Screenshot 2 (Harmony Hub About Page)

Harmony Hub app Screenshot 3 (Harmony Hub Sign Up Page)

Harmony Hub app Screenshot 4 (Harmony Hub Sign In Page)

Harmony Hub app Screenshot 5 (Harmony Hub Music Page)

Harmony Hub app Screenshot 6 (Harmony Hub Music Page Mobile Device)

Harmony Hub app Screenshot 7 (Harmony Hub 404 Page Not Found)

Working Process:

Styro Bob team Screenshot 1 (Open Day Hackathon Cyber Jam 2024)

Styro Bob team Screenshot 2 (Open Day Hackathon Cyber Jam 2024)

Styro Bob team Screenshot 3 (Coding Time)

Styro Bob team Screenshot 4 (Closing Day Hackathon Cyber Jam 2024)


Issues

If you encounter any issues or have suggestions, please open an issue.


License

This project is licensed under the MIT License.


Feedback

I welcome feedback and suggestions to improve the application's functionality and user experience.


Languages and Tools


Connect with me

About

Harmony Hub's frontend is built with React and Vite, using Redux Toolkit for state management, Styled Components and MUI for styling, and Framer Motion for animations. It features React Router for navigation and Axios for API calls, ensuring a seamless, responsive user experience.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published