ReactJS - Let's Build An Invoice App - PART 1
Summary
TLDRIn 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
đ ïž 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.
đš 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.
đ 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.
đïž 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.
đ 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.
Mindmap
Keywords
đĄReact.js
đĄTailwind CSS
đĄInvoice Application
đĄUI (User Interface)
đĄHardcoding
đĄFunctionality
đĄDesktop Application
đĄnpm (Node Package Manager)
đĄComponents
đĄProps
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
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
Voir Plus de Vidéos Connexes
Getting Started | Mastering React: An In-Depth Zero to Hero Video Series
Build a đ„ Chat App with FastAPI and React JS (đŸ Discord Clone)
React tutorial for beginners âïž
Cara Install React Native + Full Setup [2024]
Components, Props and JSX in React | Sigma Web Development Course - Tutorial #106
React Router Tutorial - 3 - Configuring Routes
5.0 / 5 (0 votes)