Project #WDP211101

Introduction

This project is an example of the e-commerce webpage build during the bootcamp for Frontend Web Developers provided by Kodilla.

A freeware PSD graphic template and an issue tracking tool were used by a group of junior devs led by a mentor-product owner to mimick commercial programming environment in Kanban methodology.

Getting started

Download the project to your computer and initialize the project with CLI:

npm install

To start the live developing version:

npm run start

To build the distribution version:

npm run build

Demo version

https://calm-faloodeh-4af13f.netlify.app/

Built with

• React.js
• React-redux
• Jest & Enzyme
• Bootstrap
• ESLint & Prettier
• Flexbox & CSS Grid
• CSS custom properties
• Styled Components

Details

This project uses React, React Hooks, React Router and Redux in order to present practical skills in these technologies. They allowed it to make the state management more structured.

Please note that this web app was build mainly for demo purposes on a viewport with 1200 px min-width. The tablet and mobile platforms will not provide optimal user experience.

Features:

• online shopping
• user interactions: compare products, star rating,
• add and remove products from the basket
• sort products by price & colors

What we have learnt

1. JavaScript seems easy to understand, when code is readable to other developers. Components make sense when are broken down line by line.
2. Planning: best practices to break the project down into small enough components.
3. Use of the inspector tool: fastly mind-set when searching for the bugs.
4. Application State Management: used localstorage and Redux.

Troubleshooting

Resolving conflicts in package-lock.json and yarn.lock:

• delete the files and reinstall npm install or yarn install