Git Product home page Git Product logo

e-commerce-yoox.com's Introduction

React Project

This is clone of YOOX.COM

An E-commerce website based on lifestyle products. This is Individual Projects, made by me in 4 days. I have used React Library for all functionalities and used Chakra UI as a external CSS.

Features

This project is made by using React

  1. Social Sign-up/Sign-in. 2. basic User authentication with Local Storage. 3. Local Storage to manage user data. 4. Add to cart. 5. Delete products from the cart. 6. payment forms for valid users 7. API integration for products 8. Context API for manage state 9. Chakra UI for external CSS

Navbar

Upper section have 1. Menu bar for selecting country. 2. Customer care details 3. Register Panel 4. Login Panel 5. Admin Panel Lower section have some routes a search box a wishlistand a cart button

Snapshots of Navbar Screenshot_20230109_074919

Landing Page

some attractive images in Grid formate and view all button to see all related products

Snapshots of Landing page Screenshot_20230109_075252 Screenshot_20230109_075318

Register panel

User will have to register before using all functions of this site. Registration form is here, user can register with his Email or Google and Facebook as well. His data will be save in localstorage.

Snapshots of Register panel Screenshot_20230109_075431

Login panel

User will have to Login after registration. Only registered user can be login. Login form is here, user can Login with his registered Email and Password or Google and Facebook as well. His data will be save in localstorage.

Snapshots of Login panel Screenshot_20230109_075447

Products Page

After clicking on the view all button from homepage It will redirect to Products page. All Products are here in the grid formate with few details and Buy Now Button. After clicking on the Buy Now button It will be re-directed on the Products details page where you will get all details of the particular product.

Snapshots of Products page Screenshot_20230109_075556

Cart Page

User can see all the products which are added by him into cart. After clicking on the cart button all products will be in list formate. user can remove the products from cart if he want otherwise he can proceed to payment .

Snapshots of Cart page Screenshot_20230109_075729

Payment page

After clicking on the Proceed to Payment button, user will be redirected on the payment page. User can fill the card details and after clicking on the Pay button products will be ordered.

snapshots of payment page Screenshot_20230109_075832

Admin panel

In the Navbar section a Admin button is there. It is for Admin only. If Admin want to add, update or delete products from his database then he can go through the Admin Page.

Snapshots of Admin page Before Login Screenshot_20230109_084027

After Login

Screenshot_20230109_084045

After Clicking on the button

Screenshot_20230109_084101

Screenshot_20230109_084113

Screenshot_20230109_084124

e-commerce-yoox.com's People

Contributors

avinash7488 avatar

Stargazers

 avatar

Watchers

 avatar

Forkers

prateek1401

e-commerce-yoox.com's Issues

Kids page

  • Homepage
  • New Arrivals Girls
  • New Arrivals Boys
  • Living in dream land
  • Soft & Fuzzy
  • Stella Mccartney

Footer

  • New to YOOX
  • Help
  • YOOX News
  • MYOOX
  • About us

Login Page

  • Login with facebook
  • Login with google
  • Login with email
  • Login button with function

Women page

  • Homepage
  • New Arrivals
  • Hugo
  • Montblang
  • Furla

Shopping bag page

  • Item
  • Select shipping method
  • quantity and remove button
  • Back to shopping button
  • Proceed with your order button

Register Page

  • Register with facebook
  • Register with google
  • Register with email
  • Register button with function

View Products

  • Product Image
  • Product details
  • Add to cart button with function
  • Add to dream box with function
  • Suggested products

Design and Art page

  • Homepage
  • Made to last
  • In Demand design
  • Social look
  • In my room
  • Budding collector
  • Ultimate edit

Cart page

  • Dropdown box with added products
  • Go to shopping bag button

Payment page

  • Card details
  • Payment button
  • Payment successful modal
  • Back to shopping button

Navbar

  • Option panel
  • Logo
  • Search box
  • Shopping bag
  • Register & Login
  • Some other designing part

Men page

  • Homepage
  • New Arrivals
  • Hugo
  • Montblanc
  • Boss
  • One of a kind

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.