rifkiandriyanto/wayahNgopi-frontendWeb

Frontend point of sale build with React Js - redux

SCREENSHOOT DEMO

• Login

• Home

• Product

• Cart

• Payment

• User

• history

DEMO

Table Of Contents

• Intro
• Requirments
• Related Projects
• Dependencies
  • Clone Repo
  • Install Depedencies
  • Update Depedencies
  • Setup Environment
  • Run server development
  • Build For Production
• Dependencies
• License

---

Intro

WayahNgopi is a point of sale application covering all sales features starting from product management, orders, and transaction statistics. This application was created using Reacts js and backend using Express and MySQL.

---

Features

• Manage Product (CRUD)
• Manage Category (CRUD)
• Manage User (CRUD)
• Chart statistics of Revenue
• Fancy UI Design
• Simple Add to cart and manipulate quantity in checout
• Order product
• Count payment receipt
• Print checkout
• History of order, weekly, and detail history
• Authentication with JWT in backend
• Persist and rehydrate a redux store

---

Requirments

• Nodejs v10 LTS version
• Npm package / Yarn package

---

Related Projects

This project is related to several platforms

• Backend https://github.com/rifkiandriyanto/wayahNgopi-Backend
• Mobile App https://github.com/rifkiandriyanto/wayahNgopi-frontendMobile

---

Installation

1. Clone Repo

clone the repository

$ git clone https://github.com/rifkiandriyanto/wayahNgopi-frontendWeb
$ cd point-of-sale-frontend

Install Depedencies

$ npm install

Update Depedencies

$ npm update

Setup Environment

Before project development or build for production, you should create new .env file, edit REACT_APP_URL variable to backend server. you can found the backend server here.. https://github.com/rifkiandriyanto/wayahNgopi-Backend

REACT_APP_URL=<Backend-api-url>

npm development

if you want start on development mode.

$ npm start

Build For Hosting in Server

build for production ready, and host ready

$ npm run build

---

Dependencies

List of depedencies using in this project

Plugin	Description
React	Web Framework
Axios	HTTP client for request API
Chartjs	Chart Statistic
Redux	Global State Management
Redux Promise Middleware	Promise handler for react redux
Redux Promise Persist	Persist and rehydrate a redux store
Dot Env	Dot Env

License

MIT

@2020 - Rifki Andriyanto