This project has been built with the MERN stack along with styled components for CSS, cypress for end-to-end test.
This project was deployed to Heroku for a demo: https://order-viewer.herokuapp.com/
-
Node.js - Download and Install Node.js. You can also follow this gist for a quick and easy way to install Node.js and npm
-
MongoDB - Download and Install Atlas and compass - Cloud and GUI for MongoDB, Make sure it's running on the default port.
-
NPM - Install NPM for all dependencies both in server and client.
-
React - Install react using creat-react-app.
Install dependencies for server npm install
Install dependencies for client npm run client-install
Run the client & server with concurrently npm run dev
Run the Express server only npm run server
Run the React client only npm run client
Server runs on http://localhost:5000 and client on http://localhost:3000
-
run npm run dev first and keep the program running
-
npm run test-e2e to lauch the test
To seed the database with data of orders, customers, companies, items and develiveries from the ".csv" format, run
Destroy all data: node seeder -d
Import all data: node seeder -i
-
Demonstrate using MongoDB to query multiple tables and to accomplish a join.
-
Build an API for the front end to comsume, which can be easily integrated and extended using Node.js and Express.
-
Creating and running single-page application using React.js and hooks(useState,useEffect,useMemo,useRef). It offers react-table, styled-components to make implementation easier.
-
I used MongoDB to setup database but still find it's a little hard for NoSQL to join tables, even I used aggregate, lookup and virtual field of MongoDB to solve this problem,but I still got the delivery amount unsovled.So I used the data of delivery number instead of delivery amount. I'd like to use Postgres and SQL query to refactor later on.
-
I'd like to use Bulma to have better CSS design and UI appearance for table.
-
Currently the orders can be searched by numbers of order name, as "001-","002-". I'm still exploring to use Fuzzy Search for searching job, which can be searched by any character or number.