"Bargain basement" is a modern frontend web application for an ecommerce web app where users can browser and purchase packages. Project development started on November 28, 2019, and ends on December 5, 2019. This project also relates to https://github.com/AndrewRedican/bargain-basement-service.
- User should be able to clearly see package names and prices
- User should be able to access a detailed page for each package that shows more detail about said package
- All pages should include some form styling to make the shop look inviting
- User should be able to access my basket at anytime // Pending to finish view
- User should be able to add packages to my basket/cart whilst either being on the front page or a package detail page
- User should always see the current value of my basket and any discounts applied across the shop -> Only implemented this on the checkout view.
- User should receive a 10% discount on my basket for purchasing multiple packages
- User should be able to sort and search packages on the front page to easily packages
https://bargain-basement.firebaseapp.com
- NodeJS must be installed https://nodejs.org/en/.
- Git must be install https://git-scm.com/downloads.
- Clone or download repository. In prompt/terminal run
git clone https://github.com/AndrewRedican/bargain-basement.git - Install project dependencies from the project's root directory. Run
npm iin prompt/terminal. - Run node script to start dev server and serve the web app. Run
npm start. - For development, you can disable CORS on the browser. On Windows for Chrome browser, you can follow these steps: In windows command prompt:
- Locate and cd into chrome.exe directory. Example:
cd C:\Program Files (x86)\Google\Chrome\Application chrome.exe --disable-web-security --user-data-dir="C:\Users\<INSERT_YOUR_USER_NAME_IN_SYSTEM>\AppData\Local\Google\Chrome\User Data\Default"
- Go to localhost:8080.
- Run
npm run build - Run
firebase deploy
- Eslint with recommended standards https://eslint.org/
- Prop-Types https://github.com/facebook/prop-types
- Using Flux Data Flow Pattern https://facebook.github.io/flux/docs/in-depth-overview/
- Testing actions, reducers. See package.json script
-
Created repository from scratch. I opted to use some a UI kit. Initally evergreen-ui, but quickly discovered it was not suit for puropse (very opinionated, barely customizable), opted for shards-react instead which I found very please to work with. Please note I had not worked with either package before, so I may not be fully aware of best practices.
-
It is assumed that Real-Time updates are not required as we are using RESTful API to comunicate with backend, therefore, implemented firebase without real-time updates.
-
Images used for this project are hosted in Firebase storage, and not merely on the assets directory. Becuase of this the url to download an image needs to be queried. The app queries for the actual image url to download once, it will keep data on Redux store for later access on any of the components of the application.
-
I have intentionally used multiple React paradigms for demonstration purposes. Class vs Functional components. Passing props through parent or directly connecting to redux.
-
Database is NOSQL decided to go with this approach as it is my stronger suit. By doing so, I take advantage of dot notation to the fullest extent. This removes the need to iterate over lists and performing a comparison. However, a few trade-offs where I used Object.values() to convert into list.
-
Intentionally decided to use webpack / webpack-server instead of going for larger react frameworks such as create-react-app or react-boilerplate which wraps some complexity. It serves to demonstrate my ability to work with webpack. Most importantly, considered that for the size of project is not necessary to add a full framework. In real scenarios, depending on whether we would expect to maintain this
-
Could not finish properly setting up eslint / jest / enzyme / Travis CLI.
-
Used 'selectors' to access store, a common approach used, in libraries such as redux saga to decouple asyncronous functions from the redux store.
-
Intentionally used the approach where all reducers, actions, types, for redux stores in single directories. For larger projects, you can keep the reducer, actions, types, and tests even on a directory per component.
https://www.toptal.com/designers/subtlepatterns