DEV Community

Cover image for 🛍️ IShop: Production-Ready E-commerce SPA (React 18, Vite 5, Redux Toolkit)
Arseny
Arseny

Posted on • Edited on

🛍️ IShop: Production-Ready E-commerce SPA (React 18, Vite 5, Redux Toolkit)

#react #typescript #reduxtoolkit #vite

Hey Dev.to community!👋

I want to share IShop — a learning project and demo application built with modern React tools. It's a educational example showing how to structure an e-commerce SPA with current best practices.

🛒 Live Demo: arvik1982.github.io/IShop

📦 GitHub Repo: github.com/Arvik1982/IShop (A ⭐ would be awesome!)

✨ Key Features

This stack is carefully chosen for developer experience and production stability:

  • ⚡ Powered by Vite 5: Lightning-fast HMR and optimized builds.
  • 🗂️ Redux Toolkit 2.2+ & RTK Query: Centralized state and efficient API data fetching/caching out of the box.
  • 🧭 React Router v6: Seamless client-side navigation with the latest patterns.
  • 📘 TypeScript Strict: Full type safety for a robust codebase.
  • 📚 Storybook 8: An isolated environment to develop and document UI components.
  • 🧪 Jest + React Testing Library: Ensures reliability with comprehensive unit/integration tests.
  • 🎨 TailwindCSS Ready: Styling setup is done – just npm install and start using it.
  • 🚀 Deploy Ready: Configured for easy deployment to GitHub Pages.

🛠️ Tech Stack at a Glance

Category Tools
Core React 18, TypeScript, Vite 5
State & API Redux Toolkit 2.2, RTK Query
Routing React Router v6.26
Documentation Storybook 8.2
Testing Jest 29, React Testing Library 16
Styling TailwindCSS (Pre-configured)
Deployment GitHub Pages

🚀 Quick Start (Get running in 1 minute) 

# Clone the repository
git clone https://github.com/Arvik1982/IShop.git

# Navigate into the project
cd IShop

# Install dependencies
npm install

# Start the dev server (http://localhost:5173)
npm run dev

# In another terminal, launch Storybook (http://localhost:6006)
npm run storybook

# Run the test suite
npm test
Enter fullscreen mode Exit fullscreen mode

🎯 Why Check This Project?

📚 Clean Code: Well-structured React components with TypeScript
🧪 Tests Included: See how to test React components & Redux
📖 Documentation: Storybook shows component usage
🚀 Modern Stack: All latest versions (React 18, Vite 5, RTK 2.2)
This is primarily a learning resource and demo project — great for understanding how different pieces fit together in a modern React application!

If you find it useful for learning or reference, please consider giving it a star ⭐!

👨‍💻 About Me

I'm Arvik1982, a developer passionate about React, React Native, and clean architecture. This project is part of my portfolio and learning journey.

GitHub: github.com/Arvik1982
More Projects: Check my repos for other examples

Top comments (0)