ReactJS - Let's Build An Invoice App - PART 1

Summary

In this instructional video, the creator guides viewers through building an invoice application using React.js and Tailwind CSS. The focus of the first episode is on crafting the UI with hardcoded elements, which will be refined and functionalized in subsequent videos. The ultimate goal is to transform the project into a desktop application. Key steps include setting up the React app, installing dependencies like 'uid' and 'react-icons', and structuring the UI with placeholders for future components. The creator also shares a GitHub repository for accessing the finished code and emphasizes the importance of subscribing for updates.

Takeaways

• 😀 The video tutorial is about building an invoice application using React.js and Tailwind CSS.
• 🛠 The initial focus is on creating the UI with hardcoded data, with functionality to be added in subsequent videos.
• 💻 The presenter guides viewers to create a new React application using the terminal and 'npx create-react-app' command.
• 🔗 It's suggested to check for Node.js and npx installations if errors occur, with instructions to install them if necessary.
• 🔗 A GitHub repository link is provided for access to the finished code, emphasizing the 'invoicer_v2' as the correct repository to follow.
• 📁 The tutorial involves deleting unnecessary files from the new React app and restructuring the 'App.js' to build the UI from scratch.
• 📝 The presenter discusses the importance of separating UI components and planning to refactor the code in later videos.
• 🖌️ Tailwind CSS is integrated from a CDN for styling the application, with modifications to the 'index.html' file.
• 📑 The UI layout includes a header, sections for user and client details, dates, a table for items, notes, and a footer.
• 🎨 Tailwind CSS classes are applied to style elements such as buttons, headers, and layout components like the main content area and footer.
• 🔧 The presenter emphasizes the trial-and-error nature of web development, especially when it comes to styling and layout adjustments.

Q & A

What is the main focus of the video?

The main focus of the video is to build an invoice application in React.js with Tailwind CSS, starting with the UI development.

What is the name of the React application being created?

The React application being created is named 'invoice v2'.

What are the two dependencies that the video mentions to install at the beginning?

The two dependencies mentioned are 'uid' and 'react-icons'.

Where can viewers find the finished code for the project?

Viewers can find the finished code on GitHub at the repository 'thomas/invoicer_v2'.

What is the purpose of the 'npx create-react-app' command?

The 'npx create-react-app' command is used to create a new React application.

How can one check if Node.js is installed on their system?

One can check if Node.js is installed by running 'node -v' to see the version of Node.js and 'npx -v' for the npx version.

What is the purpose of the 'window.print' function used in the video?

The 'window.print' function is used to trigger the print dialog so users can print the invoice.

Why are the input fields initially included in the UI later removed?

The input fields are removed because they are intended to be part of a separate component, and should not be visible when printing the invoice.

What is the significance of the comments in the code?

The comments in the code are used to mark sections and indicate future refactoring points, making the code more organized and easier to navigate.

What styling framework is used for the application's UI?

Tailwind CSS is used for styling the application's UI.

What does the video suggest for handling different screen sizes?

The video suggests using Tailwind CSS classes to adjust the layout and styling for different screen sizes, such as 'flex', 'items-center', 'justify-center', and screen-specific classes like 'sm:', 'md:', 'lg:', and 'xl:'.

Outlines

00:00

🛠️ Setting Up the React Invoice Application

The script begins with an introduction to building an invoice application using React.js and Tailwind CSS. The presenter outlines the plan to first develop the UI with hardcoded elements and then incrementally add functionalities in subsequent videos. The aim is to eventually convert the project into a desktop application. The presenter shows a preview of the finished product and provides instructions for creating a new React application, checking for Node.js and npx installations, and accessing the finished code from a GitHub repository. The video also includes steps for setting up the development environment, including installing necessary dependencies and configuring the project files.

05:01

🎨 Designing the Application UI

The second paragraph focuses on the UI design process. The script describes creating a main section with a header, which includes branding and navigation buttons for print, download, and send functionalities. The presenter then details the structure for input fields and client details, which are initially included but later reconsidered for separation into different components. The UI layout is further discussed with the addition of sections for dates, item description tables, and notes to the client. The presenter emphasizes the intention to create separate components for each section and the importance of comments for organization during development.

10:03

📝 Refining the UI Components and Styling

In this paragraph, the script moves into refining the UI components and applying initial styles. The presenter discusses the process of adjusting the main content area with padding and margins for better spacing and aesthetics. The header is styled with flex properties to ensure proper alignment and responsiveness. The footer is also styled with a list of contact details, which are later filled with dummy data. The presenter also mentions the use of Tailwind CSS classes for buttons and other elements, and the importance of adjusting styles for different screen sizes.

15:07

🖌️ Finalizing UI Aesthetics and Functionality

The fourth paragraph delves into the final touches for the UI aesthetics and the beginnings of functionality. The presenter adds styles to the main content area, including background color, border radius, and box shadow for a more polished look. The header logo is styled with typography and spacing adjustments. The script also covers the styling of the article for dates and the notes section, with considerations for hierarchy and readability. The presenter discusses the use of semantic HTML tags and the importance of refactoring for cleaner code.

20:08

🔚 Wrapping Up the Initial UI Build

The final paragraph wraps up the initial UI build with the addition of dummy data for demonstration purposes. The presenter fills in the contact details in the footer and discusses the use of span tags for better control over styling and layout. The script concludes with adjustments to the header for larger screens and a reminder to subscribe for updates on the channel. The presenter also teases the next steps in the development process, which will involve further UI work and the introduction of application functionality.

Keywords

💡React.js

React.js is an open-source JavaScript library for building user interfaces, particularly single-page applications. It is maintained by Facebook and a community of individual developers and companies. In the video, React.js is the primary framework used for building the UI of the invoice application, demonstrating its utility for creating interactive and dynamic web applications.

💡Tailwind CSS

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It provides a set of pre-defined classes that can be composed to create unique designs without writing custom CSS. In the video, Tailwind CSS is used to style the invoice application, emphasizing its role in streamlining the styling process and enabling rapid UI development.

💡Invoice Application

An invoice application is a software tool designed to create, manage, and send invoices to clients. It is a critical component for businesses to track their sales and payments. In the video, the main theme revolves around building an invoice application using React.js and Tailwind CSS, showcasing the process from UI design to functionality implementation.

💡UI (User Interface)

The user interface, or UI, is the space where interactions between users and a program occur. It encompasses the design and layout of the application's visual elements. The video focuses on developing the UI of the invoice application, highlighting the importance of a well-designed interface for user experience.

💡Hardcoding

Hardcoding refers to the practice of writing fixed values directly into a program's source code. In the context of the video, the instructor mentions hardcoding everything for the initial build of the UI, which means setting values like text, layout, and styles directly in the code without using dynamic data sources.

💡Functionality

Functionality in software refers to the specific features and capabilities that an application provides to the user. The video script discusses adding functionalities 'slowly by slowly' to the invoice application, indicating a phased approach to development that will eventually include interactive elements beyond the static UI.

💡Desktop Application

A desktop application is a software program designed to run on a personal computer rather than over a network or from a remote location. The video mentions the end goal of converting the invoice application into a desktop application, suggesting a transition from a web-based interface to a standalone program that can be installed and used locally.

💡npm (Node Package Manager)

npm is a package manager for JavaScript and the default package manager for the JavaScript runtime environment Node.js. It installs and manages dependencies like libraries and frameworks. In the script, 'npm install' is used to add necessary packages such as 'uid' and 'react-icons' to the project, demonstrating the use of npm for dependency management.

💡Components

In React.js, a component is a piece of code that represents a part of the UI. Components make code reusable and modular. The video script refers to building out the UI with components, indicating the use of this React.js feature to create individual, reusable parts of the invoice application.

💡Props

Props, short for properties, are a way to pass data from a parent component to a child component in React.js. They are a key feature for creating dynamic and interactive applications. The script mentions passing down props to components and accessing them, which is crucial for the data flow and interactivity within the invoice application.

Highlights

Introduction to building an invoice application using React.js and Tailwind CSS.

Plan to initially hard code the UI and later add functionalities incrementally.

Intention to convert the application into a desktop application by the end of the project.

Instructions on creating a new React application using npx create-react-app.

Checking for Node.js and npx installation with specific commands.

Link to the GitHub repository for the finished code provided in the description.

Instructions to install dependencies 'uid' and 'react-icons' for the project.

Removal of unnecessary files from the source folder to start with a clean slate.

Explanation of the UI structure and components planned for the invoice application.

Integration of Tailwind CSS via CDN for styling the application.

Design considerations for print functionality to ensure inputs are not visible in printouts.

Use of comments to organize the code and prepare for component separation.

Styling the header, including buttons for print, download, and send functionalities.

Implementation of sections for client details, invoice dates, and notes to the client.

Adding a footer with contact information and styling considerations for different screen sizes.

Discussion on the importance of using semantic HTML tags like 'strong' and 'em' for emphasis.

Final touches on styling the application for a clean and professional look.

Teaser for the next video where more UI work and functionality will be added.

Transcripts

hello everyone and welcome back to the

channel and today we're going to be

building an invoice application in

react.js and tailored css so for this

first video what i want to do is i just

want to build out the ui

so i'm going to be hard coding

everything so everything from all of

this and then in the next videos we're

going to be adding the functionalities

slowly by slowly and then by the end of

it all i hope to convert this into a

desktop application okay so i have this

open just to show you what our finished

products is supposed to look like

and i'm going to be closing this because

it seems to be messing up with my ram

quite a bit

okay so before we get started i just

want to mention that if you're not

subscribed to the channel please

subscribe and ring the notification bell

so that you're always notified of new

uploads

okay so to get started you would need to

create a new react application so you

can open up your terminal and then i'm

just going to cd into my desktop

and into my work folder and then i'm

going to say npx create react app and

i'm going to call it invoice

v2 but i'm not going to let this run

because this is already running i

already have

a folder named this i already canvased

my react application but when once you

run this then it's going to create a new

react application for you now if you try

to run npx and it gives you an error

then you should probably check whether

you have node.js installed by saying no

dash desk version and it should give you

the note version that you're running and

you can do npx dash version as well

which will give you the npx version that

you're running now if you don't have

either of these then you can head over

into

nodejs.org and you can install node.js

on in your system okay now i want to

mention that if you want access to the

finished code then i'm going to leave

this link to the repository in the

description so you can head over to

github.com

thomas for slash invoicer underscore v2

okay and this is very important because

i have a repository called invoicer okay

that's a different one it backfired

so inversely that's v2 is what we're

going to be working on okay and this is

the repository and i'm going to be

committing this regularly as as we

progress with the video so what i've

done is i've opened up vs code in in the

newly created folder invoice v2 and i'm

also running my dev server on localhost

3000

okay so if i go into local 3000 then

this is what i have on the screen

that's very important that you'll be

running your server and then i'm just

going to place this side by side

and then i'm going to close this

okay and i think we should be ready to

begin

but before we do that actually what i

need to do

is i need to install one dependency

or rather two dependencies actually

the first one i'm going to say npm

install uid and then the second one is

called react icons so let this install

and then we should just go ahead and

begin right away so in my inside my

source folder i'm going to grab this

the upload css app test js the logo

report web and the setup tests and i'm

just going to delete these files because

we don't really need them

so delete

okay and once we delete those files then

we're going to get some errors so let's

clear up those errors we've deleted this

file so we don't need it

and we don't need the import as well

we can save this and then we can head

over into app.js

and we can remove these two inputs at

the top

and then we can remove this header

inside here

and then we can remove this div to

return an empty fragment okay fantastic

and then at the top what i'm going to do

is i'm just going to say um

actually this is fine as it is because

we technically just want to build up the

ui right now what i'm going to do is i'm

going to build out everything inside

this app.js and then in the next videos

we're going to be refactoring the code

slowly by slowly okay

and the reason why i'm doing that

actually is just to show you how you can

get your components when you're building

out very complex applications because

this is what happened to me when i was

trying uh when i was testing this out in

the first place

okay so i'm just going to return let me

turn a main here and actually i should

probably link taylor and css as we start

so let's head over into cdnjs so

cdnjs.com

and then let's grab tailwind

come on tailwind

okay so grab this link tag

and then inside public index.html

then i'm just going to paste it inside

here

and actually let's change this title to

inversa

and then let's say create

invoices

clients something like that

and then let's remove this comment

and let's remove this comment as well as

well as the manifest json actually so

everything up to here

and then let's remove

i'm going to change this in a later

video actually so there's no need for

this

okay that should be fine let's press

this back to the side

and yeah we should be

ready to begin fantastic

okay so in updates let's turn a main and

then inside here let's have a section

okay and always does this when i'm

recording i don't know why okay so this

section is going to have an h2 actually

sorry not a section with the section

butter header

this header is going to have a div

and they said this did we're going to

have an h2 that says invoicer

and then outside obviously we're going

to have another div

okay

another div and this is going to be a ul

with three list items so i times three

this first one is gonna say print and i

said these are going to be buttons by

the way so this will be print

download and send okay

so let's save this let's see what you

have we're gonna have that okay let me

just press a comment that says header

and then below this let's say end of

header

like so

and then inside here once again inside

our main let's return a section

this section is going to say let's say

something like um

your details

yeah

your details inside here and then let's

say end of your

details so this means inside here we

need to have an input with a type of

text

okay with a name of text with an id of

text with a placeholder

that says entire your name

set this to required as well

and then below this let's have um

let's have an h2

and actually do you know what i've just

realized we don't need the inputs inside

here

i've just realized that and i'm going to

show you why so inside here we're going

to be targeting technically the name

right so i'm just placing my name for

now

just how to put it inside now uh what i

mean is i don't want this input to be

inside here because when i click on this

print i don't want the input to be

visible right

on the print document and actually let

me just show you what i mean if i

convert this into a button

and then let's say on click let's just

uh let's just say

let's say handle print create a function

called handle print

and then above this let's say const

handle

print

set this to an arrow function and let's

let's just say window.print

okay

so let's see so well with the print

button

print here i've got another text

so print then it should give me this

window right here and then notice how it

still says these three items and then it

also shows the input right now i don't

want the input to be visible inside here

so technically what i'm going to do is

i'm going to go where is it

what is that

okay so inside here i'm going to move

this input

i'm going to remove this input because

we're going to be adding it inside a

separate component and then we're going

to be passing down the props inside this

uh our main component and then we're

going to be accessing it inside our h2

and so on and so forth so i'm going to

remove the input and then below this

we're going to have a paragraph that say

this is the address

so your address like so

okay

and then this is your details so we're

going to create another one says client

details

details like so

let's say end of client details

so let's section

this section is going to have an h2 as

well that says client

client's name and then below this we're

going to have a paragraph that says

client's address

client's address come on

like so

so save this and then below this once

again remember we're just building up

the ui because we want to know how it's

going to look like

so below this we're going to have the

dates okay

so end updates

so let's have let's have let's return an

article

this article is going to have a ul with

three list items so this is going to be

the today's date so today's

date

okay

and then it's going to say due date

what is it let's say due date

what else does an invoice say i

forgotten

okay so this is this is not today's that

this is um

this should say

come on

this should say inverse number

and then this is say invoice date so

invoice

invoice date

and then this should say due dates

so fantastic let's save this let's see

what we have and we're going to have

this okay looking nice looking nice and

then now below this we're going to have

our table okay so table technically our

item description table but that's okay

so end of table

and we're going to create a table inside

here which i don't want to do now

because i really hate dealing with

tables

and then below this we're going to have

the notes section some

okay and then let's say end of notes

and the reason why i'm placing so many

comments is just because we're going to

be creating separate components for all

of these okay

so end of notes let's return let's have

a section

and this section is going to have a text

area once again because i don't want to

add inputs and text areas inside here so

we're going to have a text area and then

let's just have a paragraph that says

notes to the client

these are not like how to pay where to

pay your bank account details and so on

and so forth just in case they missed

them at the top

okay so nice to the client and this

should be having that so end of notes

and then below this let's have our

footer

and then let's say end of

butter now the food is going to be

interesting

water

emit isn't working

so the food is going to say um we're

going to have a ul okay

ul with let's say how many list items

let's say about

let's say five okay so this one is going

to say your name okay which you're going

to get from this okay so when you pass

down the props we're going to be

accessing the props that we pass inside

here

okay so this this is going to be your

name

uh this is going to be your email

address this is going to be

phone number

okay and then this is going to be bank

this is going to be bank account or

rather account

account number bank account number right

and then probably we should add another

one that says website

and then once we have website probably

what i should do is

between bank and account number i should

have

um accounts holder name

or rather account hold i think that

would be disproportionately descriptive

enough

okay so let's save this let's watch over

the screen and we have this looking ugly

so let's tell this out

let's start this out remember this is

the desktop application first so i don't

really intend it to be working on mobile

screens all that well but we're going to

be studying it for mobile screens as

well

so in the header let's have a class name

flex and flex column

and

item center and justify

center and imagine bottom of five

okay so that we're going to have that

let's go inside this ul give this a

class name of flex

item center and justify

justify between and then let's say flex

wrap

so that they're going to automatically

go into the next line once this uh width

is completely full

and that these two are going to be

buttons so let's add a button here that

says download

and then let's remove this let's have a

button that says send so for the for the

send button we're going to create a

model for the download button we're just

going to say download um the invoice

okay so this this first button

is going to have a class name of

btn.print

okay so a class number btn

unbeaten.print so let's just let me just

copy this

and paste it inside here this is going

to say btn download

and then this is going to say btn send

okay

so save this and nothing really changes

because we're going to be standing

styling out the buttons later

and then for this section one let's say

uh what do you want to do what i want to

do is say class name of flags and flex

and should be the one

um let's no not flex and sorry but items

end

should be the class

go to the left come on ready or justify

end

item center

and justify end there we go

there we go and then let's say flex

column

come on don't do that items end now

flexbox can be a bit confusing okay so

items end and justify end which will

take it to the end and i've just

realized that probably this main should

have a padding all around

so class name of padding of five volt

round push everything inwards just a bit

on small screens and then let's say that

for

medium screens then the max width should

be medium let me see how this would look

too small

let's say let me let me say for large

screens then the max width should be

large

still too small

excel

okay and then let's say for large

screens let's say mx auto push it to the

center there we go and then probably

what i should do is i should go into the

body

into my index the index.css and i should

give the body a background color

of f1 f1 f1 a very slight gray

there we go

and then what i'm going to do now is go

inside my main

right hand side and say bg white

and we should have that looking

fantastic and probably now instead of

this being a magic a padding sorry i

should make it a margin so that uh the

white background pushes in once

like so okay

and then actually let me just add a

padding all around as well so that this

is not all the way to the edge

web development is a lot of trial and

error

so let's have a rounded borderless i'll

have a slight box shadow

like so looking fantastic looking

fantastic just so that it looks a bit

elevated

so i'm going to have that and then let's

go inside this where is it this h2 so

for a logo give this a glass name of

front bold

okay so front what let's say uppercase

let's say tracking

white and let's say text dash for xl

okay

we're going to change this colors later

don't worry about it let's say margin

bottom of three pushed away from these

three buttons okay

and then let's go inside and actually

you know what probably i should have

styled this out

inside my css

but that's okay we're going to refactor

quite a bit

and actually let me change this to a and

each one

okay

so your name your address let's deal

with so the client name and client

address are going to remain on this side

and actually they're fine as they as it

is

and this is the details this is client

details so this is fine

probably let me start these two h2s

because i want them to be bigger so

let's say text dash for excel let's say

uppercase

see how that looks

okay so now this this isn't really good

on small screens right

so let's change this to text excel

so i don't have that okay fantastic

now inside this article let's give this

article a class name of margin top of

five and actually i've just remembered

that this section should have a margin

bottom of five

actually imagine top of five just so

that it pushes away from this so there's

just a bit of

spacing between this and this

and then we're going to do the same

thing that we did on this we're going to

do the same thing here

and probably this should be on bigger

screens but

[Music]

no

let's just do it here so i'm going to

copy these styles copy these and paste

them inside here

actually is that correct

okay there we go

that being said actually we don't really

we don't really need the flex column

here actually

we don't need the flex column because

this only has one item inside which is

the ul okay if you was telling dc the

list items inside the ul then we would

need the flex column

okay so we don't need that and then

let's say margin top actually let's

imagine y of fire so imagine at the top

and bottom

fantastic and then we're going to grab

this place it inside a span

and grab this

place it inside a spawn

and then grab this place it inside a

sponge

and then let's grab all of these pants

and the length let's just say class

name of a front pole

okay

so the span is going to be front pulled

and then the text inside here what we're

going to have inside here is the date is

not going to be bold unless i'm doing

that wrongly i should be outside of the

span

right inside here so the text is not

going to be bold in front okay just so

that it brings a bit of a hierarchy

which is much

uh it actually looks much better so let

me remove this

okay

fantastic

and then let's go into notes to the

client actually we don't really need to

style anything inside here but let me

just have a deal

inside this table that says this is the

table

okay just to separate it out let's give

this div a class name

of margin y of five

likes also notes to the client and then

give this section a class name of margin

bottom of five

push right from that and then let's go

inside the footer and inside this ul

give this a class

name of flex

and flex wrap

okay and then let's say items that

center and justify dash between

justify

between

okay not between but center sorry

center so that we're going to have this

fantastic so let's just add some dummy

data inside here

let's add some dummy data

let's say

this

for your email let's say

gmail.com

phone number let's say 07

sorry zero seven one two three four five

six seven eight

bank let's say

bank

account

account holder that's me account number

let's change this to one two three four

one two three four five six seven eight

time

and for the website let's do this

ts come on i can't spell my own website

let's see that okay

okay

now remember that uh once we do actually

not let me just do it right now let me

not postpone it let's have grab this

basically set as pan

grab this place it inside a spam

now technically let me just mention it

by doing technically you can grab this

and place it inside a bolt tag and it

would still work okay it's it would

still work as you'd expect okay but i

don't want to do that because i don't

have a bit of

leeway when installing this out

that's why i like using spawns

is so

spun and instead of using the ball tag

if you want you can actually use the

strong tag

as well

it still works still works the very same

way but i still like using sponge

so spawn spawn and then

spawn

okay

grab this placency in place it inside a

spawn and then finally grab this and

place it inside a span now let's grab

all of these pants and by that i'm

adding multiple casters

by holding down the alt key and then

clicking on where i want the cursor to

be

so right there right there right there

and right there

give all of this a class name of font

dashboard

fantastic

fantastic okay

this is looking

nice for the initial ui but then this is

a bit too small actually you know what

let me just change this

let me change where is it

this

let me move this let me check something

okay so let's say that for excel screens

then the max width should be for xl

and then let's say for xl screens then

let's say the mx should be auto

okay so we're going to have that

now once we add start adding in all the

items in our application then this is

going to fill up and it's going to go to

the bottom so don't worry about this

too much

and then probably one thing that i

should do is reset this some of this

turning for the header

where i'm going to say that for large

screens let's say for excel screens then

the flex should go back to row

like so and then for xl screens then

let's say justify

just t

by between

we should take this to the end fantastic

okay so in the next video we're going to

start dealing with more of our ui and

then starting starting to add a bit more

of our functionality so see you in the

next video

if you're not subscribed to the channel

please subscribe and ring the

notification bell so that you're always

notified of new uploads

[Music]

[Music]

you