acrive82/ecommerce-firebase-web

A full stack e-commerce SPA, built with React, Redux, React Router and Firebase functions

A full stack e-commerce app built with React.js and Firebase

DEMO:

View: https://victor-s-shop.herokuapp.com/

Admin panel: https://victor-s-shop-admin.herokuapp.com/

Admin panel:

A single page application created for managing the e-commerce data stored in the firebase database. Built with React.js, React Router, Redux and Bulma CSS.

Functions:

• Sign in and sign up with firebase auth / front side and server side validation
• View all users / view user / delete user
• View all categories / create, read, update, delete a category
• View all products / create, read, update, delete a product
• View all orders / view, read, delete order
• Pagination
• Interactivity using modal, loader and error handling
• Routes
• Filter / sort / search /// TODO

Stack:

• React
• React Router
• Redux
• Redux Thunk
• Bulma CSS
• Axios
• Firebase

Firebase functions:

Firebase functions that serve as RESTful APIs for the e-commerce app. Built using Node.js, Firebase functions and Express.

Endpoints:

• api/categories
• api/favorites
• api/orders
• api/products
• api/users

Authentication:

• Authentication using username and email
• Authentication using oauth

Database

• Performs CRUD operations in firestore database

Storage:

• image upload / delete / update

Functions:

• functions that serve the RESTful requests to perform CRUD operations in the database and image upload / delete / update
• uses firebase auth and middleware for authorization handling

Stack:

• Firebase
• Firebase admin
• Firebase functions
• Node.js
• Express
• Busboy
• async requests handling

View:

An online shop built as a single page application using React.js, React Router, Redux and Bootstrap.

Functions:

• Sign in / Signup with username and email or google
• Home page with categories
• View all products
• View products based on categories
• View product
• View favorites
• Add to cart
• Add to favorites
• Order summary
• Order submit
• Carousel for promotions
• Search product
• Filter by price, brand, material
• Sort by price
• mobile responsive All RESTful requests perform CRUD operation in the firebase database.

Stack:

• React
• React Router
• Redux
• Redux Thunk
• Bootstrap
• Axios
• Firebase

TODO

• Admin-panel

  • Home - Dashboard page

  • User

    • Sign in
    • Sign up
    • Log out - fix TypeError: Cannot read property 'loading' of null

  • Products

    • Add new product feature

      • solve image upload bug
        • handle validation errors
        • add modal after action completion
        • add category field
          • Fields
            • Title
            • Item Number
            • Brand
            • Price
            • Currency
            • Material
            • Weight
            • Weight m.u.
            • Description
            • Category
            • Created At

    • Add edit product feature

      • handle image edit
      • add modal after product edit
      • validate new inputs

    • Add view product feature

      • Delete product feature
      • Delete image when deleting a product
      • add a modal after product delete

    • Categories

      • New Category
      • Edit Category
      • List Categories
      • Delete Category
      • View Category

    • Orders

      • Fields
        • uid
        • products:
          • productId
          • quantity
        • deliveryAddress,
        • billingAddress,
        • comments,
        • createdAt
      • Display all orders
      • View order
      • Mark order as shipped

    • Home page

      • Layout

    • Users

      • users
      • view user
      • delete user

    • Pagination Component and functionality

    • add responsiveness

    • format dates

    • add filters

    • add sort

    • route guard

• Firebase functions

  • Users functions
    • add user to database after login with Google
  • Products functions
  • Categories functions
  • Orders functions
  • Add to favorites
  • Check for duplicate products

• View

  • Add store
    • user
    • products
    • categories
    • cart
    • favorites
  • Header
    • implement a dropdown menu for user options
  • Footer
  • Login
    • Login page
      • Signin with google
      • Signin with facebook - disables
      • Signin with email and password
    • Logout page
  • Signup
  • Home page
  • View all products
  • Category
    • Category page
    • Category item
  • Product
    • Product item
    • Product page
      • Fix product image
  • Cart
    • Cart page
    • Number of products
  • Favorites
    • Add to favorites
    • Remove from favorite
    • Favorites page
  • About
  • Terms and conditions
  • Checkout page
  • Order summary
  • Slider
  • Search
  • Sort
  • Filters
  • route guard
  • Responsiveness
  • fix hover user error