A fullstack web app to track the price of any Amazon Product

A fullstack web app to track the price of any Amazon Product

Amazon Product Tracking App V2 A fullstack web app to track the price of any Amazon product and store user's traces in one place

Amazon Product Tracking App V2

Description

A fullstack web app to track the price of any Amazon product and store user's traces in one place

Build status

Success: See Live

Started on: 13 Aug 2020 Completed on: 16 Aug 2020 Last modified on: 6 October 2020

Screenshots (V2)

Landing Page

Dashboard

Track New Product

Edit Tracked Product

Delete Tracked Product

Tech/framework used

  • MERN Stack (MongoDB, Express, React, Node)
  • Bootstrap
  • Sass

Features

  • Create an account
  • Track any product's price on Amazon

How to use it locally

Get your MongoDB connection string

Follow from Part 1 (Create an Atlas Account) to Part 5 (Connect to Your Cluster) in this documentation.

In Part 5, skip to Connect to Your Atlas Cluster and follow from Step 1 to Step 4 to get the connection string.

Now, clone the repository, then:

cd into the working directory and install dependencies in both server & client side:

cd React-Amazon-Price-Tracker
npm i
cd frontend
npm i

Back to the root folder and create a ".env" file:

cd ..
cd ..
touch .env

In ".env", enter your mongoDB connection string and JWT secret key:

  • If you're using VS Code, you can use this command to start editing
code .
  • Paste in the code, replace mongodb-connection-string with your MongoDB connection string, and edit yourJwtSecret (for better security, use a complex string).
NODE_ENV=development
MONGO_URI=mongodb-connection-string
JWT_SECRET=yourJwtSecret

Install concurrently to run both server and client side in one terminal, and run the app:

npm i -D concurrently
npm run dev

Future Update

  • Button to re-track all products
  • Email user when the product price is lower than the ideal price
  • Secure token with httpOnly cookie
  • Make user profile customizable
  • Add more authentication methods
  • Add password reset and email confirmation

Credits

Project Inspiration:

Video by Web Dev Simplified

Design Inspiration:

Landing Page Dashboard Dashboard CRUD Popup Modal

Images:

Flaticon

Download Details:

Author: yewyewXD

Demo: https://trackerbase.herokuapp.com/

Source Code: https://github.com/yewyewXD/React-Amazon-Price-Tracker

react reactjs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Routing in React without React-Router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.

Forms of Composition in JavaScript and React

One of the core ideas in functional programming is composition: building larger things from smaller things. The canonical example of this idea should be familiar with legos.