Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/alexandrbig1/harmony-hub

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.
https://github.com/alexandrbig1/harmony-hub

api axios css frontend fullstack hackathon html javascript js material-ui postman react react-router-dom redux styled ux-ui-design webdev webdevelopment

Last synced: about 2 months ago
JSON representation

Host: GitHub
URL: https://github.com/alexandrbig1/harmony-hub
Owner: Alexandrbig1
License: mit
Created: 2024-10-22T22:05:53.000Z (4 months ago)
Default Branch: main
Last Pushed: 2024-11-06T21:12:42.000Z (3 months ago)
Last Synced: 2024-12-07T13:43:40.541Z (2 months ago)
Topics: api, axios, css, frontend, fullstack, hackathon, html, javascript, js, material-ui, postman, react, react-router-dom, redux, styled, ux-ui-design, webdev, webdevelopment
Language: JavaScript
Homepage: https://harmony-hub-live.netlify.app
Size: 10.8 MB
Stars: 1
Watchers: 1
Forks: 3
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # Harmony Hub



[![GitHub last commit](https://img.shields.io/github/last-commit/Alexandrbig1/trail_quest)](https://github.com/Alexandrbig1/trail_quest/commits/main)

[![GitHub license](https://img.shields.io/github/license/Alexandrbig1/trail_quest)](https://github.com/Alexandrbig1/trail_quest/blob/main/LICENSE)

[![Netlify Status](https://api.netlify.com/api/v1/badges/47784fa7-ada3-455a-8e28-7ef83746ee1a/deploy-status)](https://app.netlify.com/sites/harmony-hub-live/deploys)

[![JavaScript](https://img.shields.io/badge/JavaScript-Latest-EAD319.svg)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)

[![Axios](https://img.shields.io/badge/Axios-1.6.4-5300D8.svg)](https://github.com/axios/axios)

[![Vite](https://img.shields.io/badge/Vite-5.0.8-6868F2)](https://vitejs.dev/)

[![React](https://img.shields.io/badge/React-18.2.0-51CAEF.svg)](https://reactjs.org/)

[![Redux](https://img.shields.io/badge/Redux-8.1.3-6231AF.svg)](https://redux.js.org/)

[![Styled Components](https://img.shields.io/badge/Styled_Components-6.1.6-D664C0.svg)](https://styled-components.com/)

[![Framer Motion](https://img.shields.io/badge/Framer_Motion-11.1.1-00ADD8.svg)](https://www.framer.com/motion/)

[![React Icons](https://img.shields.io/badge/React_Icons-5.0.1-E10051.svg)](https://react-icons.github.io/react-icons/)

[![Node.js Version](https://img.shields.io/badge/Node.js-v18.18.0-2B8B27)](https://nodejs.org/)

[![Express.js Version](https://img.shields.io/badge/Express.js-v4.18.2-000000)](https://expressjs.com/)

[![MongoDB](https://img.shields.io/badge/MongoDB-v6.3.0-3B9539)](https://www.mongodb.com/)

[![Mongoose Version](https://img.shields.io/badge/Mongoose-v8.0.3-6B0002)](https://mongoosejs.com/)

[![Git](https://img.shields.io/badge/Git-2.35.1-F05032.svg)](https://git-scm.com/)

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](https://harmony-hub-live.netlify.app)

## Backend Repository

[Backend](https://github.com/Alexandrbig1/harmony-hub-backend)

## Backend APIs with Swagger Documentation

[Swagger](https://harmony-hub-backend.onrender.com/api-docs)

---

## Table of Contents

- [Features](#features)

- [Tech Stack](#tech-stack)

- [Team](#team)

- [Screenshots](#screenshots)

- [Issues](#issues)

- [License](#license)

- [Feedback](#feedback)

- [Languages and Tools](#languages_and_tools)

- [Connect with me](#connect_with_me)

---

## 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](https://www.hackquest.io/en/hackathon/explore/Cyberjam-2024)

[Harmony Hub Team](https://www.hackquest.io/en/hackathon/projects/Cyberjam-2024-Harmony-Hub)

---

## 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](/public/images/screenshots/harmonyhub.jpg) _Screenshot 1

(Harmony Hub Home Page)_

![Harmony Hub app](/public/images/screenshots/harmonyhub2.jpg) _Screenshot 2

(Harmony Hub About Page)_

![Harmony Hub app](/public/images/screenshots/harmonyhub3.jpg) _Screenshot 3

(Harmony Hub Sign Up Page)_

![Harmony Hub app](/public/images/screenshots/harmonyhub4.jpg) _Screenshot 4

(Harmony Hub Sign In Page)_

![Harmony Hub app](/public/images/screenshots/harmonyhub5.jpg) _Screenshot 5

(Harmony Hub Music Page)_

![Harmony Hub app](/public/images/screenshots/harmonyhub6.jpg) _Screenshot 6

(Harmony Hub Music Page Mobile Device)_

![Harmony Hub app](/public/images/screenshots/404.jpg) _Screenshot 7

(Harmony Hub 404 Page Not Found)_

### Working Process:

![Styro Bob team](/public/images/screenshots/team1.jpg) _Screenshot 1

(Open Day Hackathon Cyber Jam 2024)_

![Styro Bob team](/public/images/screenshots/team2.jpg) _Screenshot 2

(Open Day Hackathon Cyber Jam 2024)_

![Styro Bob team](/public/images/screenshots/team4.jpg) _Screenshot 3

(Coding Time)_

![Styro Bob team](/public/images/screenshots/team3.jpg) _Screenshot 4

(Closing Day Hackathon Cyber Jam 2024)_

---

## Issues

If you encounter any issues or have suggestions, please

[open an issue](https://github.com/Alexandrbig1/harmony-hub/issues).

---

## License

This project is licensed under the [MIT License](LICENSE).

---

## Feedback

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

---

## Languages and Tools









 

















---

## Connect with me