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
- Feature Sliced
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 clean architecture and feature sliced methodology.
- 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 β
App business logic:
- Product page
- Confirm modals
- Wishlist page or modal
- Product's sorting feature
- Feature toggle
- E-commerce bag logic
- E-commerce order logic
- Stock logic (available of products)
- Product details sizes
- Private routes
Technologies:
- CSS Modules β Tailwind CSS (?)
- Redux Toolkit Query β React Query (?)
- Redux Toolkit β Zustand (?)
- Vite β NextJS in SPA mode (?)
Other:
- Move colors to css vars
- Fix FSD errors
- Add Dark theme
- Add FSD public API pattern
- 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
- Turn on stylelint on commit
- Install dependencies
npm install
- Copy
.env.example
to.env.local
cp .env.example .env.local
- Start Vite development server
npm start
or start Storybook stand
npm run storybook
- Package
@mswjs/data
can not sync data inlocalStorage
. With the current implementation (without synchronization), after updating the page, the state (cart, wishlist) is lost. I made a pull request with this feature (mswjs/data#277), but it has not merged yet. So I use forked version (you can see path in package.json).
Licensed under the MIT license.