An open source frontend application built using the React ⚛️ and Feature-Sliced Design 🍰.

This app is a work in progress. See the roadmap below.

• React, Redux Toolkit, React Hook Form, Zod
• Vite, TypeScript, PostCSS
• Architecture based on Feature-Sliced Design

Live demo

• Application stand
• Storybook stand

About project

Right now, I'm using this project as an experiment polygon to try modern technologies and see how a can see frontend application in {{CURRENT_YEAR}}. This project structure combines two methodology: Clean Architecture and Feature-Sliced Design.

Features

• Fully Typed (API adapters, catched error with type guards, form and env variables validators by zod)
• Developing by Feature Sliced Design (Layers isolation and composition, Public API, DDD)
• Fully API emulation with mswjs (all enpoints with JWT authorization)
• Storybook stories
• Best practice comments in code ✅

Roadmap

App business logic:

• [x] Product page
• [x] Confirm modals
• [x] Wishlist page or modal
• [x] Product's sorting feature
• [x] Feature toggle
• [x] E-commerce bag logic
• [ ] E-commerce order logic
• [ ] Stock logic (available of products)
• [ ] Product details sizes
• [ ] Private routes

Other:

• [x] Move colors to css vars
• [x] Fix FSD errors
• [x] Add Dark theme
• [x] Add FSD public API pattern
• [x] Turn on stylelint on commit
• [ ] Fix TODO into code
• [ ] Write storybook stories
• [ ] Write article to my blog about main concepts
• [ ] Add I18n
• [ ] Write screenshot tests for stories
• [ ] Write integration tests for user's use cases

Running locally

Note: You can use npm or yarn as package manager instead of pnpm, just remove npx only-allow pnpm from package.json.

1. Install dependencies

pnpm install

2. Copy .env.example to .env.local

cp .env.example .env.local

3. Start Vite development server

pnpm start

or start Storybook stand

pnpm storybook

4. If you use VSCode, you can set custom settings for auto fix on save (provided by antfu/eslint-config)

Troubleshoots

• Package @mswjs/data can not sync data in localStorage. With the current implementation (without synchronization), after updating the page, the state (cart, wishlist) is lost. I made a pull request with this feature (https://github.com/mswjs/data/pull/277), but it has not merged yet. So I use forked version (you can see path in package.json).
• Package @feature-sliced/eslint-config don't work on eslint 9 with flat config. That's why it's turned off now.

License

Licensed under the MIT license.