Ecommerce store where fashion is taken to the next level. Live demo here.
- General Info
- Technologies and Techniques used
- Features
- Screenshots
- Setup
- Project Status
- Room for Improvement
- The objective of the project is to provide a template for future developments that may consume third party APIs.
- Since there is only one resource in the project, it was developmet partially with Scrum. The duration was 1 month splited in 2-week sprints.
- The planning was done with the User Story Mapping technique, you can find the MVP map here.
- The Wireframes implemented and to be on this project were build in Figma and can be found here.
- The Entity Relationship Diagram (ERD) can be found here.
- The internal project architecture was implemented following the concepts of the CLEAN Architecture.
- Overal code documentation was done leveraging JSDocs.
- ReactJS.
- Routing with react-router v6.
- Internal application state managed with the React Context API.
- CSS design with Tailwind CSS.
- Code Splitting was implemented to reduce loading wating times. This was achieved using Dynamic Import API and React Lazy loading components.
- The web app is 100% responsive.
- This web app is consumming a third party open-source API called Fake Store API. It provides products for Ecommerce stores.
- The API calls are performed with the Fetch API.
- Part of the data provided from API was stored in case the Fake Store API goes down or out of service.
- Unit testing was done.
- Test coverage is 25% and is increasing using Jest and react-testing-library is being used.
- While testing, the project was run using the Chrome's Development Tools "Fast 3G" and "No Caching" options. So the app is ready for slow internet connections.
- View Landing Page β
- Search product by Category and by Name β
- View Product details β
- Add Product to the Shopping Cart β
- View and Interact with the Shopping Cart β
- View and Interact with the Check-out page β
- Sign-up and Logging π
- Perform Check-out π
- Follow-up on order delivery π
- Provide feedback to the product π
Click on the image to enlarge.
Landing Page | Landing Page responsive | Store |
---|---|---|
![]() |
![]() |
![]() |
Clone this project by doing:
$ git clone https://github.com/pieroguerrero/shopping-cart.git
Then go to the folder you cloned the code and execure:
$ npm install
WARNING: If you are going to use other libraries to achieve other purposes be carefull and remove the caret (^) prefix that the dependency versions have.
Project is: in progress
There are always room for improvement, in this project so far the thinkgs that can be improved are:
- Move the Back-end to work with its own API services.
- More Unit testing coverage.
- Use Redux instead of the React Context API.