Building a Full-Stack Website with AI - No Coding Experience
Creating a full website with a front end and back end from scratch using AI (specifically Claude 3.5 Sonnet) without prior coding experience. This is just me challenging myself. this is by no means a comprehensive tutorial because at this point i had not yet done it myself. This is rather me, determined to create.... creating Links: --------- My website that i created, and will be my website going forward https://create.inc/ Claude: https://claude.ai/new Replit Template Link: https://replit.com/@RileyBrown24/Riley-Browns-Template-paste-artifact-in-Apptsx?v=1#src/App.tsx 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 roles (admin vs. regular users) - Creating a course management system with lessons and progress tracking - Adding interactive elements like comments and audio playback - Deploying a website 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 and logos) - Suno (for generating background music) - Online MP3 cutter (for editing audio files) TIMELINE: --------------------------------------------------------------------------------------------------------- 00:00 - Introduction and project overview 07:21 - Using Claude Artifact 21:00 - Setting up Firebase backend and user authentication 30:00 - Adding Firebase Collections (database) 39:10 - WE DID IT! 45:20 - Implementing lesson editing functionality 54:00 - Separating code into manageable chunks for easier editing 56:00 - Access control for signed-in users 01:01:32 - Connecting the custom domain (create dot inc) 01:02:41 - Showcasing additional features (user count, music feature) 01:05:26 - Discussing future plans and improvements -------------------------------------------------------------------------------------------------------------------- This video demonstrates the power of AI-assisted development, allowing someone with no prior coding experience to create a functional, feature-rich website in a relatively short time. It highlights the iterative process of development, problem-solving, and the importance of breaking down complex tasks into manageable chunks and relying on AI for help.
