sandeulju / nukeapp

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

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:

• 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

Running locally

1. Install dependencies

npm install

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

cp .env.example .env.local

3. Start Vite development server

npm start

or start Storybook stand

npm run storybook

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 (mswjs/data#277), but it has not merged yet. So I use forked version (you can see path in package.json).

License

Licensed under the MIT license.