shopping-cart

Description

[Odin] Clean design of an e-commerce page with shopping-cart capabilities.

See it live on pklepa.github.io/shopping-cart

Screenshots

home page

main shop view

single item view

checkout

Objectives & Outcomes

The main motivation for this work was to design and deploy a multiple page application using `react-router-dom´.

Beyond that, other learning outcomes were:

• Design reusable custom components to be used in multiple places using Styled Components;
• Implement simple yet soothing transition animations between views using the Framer Motion library;
• Further comprehension of state management and state lifting in React;

Development

Javascript Framework

• React

Libraries, extensions and tools

• ESLint - A linter tool to standardize code
• Framer Motion - Motion library for React.
• Github Pages - Hosting
• Prettier - Code formatter
• React Router - Router tool for React applications
• Styled Components - Javascript and CSS integration library.
• Styled Icons - Icon aggregation for styled-components

More information

• Made as a solution for the Shopping Cart Project in The Odin Project

• ESLint and Prettier configuration on VSCode, by Manorisms

• GH-Pages Deployment