Shoppy

Ecommerce store where fashion is taken to the next level. Live demo here.

Table of Contents

• General Info
• Technologies and Techniques used
• Features
• Screenshots
• Setup
• Project Status
• Room for Improvement

General Information

• The objective of the project is to provide a template for future developments that may consume third party APIs.

Technologies and Techniques used

Planning and Design:

• 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.

Front-end:

• 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.

Back-end:

• 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.

Testing:

• 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.

Features

• 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 🔜

Screenshots

Click on the image to enlarge.

Landing Page	Landing Page responsive	Store

Setup

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 Status

Project is: in progress

Room for Improvement

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.