Shopdex

Shop + Index = Shopdex

Overview

My app does price comparions for shops with in stock items. It tells you prices of the the products and shops around you that has it. Discover the cheapest product the user desires that is in stock at physical stores.

Screenshots

Home Page	Product Page	category page
Saved Page	Register Page	Login Page

Problem

It is very hard to find a shop with the cheapest price to buy a product espeically when it comes to shopping in person. Some people would like to shop something in person so they get to try it, see it in real life and getting the product the same day instead of waiting for it to be shipped.

User Profile

People who would like to find the cheapest shop for the product they want, try it and get it in a physical store in the same day. The Website will mostly be used on a smart phone because customers will be on the move searching for the cheapest store.

Features

• Login

• Change user name

• Change password

• Logout

• Search bar that will auto complete

• Save products that you are interested

• shop owners should be able to upload their pricing and location for their product

• User should be able to browse the all the products listed on the website

• product price chart

• google map shows the shops

Implementation

Tech Stack

• react
• react-router-dom
• sass
• axios
• uuid
• express
• knex

APIs

• I will be building my own api
• Maybe a map api, either google, mapbox or open street view

Sitemap

• Home Page /

Home page is what users will see when they go on the website.

• Category Page /category

ALl the products in their catagory that is uploaded to the database.

• Saved Page /user/:id/saved

All the products that the user have saved

• Profile Page /user

This is where user can change their user name, password, email and logout

• Product List Page

The page after searching for a product in the search bar

• Product Page /products/:id

This page shows the product details and all the available prices from different shops

• Signup Page /signup

User signup page

• Login Page /login

shop login page

• store owner page /shop/:id

This page shows all the products that the shop has listed.

• upload product page /shop/:id/upload

This is where shop owners upload their available products prices

Mockups

Home Page	Category Page	Saved Page
Profile Page	Search Result Page	Product Page
Sign Up Page

Data

• shops

id	shop_name	email	password	address	account-created-date

• saved

id	user id	product id

• shops

id	address

• listings

id	product_id	shop_id	price	reports

• products

id	product_name	Brand	Model	category	shop_id

Endpoints

get

/products

• list of all products

/products/:id

• product detail

/products/category

• a list of product that is in that category

post

• /store/:id

uploading new product

put

/account/shopname/edit

• edit account name

/account/email/edit

• edit account email

/account/password/edit

• edit account password

Auth

shop login

Roadmap

• folder structure
• setup database
• setup backend
• setup frontend
• home page
• category page
• saved page
• profile page

Nice-to-haves

• dark mode / light mode
• admin page
• signup with google / twitter / facebook
• parts compatibility

Instructions

setup .env

The token for mapbox is

REACT_APP_MAPBOX_TOKEN= pk.eyJ1IjoibGVpZ2h0b24tZ3VhbmciLCJhIjoiY2xwYWNxYWhxMDZuNTJrazdseXM4NDR4NSJ9.E62MYzRpMnGaazE2NUFufQ

run npm i