VibeHive - Personalized Music Application
This project is a personalized music application that allows users to build and manage their music libraries. Through an intuitive user interface, users can upload, edit, and delete songs and cover images, stream tracks directly within the app, and manage their music collections. The goal was to integrate modern web technologies to deliver a dynamic, scalable, and user-friendly music experience.
Technologies
- React
- Next.js
- Radix UI
- React Hook Form
- TailwindCSS
- TypeScript
- NextAuth
- Drizzle ORM
- PostgreSQL
- bcrypt
- Zustand
- Amazon S3
- Zod
Link
Purpose
I designed the application for the digital music space, aiming at users who seek an easy-to-use yet robust tool for managing and enjoying their music libraries.
My Role
As the sole developer, I was responsible for project development, including UI/UX design, frontend and backend development, database management, and deployment.
Technologies Used
- Next.js: For server-side rendering and optimized performance.
- React: To build a dynamic and responsive user interface.
- Radix UI: Ensures accessibility and consistent UI components.
- React Hook Form: Simplifies form handling and validation.
- TailwindCSS: Provide utility-first, efficient styling.
- TypeScript: Enhances code reliability with type safety and reduces potential bugs.
- NextAuth: Handles secure user authentication.
- Drizzle ORM & PostgreSQL: Secure, efficient database handling with complex query support.
- bcrypt: Secures user passwords with hashing.
- Zustand: Lightweight global state management for playback and user interactions.
- Amazon S3: Fast and reliable storage for media files.
- Zod: Ensures data validation and type safety.
Development and Thought process
I started by defining the essential features for the Minimum Viable Product (MVP), including music upload, editing, streaming, searching, liking, and managing a song library. The focus was on creating an intuitive, responsive user experience.
Choosing Amazon S3 for media storage was a key decision. It's fast and efficient for saving and fetching song and image URLs, improving load times and solving storage issues, especially as the app scales with more users and content.
Scalability was always a priority. I built the app using modular components and a clean architecture, making future updates easy and reusing similar components for other features. Zustand was my choice for state management because it's lightweight and keeps the app responsive, even as data volumes grow.
Artboards and Features
Home Screen: This screen displays the music library, with options to play, edit, delete, like, or search tracks.
Library Panel: Shows the user's library on the side panel.
Upload Songs: This feature lets users upload new songs and cover images with status notifications.
Profile Management: Allows users to view and edit their profile information, as well as modify or delete their songs.
Music Player: Built-in streaming with play, pause, and like controls.
Search: Enables users to search for songs by title, including songs from other users.
Like Songs: Users can like songs from other libraries, adding them to their personal 'Liked Songs' playlist, where they can easily access and enjoy their favorite tracks.
Responsive Views: Navigation turns to the hamburger menu for a clean and compact look on mobile screens and displays fully on desktops. I designed other components to adjust seamlessly to different screen sizes.
Challenges
Media Storage: Although I initially experienced performance issues with file uploads, choosing S3 Bucket made it easier to manage media files, save them, and fetch them, enhancing the user experience.
State Management: Managing playback across components was tricky, but Zustand's simplicity made it manageable by quickly customizing states.
Form Validation: Combined Zod with React Hook Form for robust data validation, ensuring data integrity and instant feedback for the front and back end.
Conclusion and Reflection
This project achieved the MVP goals by providing a personalized music management platform. This application is an example of which I am so proud because it shows off my front-end and back-end development skills and balances my skills for both sides. It's also a good chance for me to learn new things, such as handling media storage with Amazon S3 Bucket and diving deeply into responsive front-end design with Next.js/React. Besides that, the platform also needs to ensure secure form handling, data integrity through form validation with Zod, Drizzle ORM PostgreSQL database, authentication with NextAuth, and how to enhance performance and scalability for the project.
Next Steps
- Enhanced Playlist Management: Allow users to create and organize custom playlists.
- Advanced Search & Filtering: Implement more refined search options for better music discovery.
- Performance Optimization: Improve efficiency for handling large music libraries.