Visit The Site »
Download this repository
|
Report A Bug
|
Fork It
- The Project Brief
- The Technical Requirements
- Architecture
- Tools & Technology Used
- Setup & Use
- Feature Previews
- Contributions, Issues and Forking
- Creator
- Show Your Support!
- Credit & Acknowledgements
- Licensing
This is the React & Redux capstone project, to be completed by all students of Microverse.
Unlike the projects in the React & Redux module before, this project is performed under timed conditions with milestones, and comes complete with a project brief, business specifications and technical requirements. The purpose of such an undertaking, is to provide and practice scenarios which more closely adhere to the real world - we're not always given an indefinite amount of time and the complete picture, so it pays to practice producing quality software under pressure.
This capstone in particular, following the React & Redux module, focuses on consolidating our acquired skills in both domains. In order to complete this capstone successfully, we are tasked with creating a React web app to the given specification, with either React Hooks, or Redux utilisation for state management.
This particular project tasked us with creating a catalogue for clothes. The original specification and design for the project followed those of Denys Chagaida's 'Pimp My Dog Online Store', however, as we were not required to adhere to and directly clone the original design (although it was an option), I opted to change the basis for the store and create the archetypal online clothes store commonly seen today.
Within our provided project requirements, it was stated that we must build the page with at least two types of page:
- One page where all the displayed items could be filtered via given parameters
- A second page for the item details
Additionally, was the extra stipulation that our app must collect data to be used in our web app externally. This was to be performed by means of asynchronous API calls.
The file structure of this app uses a View-State Split design, in order to entirely separate each components state management, from it's view.
The choice for using such a file structure is that it is exceedingly easy to visualise and organise the state of the project - there is no room for confusion. Additionally all redux code is located in one place, with the (predominantly) React based code location in another.
Whilst this project required we draw our data into the app from an external source, in searching, I could not find a suitable API which both offered a substantial amount of free calls, nor the desired data-sets.
Instead, I decided to design and implement my own API solution, using JSONBIN.io. The JSONBIN platform allows you as a user to upload your own JSON data to their web service, store it, and then securely access it via an API call. The folder named Clothes Assets found at root, houses the raw assets initially acquired in order to build the relevant API data required in order to make this project.
Images were hosted on BeeIMG and their URLs we're added to each JSON clothing product.
API calls are performed using Axios and Redux-Thunk middleware has been implemented to handle the successful (or, unsuccessful) API return and store it into the Redux state immediately.
The state for this application was largely maintained using Redux, with the occasional use of Redux hooks.
Languages & Frameworks
- HTML5
- SASS
- ES6 Javascript
- React
- Redux
- NPM
NPM Packages Of Note
Testing
Linters & Quality Control
Deployment
- Heroku
Head here if you'd like to see the live site. If you'd like a closer look, continue reading....
If you would like to tinker with this project a little more, then we will have to ensure your machine is correctly setup.
-
Ensure that you have Node.js installed on your machine. The project will not run without it.
-
Time to download this repository. Either download the repository here or clone this repository onto your computer. Not sure what 'Cloning' is? Follow this guide.
-
Once you have this project downloaded or cloned to your machine,
cdto the root of the project in your terminal. Not sure what 'CD' means? Follow this guide. -
Time for the last step of setup! Type
npm installinto your terminal. This will install all the required packages and software that your machine does not already have.
Whilst this project has been predominantly built for use as a web page, there are still a few commands you can use to interact with the project:
npm start- This will start up the project in your default browser. From here, any changes made to the project will update in real time.npm test- This will run all implemented tests using Jest.npm build- This will build a static, production build of the project.
A quick look through Clothes Inc, displaying the loading screen whilst API data is collected, the home screen, the clothes filters and finally the individual product page.
The design of the site is maintained in the mobile view, however everything is shrunk down and resized in order to maintain a pleasant web experience.
Contributions, issues and feature requests are not just welcome, but encouraged!
First and foremost, if you have any problems running or setting this project up, please submit it as a bug on the issues page. right away!
If you want to make your own changes, modifications or improvements, go ahead and Fork it!
- Fork it
- Create your working branch (git checkout -b [choose-a-name])
- Commit your changes (git commit -am 'what this commit will fix/add/improve')
- Push to the branch (git push origin [chosen-name])
- Create a new Pull Request
Rory Hellier - Github
If enjoyed this project, thought the implementation was good or even liked the colour scheme, please do give the project a 🌟. It makes a huge difference!
All images and clothing information contained within this app are sourced from ASOS. All credit goes to them for supplying the assets for this project.
This project is MIT licensed.