Code Monkey home page Code Monkey logo

amazon-clone's Introduction

Project Name: Amazon Clone

This project is cloning Amazon website by using React.

1. Login Page

LoginPage

I used firebase.auth() using firebase package. firebase.auth().signInWithEmailAndPassword(email, password) made it easy to setting the login page much easier.

2. Register Page

When the user click create account button, the webpage will be transferred to register page.

RegisterPage

I also used firebase.auth() for registration. firebase.auth().createUserWithEmailAndPassword(email, password) makes user to register their account just with email and password.

3. Home Page

When the user login successfully, it will show home page which contain header, image slider and product cards. I used react-slick for image slider.

HomePage

HomePage2

When the user click "Add to Basket" button, the product will be added to the basket.

4. Checkout Page

In the checkout page, it will show some products that user selected.

CheckOutpage

When the user clicks "Remove from basket" button, the selected product will be deleted from the basket. I used react-flip-move to add some animation for removing checkout products.

5. Payment Page

In the payment page, the user can see the product card which will be purchased. I also used stripe which help the user to purchase the product. It requires card number, expiry date and CVC number.

PayementPage

6. Order page

The order page will show the products that user purchased.

OrderPage

I used firestore from firebase by using firebaseApp.firestore(). Firestore makes it easier to bring the data stored in firebase.

Sidebar

Sidebar

Footer

Footer

Firebase Deployment

firebase init: Initializing firebase. The base root should be build folder.
npm run build: Build the application.
firebase deploy: Deploy the application through Firebase.

Click the below link to visit the website.

https://clone2-e1ec1.web.app/

Thank you.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.