Git Product home page Git Product logo

dhiraj19999 / flopkart Goto Github PK

View Code? Open in Web Editor NEW
4.0 2.0 3.0 7.94 MB

A Flopkart website is an e-commerce platform that replicates the functionalities and features of the popular Indian online marketplace, Flipkart. It allows users to browse and purchase a wide range of products such as electronics, fashion, home appliances, books, and more.

Home Page: https://flopcart-nine.vercel.app/

HTML 0.54% CSS 6.01% JavaScript 93.44%
chakra-ui css3 express-js mongodb mongoose node-js reactjs redux redux-thunk

flopkart's Introduction

Flopkart🛒

project-image

A Flopkart website is an e-commerce platform that replicates the functionalities and features of the popular Indian online marketplace, Flipkart. It allows users to browse and purchase a wide range of products such as electronics, fashion, home appliances, books, and more. Like Flipkart, the Flopkart website typically includes features such as a user-friendly interface, product reviews and ratings, product search, user registration and login, user profile section, add to cart and checkout page

Collaborators-

Team members Github-profiles
Chandra Shekhar Joshi https://github.com/Shekhar-Joshi07
Aniket Pandey https://github.com/aniketpandey2912
Piryanshu Bisht https://github.com/Piryanshu88
Mayuri Saha https://github.com/Mayuri-Saha18

🌐See Live here 👇

Sneak Peek of website

project-screenshot

project-screenshot

project-screenshot

project-screenshot

project-screenshot

project-screenshot

project-screenshot

project-screenshot

🛠️ Installation Steps:

1. Clone the repo

git clone https://github.com/dhiraj19999/cold-lamp-3047-.git

2. Install NPM packages

npm i --legacy-peer-deps

3. View on browser at localhost:3000

npm start

🖥️ Tech Stack

Frontend:

reactjs  react-router  redux  chakraui  mui 

Backend:

nodejs  expressjs  mongodb  jwt 

Special Thanks 😊

Thanks Masai School for giving us this opportunity to show and deploy our skills to explore ideas and learn new things about project-making

flopkart's People

Contributors

aniketpandey2912 avatar dhiraj19999 avatar mayuri-saha18 avatar piryanshu88 avatar shekhar-joshi07 avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

flopkart's Issues

Search Functionality

  • Search functionality
  • Pending styling and responsiveness
  • Pending connections to pages

Single Product Page

  • get the id from URL and fetch data accordingly
  • made img slider with thumbnails
  • made add to cart btn
  • create single details section
  • make it responsive for all screen sizes

day-2

  • homepage banner
  • 1st carousel
  • 2nd carousel
  • 3rd carousel

day-3

  • landing page carousel
  • 4th carousel
  • 5th carousel
  • 6th carousel

day-5

  • code for a single product page
  • connect with it

day-4

  • single product page design
  • UI design

User Account

  • User Image & name
  • Sidebar
  • Personal Info section
  • Form
  • Deactivate Account

Cart Fn

  • adding store for cart
  • writing action types
  • adding reducer for all the types
  • write all fn in action file
  • invoking them in single product page

Footer

  • Add All Navigation Link
  • About Links
  • Help Links
  • Policy Links
  • Social Links
  • Mail Us
  • Office Address
  • Some more links

Backend Structure - II

  • make the model for products
  • make the route for it [get ,post,delete , patch]
  • make the validation for products routes
  • make the query for products ⬇️
  • sort by price [low and high]
  • add limit and pagination default limit 10
  • adding filter by category

Navbar

  • Logo
  • Search Bar
  • My Account
  • Become A Seller
  • More
  • Cart

Project List Page

  • make filter component
  • fetch query from url
  • then fetch data according to query
  • give sorting based on prices
  • give pagination
  • make responsive to all the screen sizes
  • Link it to single product page

Backend Structure -III

  • make the cart model
  • make the get route for multiple user
  • make the other route as well like [post ,patch,delete]
  • validate it through middleware
  • use relationship in cart

Backend Structure - I

  • Make the folder structure
  • Make the database in MongoAtlas
  • Make the documents [carts, products, users]
  • add dataset for products
  • make the model for users
  • make the form validation in backend
  • make the routes for users using jwt and bcrypt
  • make the middleware for validators

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.