Foot Locker is an online store specialized in selling shoes of all kinds, where you can find all the shoes you want

Overview

Foot Locker

Links πŸ–‡

Description

Foot Locker is an online store specialized in selling shoes of all kinds, where you can find all the shoes you want

User Journey

Buyer Journey:

  • When the user enters the site, he will reach the main page, where he can see all the shoes available in the store and can search for any of them by name and can filter in more than one way, and after this the user can add the product he wanted to his cart and he can undo this action.
  • After that, he can go to the cart page to review the purchase, where he can delete all the items in the cart at once.

Seller Journey :

  • The seller can access his page after logging in to his account, then he will be able to see all his items in the database.
  • He can also add new products to his store, edit or delete products already in the store

User Stories

  • As a buyer, I can view existing products from the main page.
  • As a buyer, I can filter products by price, by categories, and search by name.
  • As a buyer, I can view products by moving to the product page.
  • As a buyer, I can add products to my cart.
  • As a buyer, I can navigate to the cart page and remove products or proceed to buy.
  • As a seller, I can add products to the home page.
  • As a seller, I can delete product from home page.
  • If the seller, is not logged in, he can't add, edit, and delete a product.

schema

Built With

  • HTML5
  • CSS3
  • React.js
  • Node.js
  • Express.js
  • PostgreSQL

members

You might also like...

Awesome book website, small online library to store books when added to the list we have implemented this using a plaint JavaScript!

microverse-m2-Awesome-books This project is about building Awsome Books using javascript Live demo Live Demo Link Built With -Lighthouse (An open-sour

Dec 27, 2022

A RESTful API to support online store.

A RESTful API to support online store.

πŸ“ Table of Contents About API Endpoint Get started Installation Running Building for production Running Tests Technology Contributors License πŸ“™ Abou

Dec 17, 2022

Online store with Medusajs and Quasar Framework πŸ›’

Medusa Ecommerce Vue πŸ›’ Online store with Medusajs and Quasar Framework medusa-cli First install medusa cli in your environment yarn global add @medus

Oct 20, 2022

A chat logs online saver for discord bots to save messages history & cleared messages online

A chat logs online saver for discord bots to save messages history & cleared messages online

Chat Logs NPM package that saves messages online to view it later Useful for bots where users can save messages history & cleared messages online Supp

Dec 28, 2022

SafeCycleβ€”a tool that keeps cyclists safe. Gone are days of weaving through busy city streets, SafeCycle finds all the bike routes for you to ensure a smooth ride wherever you want to go.

Inspiration Bikingβ€”an everyday form of travel for students and professionals across the globe. On-campus, back home, and with the people that we know

May 2, 2022

This project is a To-do list app which users can store and edit their Todo Tasks. Users can also change the order of their todo

Project This project is about a todo app bundling using webpack Additional description about the project and its features. Built With HTML CSS Javascr

Jun 17, 2022

Todo-List is an online website where users can add a todo tasks. tasks can be removed , added, and edited. Built with Webpack and JavaScript.

To-do List Description To-do-list is an online website where users can add a todo tasks. tasks can be removed , added, and edited.Built with Webpack a

Sep 9, 2022

Pack all your node_modules and other files you want inside your project to a zip file.

πŸš€ Node Modules Packer Use Cases | Usage | Examples | Headless | Benchmarks | Reference This is a library to package all your node_modules and other f

Dec 1, 2022

This is an app that will service the ASD community to help them communicate what they want. The individual can be either verbal or non-verbal.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Jun 28, 2022
Comments
  • Be Consistent - response

    Be Consistent - response

    https://github.com/GSG-G11/shoestore/blob/b9c46b5d4bfb9942f1492a135274736bf9370723/server/controller/getProductID.js#L5

    in responses you send the 
    1.   .json({ status: 201, message: 'Product Added', product: rows[0] }))
    2.  .json({ status: 200, message: 'Product Deleted' }))
    3. .json(rows))
    4. .json({ status: 200, message: 'Product Updated', product: rows[0] }))
    
    

    should be consistent when we send a response for client side, moreover why you send a status in the body of response if we have it in status > res.status(200)

    here is a question for you all, what if the rowCount equal 0, I mean what if there is no products in data base? In the same context we handle the 4xx errors in catch of promise, not the internal server error, we handle this error in Express error middleware like this ;

    const serverError = (err, req, res, next) => {
      return res.status(500).json({ message: 'internal server error 500' });
    };
    
    

    you did a good work, all issues just to be a professional developers ;)

    opened by Nizar7zak 0
  • Switch better than If-else

    Switch better than If-else

    https://github.com/GSG-G11/shoestore/blob/b9c46b5d4bfb9942f1492a135274736bf9370723/server/database/config/connection.js#L8

    For many reason Switch is better than If-else in this situation. I advice you all to read this essay, Explained everything. https://www.geeksforgeeks.org/switch-vs-else/

    opened by Nizar7zak 0
  • Handle promise rejection

    Handle promise rejection

    https://github.com/GSG-G11/shoestore/blob/b9c46b5d4bfb9942f1492a135274736bf9370723/server/database/build/build.js#L9

    If you have an error in this Promise, you will see this message " UnhandledPromiseRejection" which means you are dealing with async code, that promise is rejected but you don't handle the Rejection. I suppose you forget add.catchhere, and you should do it to know where is the error happened

    opened by Nizar7zak 0
  • General Notes Client Side - React

    General Notes Client Side - React

    https://github.com/GSG-G11/shoestore/blob/b9c46b5d4bfb9942f1492a135274736bf9370723/client/src/App.jsx#L40

    Avoid console.log and commented Lines in your codes, you missed handle the login state, your users can add to cart without login. and the login button didn't work !

    some issue i saw it in your code...

      componentDidMount() {
        const { id, buttons , changeCart} = this.props;
        if(typeof buttons === 'string'){
        const products = JSON.parse(localStorage.getItem('products'));
        const addedToCart = products.some(item => item.id === id);
        this.setState({ addedToCart });
        changeCart(products.length)
    
      }
    

    why we use component did mount here? I advice you to read this essay about local storage and what is the max size we can store in Local storage, should pass this data from parent component is better than this way. we can pass all data we need as props,

    componentDidMount we use it when we have a http request in this component.

    In contrast you did a great work and applied the concept of State and how we handle it very good, moreover you separate your components VERY GOOD.

    GREAT WORK.

    opened by Nizar7zak 0
Owner
G11
GazaSkyGeeks Code Academy, 11th Cohort
G11
Grayce Muthui 8 Jun 16, 2022
A website made using ReactJS library which displays all the best selling books of 2021 and a feature to check them on amazon.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Sumanth Krishna 3 Dec 30, 2021
ChainJet is a workflow automation platform specialized in blockchain and cloud infrastructure.

A workflow automation platform specialized on blockchain, with more than 300 integrations. Description ChainJet is a workflow automation platform spec

ChainJet 38 Dec 24, 2022
A plugin that can find the paths between two notes. Not sure who will want to use it...

Obsidian Path Finder Plugin Install BRAT Install Obsidian42-BRAT plugin. Click Add new beta plugin and fill in jerrywcy/obsidian-path-finder. Activate

jerrywcy 29 Dec 31, 2022
Awesome-book is an online library website where a user can store a collection of books. Different book can be added and removed. Built with JavaScript using Dom

Awesome-book Description Awesome-book is an online library website where a user can store a collection of books. Differents book can be added and remo

tarike bouari 8 Sep 9, 2022
Diush - a secure funnel for selling items to your friends and network

diush a secure funnel for selling items to your friends and network. learn more at diush.xyz Β» diush is an open-source mobile platform that acts as a

diush 7 Dec 21, 2022
This is an imitation of the Amazon online shopping store. Users can add and remove items from the cart, proceed to checkout and make payments.

AMAZON This is an imitation of the Amazon online shopping store. Users can add and remove items from the cart, proceed to checkout and make payments.

Kevv_in 7 Mar 23, 2022
Easily find someone to debate online in an omegle-style showoff

Debate Bro Easily find someone to debate online in an omegle-style showoff Go to site Tech Stack Next.js + Socket.io + WebRTC (peer.js) TODO Change dr

Celeste 15 Sep 17, 2022