Scribd
Upload
30 views14 pages

Building The Amazon Clone APP

The document outlines a project to build a full-stack Amazon clone app using React, featuring e-commerce functionality such as user authentication, product management, and payment processing. It provides a step-by-step guide on setting up the project, integrating Firebase for hosting and database management, and implementing various components like headers and search features. The project aims to enhance the developer's skills and improve job prospects in modern web development.

Uploaded by

compnetworxxx
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
30 views14 pages

Building The Amazon Clone APP

The document outlines a project to build a full-stack Amazon clone app using React, featuring e-commerce functionality such as user authentication, product management, and payment processing. It provides a step-by-step guide on setting up the project, integrating Firebase for hosting and database management, and implementing various components like headers and search features. The project aims to enhance the developer's skills and improve job prospects in modern web development.

Uploaded by

compnetworxxx
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

AMAZON PROJECT

Building the Full Stack Amazon Clone APP with REACT


JS
This is the app you're going to have fully ecommerce
functionality backend and Frontend
Login Page Email Address Products Checkout Real
Payments
React Hover Effects
Slides
Cart with React Flip move
Payment processing

This Project on your portfolio with fully ecommerce


functionality backend and frontend this alone app will let
you many many jobs and you 're going to learn a new
technology as well
you will have User Authentication features at the top of
the page sigh in
Add Products Order to cart icon increment basket with
numbers and if i go to the basket you will get your order
products with cost total off all the products you can also
remove products from baskets add cart is updated without
having refreshing the page that's the power of React this is
why so many company gives jobs to the react developer
you will also full checkout with this product order all of
this happen instantly
deploy the whole project online for others to see it
so all you have to know the technology to become modern
day developer

Popular framework ReactJS facebook Instagram and


many top companies uses

modern Javascript react developer


deploy to firebase
route to different pages thing like that
Create a React App directly
toolkit command
npx create -react -app amazon-clone
this will create a startup template when you are coding
with react
and it will give you everything you need to get started
with this amazon building project
let installation to be proceed

go to firebase.com
firebase allows you to have a database and it s allow you
to host your app online
database allows you to save things so that they don't go
away

firebase is going to be used for the hosting


then we connect our database over the firebase
pulling some information and products
login to firebase with your gmail account

firebase cloud function


connect to stripe for processing payment from this
websites
so all this task

go over to console on firebase


click project option
create project in firebase
named it as amazon-challenge
make sure you matched with you directory name
at this point named doesn't matter
you can choose Google analytics or not choose this
doesn't make any difference
grab the configuration file from firebase
a simple config file pretty much a object we grab from
firebase which going to allow us to connect our frontend
react over to firebase

coming back to the visual code terminal


if you find this message happy hacking that means you
have correctly installed react app
run your command now make sure you
cd into the newly create react folder
and type npm start
it will start the app development server on your localhost
and it will run and open the browser tab with spinning
react logo indicating our app is running

coming back to the firebase


we get into our project console
click on little icon amazon-challenge
give app nickname - amazon-challenge
also check the box which says firebase hosting
click register App
go to next
then copy the command code this is important
npm install -g firebase tools
copy it

go to vs code
open another terminal
paste this code and enter

if you are using linux shell give sudo infront of it to


install globally

go to firebase again
click next skip those three steps command
you dont need to worrry about this either
clcik continue to console
click burger icon to open settings click on it and grab a
little snippet which you need

scroll down click config copy the code


go to visual studion
click src folder
create a new file
name it firebase.js
and paste this code
hit save

----------------------------------------------------------------------
Part 2 The Home Page
now if you check your browser your react app
development server with spinning react logo is running
that means your First react working app is up and
running
go to vs code delete all your test files we dont need them
App.test.js
we also dont need the logo
logo.svg
and setupTests.js

to select all hold done cntrl command button click on the


this files and hit command delete

now if you check your browser its making complain that


your logo is missing that make sense we just deleted the
logo file
now go to app.js
hit command b to hide left bar and command j to hide
terminal
so you have more of the screen
delete this import command for logo in line 2
delete everything inside the header code resides inside the
div classname app
instead i write here with opening h1 tag
<h1>Hello Clever Programmer Lets Buid the Amazon
Store </h1>

now if you see your browser you will see this text

delete all the styling which is coming default


go into your files App.css
select everything delete all hit save
that will get rid of the default styling from our page
and make our text left align
now go to index.css
get rid of invisible margin that always there becacuse we
don't need it
by adding this piece of code at the top of the page
*{
margin: 0;
}
this will gives us zero margin before it gives some sort of
margin at the top also react does that some times

now back to our App.js


in the function name App
before div class add //BEM
because it follows the BEM convention
this is like a naming convention used for your styling
and people really love this whwne you know how to do
this
so change the classname App to app
becasue it following the BEM convention
now we are pretty much now ready to get started
we now have a clean canvas at this point
Now let's start some markdown
lets create a header start it as a header comment
header is something top part of our Amazon page
contain Amazon Logo at the left first thing
search icon with a box at the middle
then all we have four things on the right hand side
sigh in icon button Orders Prime at the basket icon which
we called this four thing to children
the we have rest of the body basically we called it as
home component
everyting beneath the header is a home component and
everything above the home is header component

so for header component we have to create a file heder.js


click file explorer make sure you are in src folder
make sure you capitalized the H when you are making
and naming a file Heder.js because this is the Header
component
the code this file will contain

BUT BEFORE DOING THAT WE WIL INSTALL E7


SNIPPET
click extension square icon type es7 in search box
developer dsznajder
so when yout rfce it wil rendered all the code snippet
quickly
let gives a div a name
<div className='header'>

and give this file have it own css file


import './Header.css'
inside this src folder lets create Header.css
so coming back to Header.js
we will mark each of the header components here
which contain logo image component
<div className='header__logo'>
<img src
="https://pngimg.com/uploads/amazon/amazon_PNG11.p
ng" />
</div>

middle search component having a container div


div.header__search

inside it we input field and search icon


so it basically represent as a finished products
the final right hand side children are header nav having its
own div

download prettier extension

You might also like