Git Product home page Git Product logo

jcrew-clone's Introduction

J.Crew - Clone

We have tried cloning the J.Crew webapplication as a construct week project. We, a team of 5 people have completed this project in a span of 5 days using our knowledge of HTML, CSS and JavaScript, React, Redux, Chakra UI.

About the website

J.Crew Group, Inc., is an American multi-brand, multi-channel, specialty retailer. The company offers an assortment of women's, men's, and children's apparel and accessories, including swimwear, outerwear, lounge-wear, bags, sweaters, denim, dresses, suiting, jewelry, and shoes.

Technology

Client side - HTML, CSS, JavaScript, React, Redux

Server Side - JSON server, Cyclic, Netlify

Features

  • Filter
  • Sorting
  • Form Validation
  • Login / SignUp
  • Cart and ShopLater list
  • Responsiveness

More into the Project (J.Crew - Clone)


Landing Page :

jcHomepage

  • Landing page of the J.Crew website has a Navbar at the top
  • It displays various products, offers and ads of their own.
  • At the bottom section there is a footer, both header and footer are same across all the pages.

Login page / SignUp page :

jcSignin

  • Navbar has two buttons to navigate the user to the LogIn and SignUp page
  • By clicking a modal will open and the by using the correct user information, user will be able to SignUp / LogIn.

Product page :

jcProductpage

Designed three troduct pages.
  • New - That contains all the products
  • Men - That contains clothes for the Men
  • Women - That contains clothes for the Women

Product Details page :

jcProductdetailspage

  • It Contains the more details related to the specific / selected products
  • It has two buttons to add the product to the cart or to the wish list

Checkout page :

jcCheckout

  • It has a form to take the delivery add from the user
  • In the right side it will be showing all the product that are in the cart

Payment page :

jcPayment

  • It has a form to take the atm details
  • In the right side it will be showing all the product that are in the cart

Learnings :

  • Effective use of Redux store at globle state
  • Sorting and filters withe the useParams
  • Real life implementation of HTML, CSS, React and Redux
  • Learned to manage time, and to work in the pressure

Contributors :

  • Rohit Kumar
  • Nilesh More
  • Biman
  • Deepak Chavan
  • Abdul Quadir

Live Link:

jcrew-clone's People

Contributors

abdulquadir77 avatar biman721443 avatar deepakchavan27 avatar rohit0985 avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

jcrew-clone's Issues

Adding the favorite list

  • adding the ui
  • writing the logic for getting the data and rendering it
  • applying the crud functionality for the favourite list

Adding the readMe.md file

  • creating the readme file
  • adding the introduction and the snippets and demo
  • adding the collaborators information
  • adding the information related to json-server

Home

  • Top Image bar
  • Product Render or Mapping
  • Left side page

Cart Page

  • Delhivery Method
  • Form
  • Payment Link
  • Product Review

Cart drop-down

  • hover effect in the cart dropdown
  • getting the real-time data from the cart
  • adding all the functionality to all the buttons in cart dropdown
  • improvement in the UI

Women Page

  • Create a data
  • Women's cloth Image
  • Recommended product cards
  • Shop and stories product cards
  • Passport Cards

Check out form

  • ui
  • functionality :- getting data from the user details or shop as guest

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.