Skip to content

r-ruizfer/CraftShop-frontend

Repository files navigation

CraftShop

App Logo

Description

CraftShop is a web designed for a single seller to post all their products with the option fro other people to make a user and comment on the products and buy them

Technologies & Libraries used

CSS, React, JavaScript, Bootstrap, Cloudinary, Strpie, Passport

Backlog Functionalities

Upvote/Downvote system, report system, Delivery...

Client Structure

User Stories

NOTE - List here all the actions a user can do in the app. Example:

  • 404 - As a user I want to see a nice 404 page when I go to a page that doesn’t exist so that I know it was my fault
  • 500 - As a user I want to see a nice error page when the super team screws it up so that I know that is not my fault
  • homepage - As a user I want to be able to access the homepage so that I see all the products available and filter them by category
  • sign up - As a user I want to sign up on the webpage so that I can wishlist items, add them to my cart and pay for them
  • login - As a user I want to be able to log in on the webpage so that I can get back to my account
  • logout - As a user I want to be able to log out from the webpage so that I can make sure no one will access my account
  • product details - As a user I want to see all the details of a product before I buy it, such as what kind of product it is, how much it costs, a short description, a purchase button to buy that item and also a comment box to say what I think about it or reccomend it.
  • wishlist - As a user I want to wishlist items i want to buy in the ffuture for easier access
  • cart - As a user I want to add items to my cart so I dont have to pay individually for them
  • searchbar/search results - As a user I want tobe able to type a key word to be able to see if any product matches what im looking for and then see all the products that match my query
  • Profile - As a user I want to have a Profile page with my details for easier purchasing of my products (send address, first name, last name) and I can set up a profile picture so that i will be easily recognized when I comment on a product

Client Routes

NOTE - Use below table to list your frontend routes

React Router Routes (React App)

Path Page Components Permissions Behavior
/ Product list public Shows all Products
/signup Signup not logged in only <!IsLoggedIn> Signup form, link to login, navigate to homepage after signup
/login Login not logged in only <!IsLoggedIn> Login form, link to signup, navigate to homepage after login
/profile Profile EditProfile user only <IsLoggedIn> review account details, edit them
/product/:productId Product details Comment Box, Add to Wishlist/cart, Purchase, see more Products public Shows Product Details
/wishlist WishList smallProductCard user only <IsLoggedIn> Shows all products on Wishlist
/cart Cart Cart user only <IsLoggedIn> Shows all products in Cart
/error Error500 Public Shows an error 500 message
* ErrorPage Public Shows an error 404message

Other Components

  • Navbar
  • Footer
  • add/edit product form
  • edit user form

Services

  • Auth Service

    • auth.login(user)
    • auth.signup(user)
    • auth.verify()
  • Backlog Service

    • product.filter(title, category)
    • product.detail(id)
    • product.add(id)
    • product.delete(id)
    • product.update(id)

Context

  • auth.context
  • cart.context
  • wishlist.context
  • product.context
  • comments.context

Links

Collaborators

Developer 1 name

Developer 2 name

Project

Repository Link Client

Repository Link Server

Deploy Link

Slides

Slides Link

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •