Build a Web App Music Player with AI and 2 SCREENSHOTS.
Building a Retro-Style Music Player Web App with AI (specifically Claude 3.5 Sonnet) without prior coding experience. This is yet another of my attempts to create. AI enables us all to become developers, designers and artists. Watch me struggle to build something cool and learn with me. --------- My website that I created, and will be my website going forward https://create.inc/ Claude: https://claude.ai/new Replit Template to fork: https://replit.com/@RileyBrown24/SUNO-STATION?v=1 Google Firebase for back end: https://firebase.google.com/ Suno to create song (at the end) https://suno.com/create --------- The key lessons we're learning: - How to use AI to generate code for both front-end and back-end development - Setting up a Firebase backend for user authentication and data storage - Implementing user rules (admin vs. regular users) - Creating features like: files upload, music player, storage, database and more. - Adding interactive elements like audio playback - Deploying a webapp and connecting it to a custom domain The main tools mentioned were: - Claude 3.5 Sonnet (AI assistant) - Replit (online code editor and hosting platform) - Firebase (backend as a service) - HTML, CSS, JavaScript, and React (for front-end development) - Midjourney (for generating images) - Suno (for generating songs) - Online MP3 cutter (for editing audio files) TIMELINE: --------------------------------------------------------------------------------------------------------- 00:00 Introduction and Project Overview 00:18 Designing the Retro Website 02:30 Setting Up Firebase 05:07 Setting up Replit and Building the Frontend Components 09:52 Configuring Firebase Authentication and Storage 12:50 Testing and Debugging 13:14 Creating the first song using Suno 13:38 ChatGPT Lyric Generation 15:05 Uploading the first song 16:08 Testing and Uploading Songs 19:09 Design and Functionality Improvements 23:35 Final Adjustments and Testing
