l-goede/sagit

Sagit is a price app, which informs the user about the top offers of his desired product and notifies them when this product has become cheaper than the price, which the user has previously set.

sagit

Sagit is a price app that shows you the top offers of your product. You can enter your target price that you are willing to pay for your product and the app does the rest for you. Sagit checks the prices and notifies you when your product is available at that price.

Demo

• Heroku

• Adobe XD

Installing / Getting started

First, install dependencies: npm install

In the project directory, you can then run:

npm run build : Builds the app for production to the dist folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.

npm start : Runs the server in production mode and serve production bundle from npm run build

npm run server:dev : Runs the server in development mode.

npm run client:dev : Runs the app in development mode. Open http://localhost:3000 (default PORT) to view it in the browser. The page will automatically reload if you make changes to the code. You will see the build errors and lint warnings in the console.

Developing

Built With

React

Tech Stack

• HTML5
• CSS3
• JavaScript
• TypeScript
• React
• React Hooks
• React Router
• MongoDB
• Express.js
• Node.js
• Storybook
• Heroku
• dotenv
• node-fetch
• JEST
• Prettier
• ESLint
• Husky
• Lint-Staged
• Adobe XD

sagit's Issues

heroku deployment

Description

As a developer
I want to deploy my site

Description

https://dashboard.heroku.com/apps

Post data to mongoDB

Description

Saving data (selected product and target price) in mongoDB

Tasks

• Posting data to mongoDB when clicking on product
• Posting target price to mongoDB after push the save button

Implement backend

Description

Getting started for backend I need to install dependencies and add js files

pull request:
lmachens/photoplay@72b70aa

Tasks

• Update server.ts
• Create route production

Add sample http/proxy

Description

Add sample HTTP requests with custom PORT and Proxy to /api

Tasks

• Add proxy to API
• Create sample http

Connect to mongodb and save credentials in database

Description

Credentials should be saved in db

Tasks

• Get connection to mongodb
• Write save credential function
• Write function for saving in mongodb
• Test if its working

3 - building search page

Description

page "Produktübersicht" contains 3 components
-header
-main
-footer
which are comprised of components as well

Screenshots

Tasks

Header

• Logo
• back button
• headline above label
• label

main
--> build API infos in tile

• product image
• headline of product
• headline 2 of company
• paragraph of online shop (where to buy)
• current price

Footer

• background
• search icon
• notification icon
• watchlist icon (star)

Building global css

Building a global css for setting color scheme and simplifying module.css of components

• Define global conditions
• Define color scheme
• set font ( and import in asset folder)
• set linear-gradient colors
• Import logo

Editing app design

Description

Edit app design due to review

Tasks

Editing following parts in design

• Editing Icons thickness
• Editing Save button
• Editing color choice
• Adding placeholder

Build API.ts

Description

Create all necessary functions to get the requested data from API

Screenshots Bsp (specific API)

let url = ${BASE_URL}${path}?;
if (query) {
url += ${query}&;
}
url += api_key=${THE_MOVIE_DB_KEY};

const response = await fetch(url);
if (!response.ok) {
const errorResult: ErrorResult = await response.json();
throw {
message: errorResult.status_message,
theMovieDBCode: errorResult.status_code,
status: response.status,
};
}
const result: T = await response.json();
return result;
}

Pull request:
lmachens/photoplay@cb547e8#diff-15c7576c5aab265c9a6f2a02b1e0061e6bc9bb8474be29c3f529f2ba8d6ad519

Tasks

• Create BASE_URL
• Create fetch function
• [ ]Create specific functions for API search

Challenge:
I won't have an API to fetch so I need to adjust the code for getting data!

Integrate API in backend

Description

When a suitable API is found I need to integrate and test the API if its working and start to build up the backend

5 - building page "Merkliste"

Description

After setting a price, the product and "wish price" is saved on page "Merkliste" to record the products and prices the user have chosen.

Screenshots

If

Tasks

building a new component: product tile with included "wish price"

• component product tile expanding with wish price and notification (on)
• notification bell can set off (after saved on watchlist, the notification bell is on by default)
• integrate logo component
• Integrate footer component

Add config vars to heroku

Description

As soon as I have an API key or mongodb key I need to add this to heruko

go to setting-->reveal config vars

Problem:
Something isn't working, check whats the problem

Get data from mongoDB and showing on watchlist page

Description

After saving a product, this product should be saved on the page watchlist, so the user can keep track of the price of his target product.

Tasks

• Need to build get route for getting data from mongoDB
• Making get request in watchlist page
• Design how to show the watchlist items

Refactor code for pulling data from website

Description

Refactoring code - instead of parsing --> using web scraping/cheerio

Tasks

• Install cheerio
• Use cheerio and get data
• Testing fetch
• Pulling rest of data I need to work with

Find suitable API

Description

No suitable API for products exist so I need to extract date from html

Prepare project repository for backend

Description

Before starting with the project I need some specific libraries / dependencies to implement.

Libraries/dependencies or modules to implement

• fetch-node
• mongodb
• api with proxy

4- building page "Wunschpreiseingabe"

Description

As user you want to set a price for a product you are willing to pay
On this page you can set the price and save
I choose building a modal which pops up when the clicks on a product element and disappears when clicking on the closing button

Screenshots

Tasks

After clicking a product tile the page before, this product will be shown slightly different (bigger picture, product infos below)

• build component of different product tile
• headline for label
• label (& placeholder)
• save button
• change save button design

Add Readme.md

Description

As a developer I would like to give an overview of my project