{"id":17859885,"url":"https://github.com/alexandrbig1/harmony-hub","last_synced_at":"2025-08-09T19:32:42.215Z","repository":{"id":259255725,"uuid":"876981684","full_name":"Alexandrbig1/harmony-hub","owner":"Alexandrbig1","description":"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.","archived":false,"fork":false,"pushed_at":"2024-11-06T21:12:42.000Z","size":11289,"stargazers_count":1,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-07T13:43:40.541Z","etag":null,"topics":["api","axios","css","frontend","fullstack","hackathon","html","javascript","js","material-ui","postman","react","react-router-dom","redux","styled","ux-ui-design","webdev","webdevelopment"],"latest_commit_sha":null,"homepage":"https://harmony-hub-live.netlify.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Alexandrbig1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-22T22:05:53.000Z","updated_at":"2024-11-06T21:12:46.000Z","dependencies_parsed_at":"2024-10-23T23:10:43.026Z","dependency_job_id":"a616d699-1121-4a85-b18a-442dac746157","html_url":"https://github.com/Alexandrbig1/harmony-hub","commit_stats":null,"previous_names":["alexandrbig1/harmony-hub"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexandrbig1%2Fharmony-hub","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexandrbig1%2Fharmony-hub/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexandrbig1%2Fharmony-hub/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexandrbig1%2Fharmony-hub/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Alexandrbig1","download_url":"https://codeload.github.com/Alexandrbig1/harmony-hub/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229826359,"owners_count":18130234,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","axios","css","frontend","fullstack","hackathon","html","javascript","js","material-ui","postman","react","react-router-dom","redux","styled","ux-ui-design","webdev","webdevelopment"],"created_at":"2024-10-28T07:03:50.586Z","updated_at":"2025-08-09T19:32:42.183Z","avatar_url":"https://github.com/Alexandrbig1.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Harmony Hub\n\n\u003cimg align=\"right\" src=\"https://media.giphy.com/media/du3J3cXyzhj75IOgvA/giphy.gif\" width=\"100\"/\u003e\n\n[![GitHub last commit](https://img.shields.io/github/last-commit/Alexandrbig1/harmony-hub)](https://github.com/Alexandrbig1/harmony-hub/commits/main)\n[![GitHub license](https://img.shields.io/github/license/Alexandrbig1/harmony-hub)](https://github.com/Alexandrbig1/harmony-hub/blob/main/LICENSE)\n[![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)\n[![JavaScript](https://img.shields.io/badge/JavaScript-Latest-EAD319.svg)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)\n[![Axios](https://img.shields.io/badge/Axios-1.6.4-5300D8.svg)](https://github.com/axios/axios)\n[![Vite](https://img.shields.io/badge/Vite-5.0.8-6868F2)](https://vitejs.dev/)\n[![React](https://img.shields.io/badge/React-18.2.0-51CAEF.svg)](https://reactjs.org/)\n[![Redux](https://img.shields.io/badge/Redux-8.1.3-6231AF.svg)](https://redux.js.org/)\n[![Styled Components](https://img.shields.io/badge/Styled_Components-6.1.6-D664C0.svg)](https://styled-components.com/)\n[![Framer Motion](https://img.shields.io/badge/Framer_Motion-11.1.1-00ADD8.svg)](https://www.framer.com/motion/)\n[![React Icons](https://img.shields.io/badge/React_Icons-5.0.1-E10051.svg)](https://react-icons.github.io/react-icons/)\n[![Node.js Version](https://img.shields.io/badge/Node.js-v18.18.0-2B8B27)](https://nodejs.org/)\n[![Express.js Version](https://img.shields.io/badge/Express.js-v4.18.2-000000)](https://expressjs.com/)\n[![MongoDB](https://img.shields.io/badge/MongoDB-v6.3.0-3B9539)](https://www.mongodb.com/)\n[![Mongoose Version](https://img.shields.io/badge/Mongoose-v8.0.3-6B0002)](https://mongoosejs.com/)\n[![Git](https://img.shields.io/badge/Git-2.35.1-F05032.svg)](https://git-scm.com/)\n\nWelcome 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.\n\n---\n\n## Live Demo\n\n[Live Demo](https://harmony-hub-live.netlify.app)\n\n## Backend Repository\n\n[Backend](https://github.com/Alexandrbig1/harmony-hub-backend)\n\n## Backend APIs with Swagger Documentation\n\n[Swagger](https://harmony-hub-backend.onrender.com/api-docs)\n\n---\n\n## Table of Contents\n\n- [Features](#features)\n- [Tech Stack](#tech-stack)\n- [Team](#team)\n- [Screenshots](#screenshots)\n- [Issues](#issues)\n- [License](#license)\n- [Feedback](#feedback)\n- [Languages and Tools](#languages_and_tools)\n- [Connect with me](#connect_with_me)\n\n---\n\n## Features\n\n- **Personalized Music Playlists**: Generates curated playlists tailored to users' moods, music preferences, and energy levels.\n- **User Authentication**: Secure and streamlined login and registration with session handling.\n- **Responsive Design**: Fully optimized for both mobile and desktop for seamless user experience across devices.\n- **Dynamic User Interaction**: Real-time UI updates based on user selections, providing instant feedback and engagement.\n- **Hackathon Project for Cyberjam 2024**: Built with a focus on blending art, technology, and user-centered design for Cyberjam's innovation-driven hackathon.\n- **Music AI Integration**: Leverages Suno AI for high-quality music recommendation and creation.\n- **On-Chain Component**: Utilizes Chainlink Functions to integrate blockchain-powered features, enhancing transparency and security.\n\n---\n\n### Tech Stack\n\n- **Frontend Framework**: React\n- **Bundler**: Vite\n- **Styling**: Styled Components\n- **Animations**: Framer Motion\n- **State Management**: Redux Toolkit\n- **Routing**: React Router\n- **Form Validation**: Formik and Yup\n\n- **Backend**:\n\n  - **Runtime**: Node.js\n  - **Framework**: Express.js\n  - **Database**: MongoDB\n  - **Additional Backend Framework**: Python Sanic\n  - **Hosting**: Render\n\n- **On-chain Component**: Chainlink Functions\n- **Music AI**: Suno AI\n\n---\n\n## About Hackathon Cyber Jam 2024\n\n### What we’re about\n\nCyberjam 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:\n\n- AI\n- Fashion\n- Governance\n- Sports/Gaming\n- Security \u0026 Privacy\n\nEach team will include:\n\n- A Software Engineer\n- A Hardware Engineer\n- A Visual Artist\n- A Musician\n- A Wildcard (a communicator to bring it all together)\n\n[HackQuest](https://www.hackquest.io/en/hackathon/explore/Cyberjam-2024)\n\n[Harmony Hub Team](https://www.hackquest.io/en/hackathon/projects/Cyberjam-2024-Harmony-Hub)\n\n---\n\n## Team\n\n- **Alex Smagin** - Software Engineer\n- **Morgan** - WildCard / Product Manager\n- **Tony** - Fashion / Designer\n- **Xtinct** - Music \u0026 Art Artist, Designer\n- **Sheila** - Mentor\n\n---\n\n## Screenshots\n\n### Harmony Hub App\n\n![Harmony Hub app](/public/images/screenshots/harmonyhub.jpg) _Screenshot 1\n(Harmony Hub Home Page)_\n\n![Harmony Hub app](/public/images/screenshots/harmonyhub2.jpg) _Screenshot 2\n(Harmony Hub About Page)_\n\n![Harmony Hub app](/public/images/screenshots/harmonyhub3.jpg) _Screenshot 3\n(Harmony Hub Sign Up Page)_\n\n![Harmony Hub app](/public/images/screenshots/harmonyhub4.jpg) _Screenshot 4\n(Harmony Hub Sign In Page)_\n\n![Harmony Hub app](/public/images/screenshots/harmonyhub5.jpg) _Screenshot 5\n(Harmony Hub Music Page)_\n\n![Harmony Hub app](/public/images/screenshots/harmonyhub6.jpg) _Screenshot 6\n(Harmony Hub Music Page Mobile Device)_\n\n![Harmony Hub app](/public/images/screenshots/404.jpg) _Screenshot 7\n(Harmony Hub 404 Page Not Found)_\n\n### Working Process:\n\n![Styro Bob team](/public/images/screenshots/team1.jpg) _Screenshot 1\n(Open Day Hackathon Cyber Jam 2024)_\n\n![Styro Bob team](/public/images/screenshots/team2.jpg) _Screenshot 2\n(Open Day Hackathon Cyber Jam 2024)_\n\n![Styro Bob team](/public/images/screenshots/team4.jpg) _Screenshot 3\n(Coding Time)_\n\n![Styro Bob team](/public/images/screenshots/team3.jpg) _Screenshot 4\n(Closing Day Hackathon Cyber Jam 2024)_\n\n---\n\n## Issues\n\nIf you encounter any issues or have suggestions, please\n[open an issue](https://github.com/Alexandrbig1/harmony-hub/issues).\n\n---\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE).\n\n---\n\n## Feedback\n\nI welcome feedback and suggestions to improve the application's functionality and user experience.\n\n---\n\n## Languages and Tools\n\n\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://en.wikipedia.org/wiki/HTML5\" target=\"_blank\"\u003e\u003cimg style=\"margin: 10px\" src=\"https://profilinator.rishav.dev/skills-assets/html5-original-wordmark.svg\" alt=\"HTML5\" height=\"50\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://www.w3schools.com/css/\" target=\"_blank\"\u003e\u003cimg style=\"margin: 10px\" src=\"https://profilinator.rishav.dev/skills-assets/css3-original-wordmark.svg\" alt=\"CSS3\" height=\"50\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://www.javascript.com/\" target=\"_blank\"\u003e\u003cimg style=\"margin: 10px\" src=\"https://profilinator.rishav.dev/skills-assets/javascript-original.svg\" alt=\"JavaScript\" height=\"50\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://reactjs.org/\" target=\"_blank\" rel=\"noreferrer\"\u003e \u003cimg src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original-wordmark.svg\" alt=\"react\" width=\"40\" height=\"40\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://styled-components.com/\" target=\"_blank\"\u003e\u003cimg style=\"margin: 10px\" src=\"https://profilinator.rishav.dev/skills-assets/styled-components.png\" alt=\"Styled Components\" height=\"50\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://framer.com\" target=\"_blank\" rel=\"noreferrer\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/framer-colored.svg\" width=\"36\" height=\"36\" alt=\"Framer\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://redux.js.org/\" target=\"_blank\" rel=\"noreferrer\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/redux-colored.svg\" width=\"36\" height=\"36\" alt=\"Redux\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://vitejs.dev/\" target=\"_blank\" rel=\"noreferrer\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/vite-colored.svg\" width=\"36\" height=\"36\" alt=\"Vite\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://git-scm.com/\" target=\"_blank\" rel=\"noreferrer\"\u003e\n\u003cimg src=\"https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg\" alt=\"git\" width=\"40\" height=\"40\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://postman.com\" target=\"_blank\" rel=\"noreferrer\"\u003e\u003cimg src=\"https://www.vectorlogo.zone/logos/getpostman/getpostman-icon.svg\" alt=\"postman\" width=\"40\" height=\"40\"/\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n---\n\n## Connect with me\n\n\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://linkedin.com/in/alex-smagin29\" target=\"_blank\"\u003e\n\u003cimg src=https://img.shields.io/badge/linkedin-%231E77B5.svg?\u0026style=for-the-badge\u0026logo=linkedin\u0026logoColor=white alt=linkedin style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.youtube.com/@AlexSmaginDev\" target=\"_blank\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/youtube-%23FF0000.svg?\u0026style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTube\" style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://discord.gg/t6MGsCqdFX\" target=\"_blank\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/discord-%237289DA.svg?\u0026style=for-the-badge\u0026logo=discord\u0026logoColor=white\" alt=\"Discord\" style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://stackoverflow.com/users/22484161/alex-smagin\" target=\"_blank\"\u003e\n\u003cimg src=https://img.shields.io/badge/stackoverflow-%23F28032.svg?\u0026style=for-the-badge\u0026logo=stackoverflow\u0026logoColor=white alt=stackoverflow style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://dribbble.com/Alexandrbig1\" target=\"_blank\"\u003e\n\u003cimg src=https://img.shields.io/badge/dribbble-%23E45285.svg?\u0026style=for-the-badge\u0026logo=dribbble\u0026logoColor=white alt=dribbble style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.behance.net/a1126\" target=\"_blank\"\u003e\n\u003cimg src=https://img.shields.io/badge/behance-%23191919.svg?\u0026style=for-the-badge\u0026logo=behance\u0026logoColor=white alt=behance style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.upwork.com/freelancers/~0117da9f9f588056d2\" target=\"_blank\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/upwork-%230077B5.svg?\u0026style=for-the-badge\u0026logo=upwork\u0026logoColor=white\u0026color=%23167B02\" alt=\"Upwork\" style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandrbig1%2Fharmony-hub","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexandrbig1%2Fharmony-hub","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandrbig1%2Fharmony-hub/lists"}