What App Can I Build in 15 Claude Prompts?

Summary

In this video script, Riley Brown demonstrates the development of a web app called 'Big Mood' using a template and AI-assisted coding. Riley guides viewers through the process of setting up Firebase, integrating Google authentication, and creating a user-friendly interface for uploading images, adding text in various fonts and colors, and organizing content into boards. Despite some styling and functionality issues, the script showcases the app's potential and Riley's ambition to become a senior developer by leveraging AI without writing traditional code.

Takeaways

• 🛠️ The script describes the process of creating an app named 'Big Mood' that allows users to upload images, text, and quotes in different fonts and colors, and arrange them in a grid format to create various boards.
• 🔗 The video demonstrates how to embed YouTube videos into the app using embed codes, although there is a mention of potential issues with YouTube's domain restrictions.
• 🔑 The process involves setting up a Firebase project for 'Big Mood', including creating a Firestore database, setting up authentication, and configuring storage.
• 📝 The script mentions the use of a template and the need to customize it, including changing the background and adding elements like dots for a cleaner layout.
• 📱 The app includes features for signing in with Google, creating and editing boards, and saving progress, with an emphasis on a smooth user experience.
• 🎨 There are discussions about styling issues, such as fixing the appearance of edges, resizing images, and adjusting text fonts and colors within the app.
• 👨‍💻 The speaker, Riley Brown, outlines a personal challenge to become a senior developer without writing a single line of code, relying on AI to generate code.
• 📈 Riley intends to document the entire journey, including building various apps, with the aim of demonstrating the capabilities of AI in software development by the end of 2025.
• 🌐 The script mentions the importance of configuring the correct domain in Firebase to avoid unauthorized domain errors when testing the web app.
• 🔍 The video script includes troubleshooting steps, such as checking for errors in the console and making necessary adjustments to the code to fix issues like invisible buttons or styling problems.
• 📚 Riley plans to release a new template and provide instructions on setting up a Firebase project to facilitate the use of the template for app development.

Q & A

What is the purpose of the app 'Big Mood'?

The app 'Big Mood' is designed to allow users to upload images, add text quotes in various fonts and colors, and arrange them in a grid format to create different boards.

How does the video script describe the process of embedding a YouTube video into the app?

The script explains that you can go to YouTube, grab a link, hit embed to get the embed code, copy it, and then paste it into the app to load the video. However, it mentions an issue with playing the video due to YouTube not liking the dev domain.

What is the issue with the initial implementation of the board in the 'Big Mood' app?

The initial issue with the board implementation is that the images cannot be resized properly, and the text on the board cannot be edited or added easily.

How does the script mention handling the styling and layout of the app?

The script discusses changing the background, adding dots for layout, and creating clean layouts. It also talks about fixing the edges and implementing a gradient from gray to the top.

What is the significance of the CLA (Custom License Agreement) chat mentioned in the script?

The CLA chat is a tool used to create and customize the app 'Big Mood'. The script mentions that the app was developed within a single CLA chat, showcasing the efficiency of the process.

What is the role of Firebase in the development of 'Big Mood'?

Firebase is used for creating a new project, managing authentication, setting up a Firestore database, and handling storage for the app 'Big Mood'.

What is the main challenge the creator faces when trying to embed videos from YouTube?

The main challenge is that YouTube does not seem to support the dev domain, which results in an error when trying to play the embedded video.

How does the script describe the process of adding text to the boards in the app?

The script describes a process where users can add text to the boards, change the font, size, and color of the text, and position it on the board.

What is the creator's goal regarding their development skills by the end of 2025?

The creator's goal is to reach a senior developer level of coding ability by the end of 2025, but without having written a single line of code themselves, relying solely on AI to write the code.

How does the creator plan to document their journey to becoming a senior developer?

The creator plans to document their journey by building and showcasing their projects on their central website, making videos, and sharing their progress and learning experiences.

What is the creator's view on the role of AI in learning and development?

The creator believes in the power of AI for learning and development, stating that they love learning new stuff and will keep learning new skills while documenting the process.

Outlines

00:00

🛠️ Building a Custom App with Firebase and YouTube Integration

The speaker discusses the process of creating a custom app called 'Big Mood' that allows users to upload images, text quotes in various fonts and colors, and arrange them in a grid format to create different boards. The app integrates with YouTube, enabling users to embed videos. The process involves setting up a Firebase project, configuring authentication, and using the Firebase console to manage the app's features. The speaker also mentions using a template and a split view for efficient development.

05:01

📐 Developing Components for a Grid-Based Application

This paragraph describes the development of individual components for the 'Big Mood' app, including a draggable box and a navigation bar. The speaker explains the process of creating these components, such as naming files, ensuring proper export statements, and dealing with potential errors that arise during development. The focus is on the technical steps required to build the user interface and the necessary backend configurations.

10:01

🖼️ Enhancing Image and Text Functionality in the App

The speaker addresses issues related to image and text manipulation within the app. Initially, there were limitations in resizing and dragging images, as well as typing text. The paragraph details the troubleshooting process and the eventual fixes that allowed for better user interaction with the app's content, including uploading images, adjusting their size, and adding text with different fonts and styles.

15:05

🎨 Refining the App's User Interface and Experience

In this section, the speaker focuses on refining the app's user interface, including text and background color changes, font selection, and the overall aesthetic of the app. The speaker also discusses the functionality of saving boards and the ability to switch between different user accounts to view personalized content. The goal is to create an engaging and visually appealing user experience.

20:06

📝 Adding Notes and Videos to Enhance Content Creation

The speaker explores additional features for the app, such as the ability to take notes on videos and match text styling to specific examples. There's a mention of limitations with highlighting and the need for future improvements, such as adding the ability to embed videos from YouTube, which currently faces domain restrictions. The paragraph emphasizes the continuous development and enhancement of the app's features.

🚀 Future Plans and the Vision for 'Big Mood' App

The final paragraph outlines the speaker's vision for the 'Big Mood' app, including plans for a fun landing page, detailed setup instructions for users, and the speaker's personal goal of becoming a senior developer without writing code, relying on AI for coding tasks. The speaker expresses enthusiasm for the journey and invites viewers to follow along on their development adventure.

Keywords

💡Background

In the context of the video, 'background' refers to the visual setting or environment of the digital workspace where layouts are created. It is a key component in designing the user interface, as it sets the tone and aesthetic for the app. The script mentions changing the background, implying customization options that allow users to personalize their experience.

💡Layouts

Layouts are the structured arrangements of content within the app, allowing for organized presentation. In the video, the creator discusses the ability to change and create clean little layouts, indicating a feature that enables users to design the spatial organization of their digital content.

💡YouTube Link

The term 'YouTube link' in the script refers to the URL of a video hosted on the YouTube platform. The video demonstrates embedding such links into the app, allowing users to incorporate multimedia content into their boards, enhancing the interactivity and richness of the user-generated content.

💡Embed Code

Embed code is a snippet of HTML that allows content from one website to be inserted into another. In the video, it is used to integrate YouTube videos into the app's interface, showcasing the app's capability to display external media content seamlessly.

💡Firebase

Firebase is a platform developed by Google for creating mobile and web applications. The script discusses using Firebase for creating a new project, managing authentication, and setting up a database and storage, which are essential backend services for the app's functionality.

💡Authentication

Authentication in the video refers to the process of verifying the identity of a user, typically through sign-in mechanisms. The script mentions setting up Google authentication for the app, allowing users to securely access their accounts and ensuring a personalized user experience.

💡Database

A database, as mentioned in the script, is a structured collection of data. The video describes creating a Firestore database in Firebase, which will store and manage the data for the app, such as user information and content created by users.

💡Draggable Box

In the context of the app, a 'draggable box' likely refers to an interactive UI element that users can click and drag to reposition within the grid. The script discusses creating a component for this feature, indicating a core functionality allowing users to arrange content dynamically.

💡Styling

Styling pertains to the visual design elements and aesthetics applied to the app's interface. The script mentions issues with styling, such as invisible buttons and text, and the need to fix these to ensure a visually appealing and functional user interface.

💡Template

A template in the video is a pre-designed structure or blueprint that serves as a starting point for creating content within the app. The script refers to using and customizing a template to expedite the development process and provide a foundation for the app's design.

💡Sign In

Sign in is the action of logging into an application or service using credentials. The video script describes the process of signing in with Google, which is a common authentication method that provides a quick and secure way for users to access the app.

💡CL A Chat

CL A Chat seems to refer to a specific session or instance of conversation or chat, possibly related to the development process. The script mentions creating an app within 'One Singular CLA Chat,' suggesting a focused and singular effort or time frame for development.

Highlights

Creating a new app called 'Big Mood' that allows users to upload images, text quotes in various fonts and colors, and arrange them in a grid format.

Integrating YouTube video embedding into the app for multimedia content.

Utilizing Firebase for app development, including project creation, analytics, and authentication.

Setting up a Firestore database for the app to manage data.

Enabling Google authentication for user sign-in.

Configuring Firebase storage for image uploads within the app.

Debugging issues with unauthorized domains in Firebase authentication.

Creating and editing boards within the app for content organization.

Implementing a drag-and-drop feature for arranging content on boards.

Addressing styling issues with Tailwind CSS to improve the app's appearance.

Adding text editing capabilities with different fonts and colors.

Incorporating user feedback to fix bugs and enhance app functionality.

Demonstrating the app's ability to save and display user-created boards.

Exploring the potential for adding video embeds from platforms like YouTube.

Discussing plans to release a template for the app development process.

The ambition to become a senior developer without writing code, using AI to generate code instead.

Documenting the journey of building apps and learning new skills with AI assistance.

The vision of creating a fun and engaging landing page for the app template.

Teaching users how to set up their projects to utilize the provided template effectively.

Transcripts

if you take a look at this we can easily

uh add change the background here and we

can create these clean little layouts I

added these little dots if we were to

you know go to YouTube or something

let's grab a YouTube link we can hit

embed and we can copy this whole thing

we can take it back here can hit add

video and we can paste in this embed

code and it will actually load up like

this and obviously we can uh sign out we

can sign in with Google I can sign in

with that same account that I was just

using it should show all of my boards on

the homepage that's what I made in One

Singular CLA chat with the new templat I

want to create an app that allows me to

upload images text quotes in different

fonts colors and move them around in

Grid format and basically create a bunch

of different boards and check this out

so we're going to paste this in and what

it should do is it should give us some

links right here so it gives us a link

to a template that we're going to click

on and we're just going to open this up

and we are going to use this and I'm

going to put big mood that's going to be

the name of the app and we are going to

use this

template now what we're going to do is

we're going to go

back the next step is we're going to

click on this Firebase link and hit

continue and we're going to create a new

project and we're going to call this big

mood once again and we're going to turn

off Google analytics and then we're

going to create the

project while that's loading we're going

to go to this repet and we're going to

open up the secrets Tab and we are going

to full screen this now what we're going

to do is we're going to go back to this

uh Firebase Tab and we're going to open

it in a split view and now we have this

open in this nice clean split view here

and we are going to press this web

button and we're going to put in big

mood for the name of the new app that

we're creating we're going to Press

Register App then it's going to give us

these tokens in which we are going to

paste over so let's go ahead and copy

this

show you the whole thing add secret add

secret add secret add secret add secret

add secret boom we are done we no longer

need to be in this split view now what

we're going to do is we're going to go

back to uh Firebase and we're going to

hit continue to

console first thing that we're going to

do is we're going to go to build

firestore database and we're going to

press create database you don't need to

put anything on this page and we're

going to start in test mode and we're

going to hit create once this database

is created we're done with the database

now what we're going to do is we're

going to hit build authentication and

we're going to hit get started and we're

going to hit Google and we're going to

hit enable and we're going to hit this

email or put whatever email you want in

for the support email for

project one more simple step we now need

to go to build and we're going to hit

storage and we are going to get started

and we're going to start in test mode

we're going to hit next and done and now

we are done for a bit on this right here

so we now set this up and we put our

secret Keys into replate so we can un

full screen replate this app should run

our template is set

up look at this we have a full app and

we should be able to sign in we're going

to get one little error but it actually

doesn't matter so we can sign in with

Google

oh well it's an unauthorized domain so

what we need to do is we need to copy

this Dev domain right here basically

granting access for Firebase uh to for

that domain we need to go to

authentication settings authorize

domains add domain past it in add now

when we go back to Big mood and we

refresh the web app and this is

basically a little environment for you

to test your application we can hit sign

in with Google and look at this we are

already signed into to our app look at

this we can this is the base template

that we start out with and we can create

a post hello my name is Riley and I can

post what we're building is this app

right here so we need to make changes to

this homepage so I'm clicking on home

home and right now we are going to begin

our copy and paste method right here so

we're going to go to um we're going to

go to big mode and there is a homepage

right here so we're going to copy and

paste and now we're in copy and paste

mode create edit board so we need to

create a new component for editing board

so this is going to be create edit board

um and it's going to be create edit

board uh. TSX so we're going to come

over here we're going to go into

components and we're going to press add

file and we're going to paste this in

Dot TSX and we're going to come back and

actually grab the content and we're

going to paste it in now we're going to

come back grab the app. TSX make sure

it's full code we're going to copy this

and we're going to hit at. TSX paste

this in now what we need to do is this

board component got cut off here Cloud's

response was limited so here's the board

component and now we need to create a

board component so we're going to copy

this and we are going to go back to the

app and we are going to go into

component add file board

word. TSX and we're going to paste this

in here draggable box component so let's

create a draggable box component we're

going to come back here add a file and

I'm just going to call this d. TSX

because I just copied this and then I

can come back for the

name

um okay so Clause response was also cut

off here so finish what you were

doing and so now that it's created okay

so now we need this new app.

TSX navbar now we're creating a Navar

component so this is navb bar. TSX so

let's add a

file

nav bar. TSX and one thing you should

always make sure that in this export

default Navar it should match the name

of this with and pay attention to

capitals and then here I'm going to say

one give me the full file structure

uh in text of the files that we need

okay so it's going to be called dra uh

dragable box. TSX so we can go back here

draggable box.

TSX boom so we're going to copy this

right here install dependencies anytime

you're installing anything or you see

npm or if you see pip but that's uh

that'll be with python I believe just

immediately think I need to go to Shell

so I need to type in Shell I know it's

right here I just want to show you how

if you ever lose it you can find it but

for me it's right here and you're going

to click on this black rectangle and

you're going to paste this in and press

enter and here it gave us this Tailwind

Doc config.js and we're going to go V.C

config.js and we're going to paste this

one in right here now what we're going

to do is and we got this error that's

okay copy we'll paste this error in here

and anytime you get an error just paste

it back

in and it's just a minor uh syntax ER it

looks like and we are going to press

we're going to go to V.C config.js

V.C config.js and we're going to paste

this

in and we're going to go to TSC

config.js

and we're going to paste this in TS

config so it says we're getting an error

here again when we try and run it but um

I don't understand this one another

error

to just replace this board

file and we will go like this we will go

Source board paste this in now we're

going to hit

run all right so let's see what this is

so this is your boards we I don't see

anything here I don't see anything to

sign in

um Let's do an

inspect and so if you open up your web

view in a new tab and then you go to

console

uh we will be able to see the errors in

real time so this is the homepage

doesn't look great so far but there is

this little button with no text so we're

going to press that

oh

Riley Riley's Vibes a place where Riley

can Vibe out and make Vibes and we will

make this public oh there was no button

there but I assumed it should have been

there um and we can create this board

all right so nothing is showing up for

whatever reason for whatever reason

nothing is showing up but like I can

press buttons here look at this so like

there's like invisible buttons up here I

can hit back right you see it just

lights up right there so something's

going on in The Styling okay the site is

working but everything is white and the

buttons have no text or they are white

and invisible there there is no

styling and let's go ahead and see what

cloud says here all right we're going to

check our Tailwind .c config.js

oh wow okay there it is there it is I

think that might be all we

need so here we go we might not like

these colors okay there we go this is

what our site looks like right here we

have a home we have a create board page

which can also be accessed via this

right here uh we have a sign out button

right and this is the same template

signin page you can change all these but

we sign in with Google and I can sign in

with a different account than I signed

in before and this should in theory take

us to the homepage and I should see

nothing right and I should be able to go

home and hit create board um and we'll

make this account is John so John's

board this is where I keep stuff and

yeah so we're going to make this public

create board now if we click on create

board we have this little board here

upload image let's upload a

screenshot okay and we can drag it

around no way wait okay you can't you

don't drag it you click

wait okay it's not super great can we

resize yes okay no

uh come on hold hold

it darn it okay that's okay you can't

quite resize and this animation doesn't

look great but you can upload images we

can upload another image I'm

sure okay this is my thumbnail for my

last video they they seem to be all

square so this is act oh oh oh no come

on please let me do that that looks

clean okay that's one thing we'll tell

Claude here so now we can add text uh

and it gives us Times New Roman H

uh where do you do it where do you

type oh it's okay so we can't quite

resize the images but that's okay so we

can't type yet and we can hit save

board uh let me let me see here um let

me see this real quick so upload

image um we can upload this color palet

image that we had right here we can move

it kind of and we're going to inspect

this uh we're going to go to console I'm

going to see if there's any issues with

saving the board save board okay that

looks good so if we leave the page right

and we um let's

completely um like let's refresh this

page

so we completely refresh the page and we

can hit Riley's VI and look it's in the

same location so we're struggling with

this format like it doesn't have like

clean movement but and we can add

text it's you can't really see it like

Times New

Roman okay so basically we need to go to

Claud and we need to say I

cannot resize the uh

images or or the text on the board but I

can move them and they can be saved so

nice

job okay so we need to change dragable

box so we're going to copy this over

we're going to go to dragable box we're

going to paste this in and now we're

going to go to index.css and we're going

to paste this in oh was that supposed to

be like that hold

on

um I will now uh run this let's see if

this

works looks all good we are now uh AO we

are automatically signed in we obviously

need to change these colors but let's go

ahead and check this out okay very weird

looking why is it like

that interesting

okay um okay so now they look kind of

weird

the

edges I will give you screenshot GFC

make CH I need to

implement full code only for the ones I

need to fix okay now we need screenshot

so we're here we're just going to

screenshot this right here because they

do they look super weird also when I try

to resize it snaps back to original and

doesn't work and doesn't

stay okay so just change dragable box

now let's go back let's go to dragable

box and we're going to paste this in

just like that this looks a little bit

better okay so the formatting seems to

be fixed I'm going to refresh this real

quick we go to the boards they did just

move a little bit so can we still move

them yes can we

resize yes so now we have clean

resizing okay so we can resize move

right here now we can uh create Times

New Roman new text and now we can re all

right look at this comeing together

um okay okay well we uh this is the

thumbnail that I am using

today I am going to use this to make

something awesome I have the best plan

to make this

amazing okay so we can obviously change

the colors right cool oh and we can do a

little match like that change it to

Courier um and I gu guess we should just

we'll fix that later what the can we

make the font selection and the F

section and color selection be above the

typing window or by default have the

text um window or a little popup setting

so it's not in the way and also also can

you add other creative fonts um GFC for

all the code you for all the files that

need

changing okay board. TSX need some

changing

um okay now it doesn't even let

us I click on the typing on the font

area the settings disappear can we fixed

this um

please um let's run this up like this so

let's see let's just refresh it here go

in okay so we can click on this doink

wow now we can use

garamound and we can we can now

type we can type here and we can change

the font wait these different fonts

comic Sands nice okay now we can go like

this and

um yeah we can add this right here can

we make this larger so we can make it

larger like this and we be able to

change the color of the text of the

background of the text um I guess

modules or text squares and then three

when I press save they uh nothing really

happens can you please uh fix um I say

generate full code for all files we need

to fix and we

enter this is the full board now we're

going to go to

board and paste this

in and we're going to restart this we're

going to go like this click on this

right here now in theory we should be

able to slide this over and up now the

text by default is down a few lines

which is good so the text is lower let

me see on a new one right uh add text

right it starts out two lines down so we

got that so now we can add text we can

very quickly change it to um

corer hello there my name is blah and uh

can we change the background or

no oh we can let's go look at this so I

could match this like super light purple

right here and then we're going to want

to change the text

to White and so now let's change this I

don't like this font

impact okay we do have an X nice we can

delete things so now we have this clean

little module this seems pretty cool

man nice so we can create this now can

we save it saved successfully let's go

look at this we've created this in this

is one CLA chat we haven't even reached

the 10 you have 10 CLA chats left right

this is just a single CLA chat we

started with the template with this

simple idea and the app that we have

right now go home we can create boards

right we can create a board hello this

is my second board and we can add a

description we can make it public go to

the home feed we can create the board

hello this is my second board we can

upload an image right we can upload an

image of this color palette we can uh we

can move it this animation is not great

I will give you I will say that but we

can resize the image like this and we

can move this here we can add text and

what we can do with the text is we can

make it larger and we can change the

font of this this we can go palentino

and we can change the size of it let's

go uh let's go like

35 let's change the color of the

background and we'll match this color

right here we can change the font to

maybe this color right here hello there

this is sick Bro and then we can move

this right

here and we can hit save board saved

successfully we can go home we can

create a board we can sign out I can

sign with my other account and this is

all before reaching a the limits right

this is all before reaching the limits

on CLA that is amazing let's keep going

11 prompts later we are at the end of my

CLA chat we basically we got cut off

here we got cut off here and this is

where we left off right here look at

this and so I've basically only made uh

adjustments to The Styling so it's

basically the same app except we fixed a

few bugs and if you take a look at this

we can easily uh add change the

background here and we can create these

clean little layouts I added these

little dots I can't there we go like

they we've added these little dots here

we've made the whole everything uh kind

of black around the edges we have the

it's like gray uh gradient up to the top

and we have uh we can save the board and

we can also add video embeds however it

doesn't work because I don't I think

YouTube doesn't like the dev domain and

so it just gives me an error but if we

were to you know go to YouTube or

something and we were to grab a all

right guys glasses M let's grab a

YouTube link we can hit embed and we can

copy this whole thing we can take it

back here and uh we can hit add video

and we can paste in this embed code and

it will actually load up like this

except if I try and play it it'll give

me an error and I believe that's YouTube

not liking I think I this is an easy fix

but imagine if we can embed videos here

I think this would be kind of a Vibe and

we can obviously change the sizing and

make it you know maybe it's up here in

the top corner and then we can add some

notes here like we could just take notes

on this

video and uh yeah okay well actually I

want these notes to match uh this one

right here and let's go like this now

let's let's take some notes oh wait no

we want this to match this right here

nice can we make this bold I actually

don't know actually we can't even

highlight on this yet we got to add that

ability uh later uh but yeah this is

neat um yeah and obviously we can uh

sign out we can sign in with Google I

can sign in with that same account that

I was just using it should show all of

my boards on the homepage this is all of

the boards right here we can create a

board test

board good uh we will keep this one

private and so we should right here we

should see this this one that's private

here it is and we can add

text and yeah that is the

app anyway

um yeah that's what I made in One

Singular CLA chat with the new template

that I will be releasing later this week

once we perfect it and make it perfect

and uh yeah we're going to make it a fun

experience and make a fun landing page

for the template and we're going to

teach you exactly how to set up your

Claud project to get it to give you the

perfect links and to dive straight into

that template so you can create at

whatever app that you want uh my name is

Riley Brown and I'm going to become a

senior developer without writing a

single line of code and uh luckily I'm

I'm just going to prove it to you I'm

not going to I don't have to say

narratives I have to be like oh look at

the progress of AI I'm just going to do

it I'm just going to do it right like I

will do it uh right here on this channel

so if you want to follow along with that

I'm going to post all of the things that

I build on my central website so I'm

building out all of the websites of

everything that I build and I'm just

going to build stuff for the next year

and a half and by the end of 2025 I will

be a senior developer or code at a

senior developer level except I will

have never written a line of code I will

only have used AI to write code

and I've talked to some devs who

actually think it's possible think it's

going to be really hard work but I'm

actually going to do it I'm going to do

it I'm letting you know that and you can

follow along with this journey uh and

I'm not even saying I'm smart for doing

it I think AI is about to just keep

progressing and I love learning new

stuff and so I'm just going to keep

learning this skill and I'm going to

document the whole process so thank you

so much for watching I'll be making

videos hopefully every day uh very soon

I'm loving this series of just

constantly building and learning it's so

much fun for me I can't think of a

better way to spend my time and so I

will see you here in the next video much

love peace