Giter Club home page Giter Club logo

ajio's Introduction

Project Title

AJIO, a fashion and lifestyle brand.

It's a Full Stack E-commerce web application with all the major functionalities


๐Ÿ–ฅ๏ธ Tech Stack

Frontend:

reactjs chakra-ui javascript restAPI css3 html5

Deployed On:

vercel

AJIO, a fashion and lifestyle brand, is Reliance Retail's digital commerce initiative and is the ultimate fashion destination for styles that are handpicked, on trend and at prices that are the best you'll find anywhere.


๐Ÿš€ Features

  • whole website is fully Responsive.
  • Landing Page & Footer.
  • Login and Signup Page with json-server.
  • Product Filters Based on Brand,Price and Discount
  • Product Details in brief manner.
  • Product Sorting Based on Price, Rating
  • Product Filtering and Sorting works together
  • Cart Add and Remove Items
  • Cart Update Quantities
  • Order Summary

๐Ÿš€ Our Team Members:-

Screenshots

Homepage -

This is the main landing page of our website. Here, if you clicked on any navigation then you will redirect to respective page. Also, we have added searching of product option with debouncing feature.

All pages are responsive.

landing_page

Sign up Page -

On this page, you can register a user. If the user is already registered, you can simply sign in by providing valid details of the user.

signup

Sign in Page -

On this page, you have to login with your registered email and password .you can simply sign in by providing valid details of the user.

Login

Products Page -

Here users can browse, filter the product based on brand and discound, sort by price or rating, filter and sort will work togather and add items to the cart by clicking on the Add to Cart button.

product

Order Summary Page -

On this page, you can see your order details. you can remove the item from cart and also, increase or decrease count. By clicking on the payment button you will be redirect to the checkout page.

order summary

Cart Page -

Here all the products added to the cart will be shown. On this page, By Clicking on add to cart your cart added successfully.

cart

Footer Page -

On This Page there is info about the site....

footer

Run Locally

Clone the project

  git clone https://github.com/piyushkhurana8744/-prompt-wilderness-693.git

Go to the project directory

  cd prompt-wilderness-693

Install dependencies for frontend as well as backend

  npm install

Start the localhost server

  npm start

Deployed link

Vercel Link

https://ajio-app.vercel.app/

Show your support

Give a โญ๏ธ if you like this project!

ajio's People

Contributors

mak-1997 avatar vipulvatsa07 avatar parag2510 avatar piyushkhurana8744 avatar supriya1011 avatar

Stargazers

 avatar  avatar Sudipa Hazra avatar  avatar  avatar  avatar

Watchers

 avatar

ajio's Issues

Cart Page

  • Get data through an API call.
  • Display the data.
  • Add buttons to increase or decrease the quantity of each item.

Men's HomePage data

  • Add id to the data
  • Add key quantity to update value
  • Add different category data

Men's HomePage

  • updating data on db.json file
  • fetch data through API call
  • Display data in grid format

Women clothing section

  • add the add to cart button.
  • apply option for 3 or 5 grid items.
  • Give sorting parameters.

Women Clothing Page

  • Create basic structure of the page.
  • Make API call to get the data.
  • Display the data in a grid format.

HomePage

1 Upper Footer section
2 Footer

creating database for women's page.

  • Create a basic structure of the data.
  • Get data for the women's clothing section.
  • Get data for the saree , tops, kurta section.
  • add id to the data.
  • add quantity to the data.
  • add category to the data.

Men's Category

  • fetching data for different categories
  • different routes for the categories
  • styling it in grid format
  • working on responsiveness

Men's Add to Cart

  • Add the "Add to cart" button to each item.
  • on clicking the Item should be added to the cart.
  • An API call should be made to add data to the cart.

HomePage

1 upper Carousel
2 middle carousel

Adding Categories

  • Create a category section on the women's page.
  • Add different categories.
  • Make API call for getting data from different categories.

Add to cart

  • Add the "Add to cart" button to each item.
  • on clicking the Item should be added to the cart.
  • The text should change to "Remove from cart".
  • An API call should be made to add data to the cart.

Kids

1 All products fetched
2 Apply grid filter

Cart Page Structure

  • Create cart page.
  • give is a basic structure.
  • Total amount of all the products should be visible.

Kids

1 Apply filter to the kids section
2 Make it responsive

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.