Shopping Cart App
Setup
- Install Node.js if you haven't already
- Clone this repository
cd
into the downloaded directorycd
into server and runnpm install
from the command line to install all dependencies
Setup for client-side
- Navigate to client director and run
npm install
- Navigate to client directory and run
npm run dev
If you get error STD::bad_alloc, then delete the .parcel-cache file and rerun npm run dev
DataBase Setup
- Create mongoDB account - https://account.mongodb.com/account/register
- Create AWS cluster
- Go to
collections
and create a new database (shopping_cart) for example with two collectionsproducts
andcartitems
. Note: If you are going to work in pairs create two databases (for example team1_shopping and team2_shopping) and each database should have two collectionsproducts
andcartitems
. - Under Security tab, click Database Access, and on the right
add new database user
. After you enter username and password, clickadd user
at the bottom right corner. - Under Security tab, click Network Access, and whitelist your IP address.
- Once your cluster is created, under Clusters tab, click connect and copy the connection string which will look something like this
mongodb+srv://test123:<password>@cluster0-zamyu.mongodb.net/test?retryWrites=true&w=majority
. Instead oftest123
there will be your username, and you will need to replace<password>
with your password andtest
with the database name. - Finally, inside your project folder,
cd
into server, create new file.env
and enterDB=<paste the string from above here>
. It will look similar to thisDB=mongodb+srv://test123:mypass@cluster0-zamyu.mongodb.net/shopping_cart?retryWrites=true&w=majority
.
Viewing Static Version of the App
While developing the app, you can take a look at the static pages that you'll eventually convert into a dynamic application. To do so, visit http://localhost:5001/ui
in the browser. You are also encouraged to read and reuse the markup, classes and ids used in these static files in your components. They're located in the /server/public/ui
folder.
Developing the app
The starting point of the application is the /client/src/index.js
file. That's where the root component of the application - App
- is rendered to the DOM. You can add new components to the /client/src/components
folder and new test files to the /client/src/tests
folder.
For the initial application data, you can start with the following list of products:
[
{
id: 1,
title: "Amazon Kindle E-reader",
quantity: 5,
price: 79.99,
},
{
id: 2,
title: "Apple 10.5-Inch iPad Pro",
quantity: 3,
price: 649.99,
},
{
id: 3,
title: "Yamaha Portable Keyboard",
quantity: 2,
price: 155.99,
},
{
id: 4,
title: "Tinker, Tailor, Soldier, Spy - A John le Carre Novel",
quantity: 12,
price: 13.74,
},
];
DOCS
You can find documentation in the docs
folder in api.md
file.