- In order to implement a responsive, single-page application capable of dynamically rendering with third-party API data, we utilized React Context and Hooks.
- Despite being a front-end capstone that explicitly placed back-end implementation out of scope, used Nodejs to utilize Express.
- Simplified API requests by implementing a proxy server in Express.js that adds authentication while forwarding requests to an existing RESTful API.
- Aside from being the sole technology used for the aesthetic styling of this application:
- All styling, including functional implementations like the modals and image gallery, were written solely with CSS.
- The use of Grid made the overlay button functionality and precise placement of static assets accessible and simple.
- Flexbox was instrumental in handling the wealth of dynamic data being delivered to the page.
- Each of the 4 contributors took independent ownership over the development of each module present in the application, which introduced the need for rigorous, automated testing.
- React Testing Library kept our efforts and tests focused on the user experience while making it possible to test the vast amount of interactions and dynamic components in our application.
- Webpack was our solution to elegantly handle our numerous static assets, implement JSX, and harness ES6 in this project.
How to host this single page application on your local machine.
-
Make sure you've pulled the version you want to run (see Git Workflow)
-
Make a copy of the file
server/config/config.example.jsand rename toconfig.js -
Assign the
API_KEYvariable to your GitHub token -
Install dependencies
npm install
-
In one terminal, build the webpack bundle
npm run watch
-
In another terminal, start the server
npm start
-
Visit localhost:3000 in the browser
The application has 3 main component:
Developed by Logan Qiu
-
Gallery
-
Product Information
-
Product Description
Developed by Sheri Tsao
- Related List
- Outfit List
Developed by Ran An
- Rating Summary
- Review List
