Store TypeScript

A dynamic e-commerce storefront built to master TypeScript integration in a React application.

DEMO: https://przemek-przybylak.github.io/store--typescript/

🚀 Project Overview

This is a sample online store where products are fetched dynamically from a mock API. Users can browse items, add them to a shopping cart, and remove items as needed. The primary goal of this project was to practice TypeScript in a React environment and understand type-safe state management.

🔧 Technologies & Tools

React

TypeScript

Redux for state management

Redux-Saga for handling asynchronous actions

Styled-Components for CSS-in-JS styling

🎯 Key Features

Dynamic Product Fetching: Retrieves product data from an external (or mock) API on page load.

Shopping Cart: Add, update, and remove products with live cart state managed via Redux.

Asynchronous Flows: Utilizes Redux-Saga to handle side effects and API calls.

Type Safety: Interfaces and types everywhere to prevent runtime errors and improve developer experience.

Responsive Design: Simple layout that works on desktop and mobile screens.

📦 Installation & Setup

Clone the repository:

git clone https://github.com/Przemek-Przybylak/store--typescript.git cd store--typescript

Install dependencies:

npm install

or

yarn install

Run the development server:

npm run dev

or

yarn dev

Open http://localhost:3000 in your browser.

🚀 Deployment

The live demo is available at: [INSERT_DEPLOYMENT_LINK_HERE]

📝 What I Learned

TypeScript in React: Defining interfaces for props, state, and API responses.

Redux & Redux-Saga: Structuring actions, reducers, and sagas for clean async logic.

Styled-Components: Writing scoped, dynamic CSS-in-JS with theme support.

Best Practices: Linting, formatting, and organized folder structure for scaling

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.