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/Rile...
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.