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

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

• TypeScript, React, Redux Toolkit, RTK Query, React Hook Form, Valibot
• Webpack, ESlint, Stylelint, Vitest, Testing Library
• Architecture based on Feature-Sliced Design

Live demo

• Application (login: admin; password: supadupapass)
• Storybook

About project

This project will be an example of how to create a large-scale project with clean code. Project based on a Feature-Sliced Design methodology. Currently it doesn't have much functionality. In the future it will have all the basic features that most projects have.

Don't pay too much attention to the design, that's not the point of this project. Maybe in the future it'll be enhanced.

Features

• Typed (API adapters, form variables validators by Valibot)
• Developing by Feature-Sliced Design (Layers isolation and composition, Public API, DDD)
• Fully API emulation with Mock Config Server
• Tested with Vitest, Testing Library
• Storybook stories (Can change theme and language)
• Mock API calls for tests and storybook with Mock Service Worker
• Dark mode (Capability to easily implement a new theme)
• Localization with i18next
• Code splitting or lazy loading (Lazy load react components and redux store (reducers))
• Linting TS and styles with ESlint, Stylelint
• Regression testing with Chromatic
• CI using GitHub Actions linting and testing on push and pull request actions
• Infinite scrolling for list of articles
• Using the esbuild for bundling

Roadmap

App business logic:

• Profile pages
• Upload avatar feature

Technologies:

• ...

Other:

• Fix FSD errors
• Fix TODO into code
• Create a nice looking design

Running locally

1. Install dependencies

pnpm install

npm install

yarn install

2. Copy .env.example to .env

cp .env.example .env

3. Start Webpack development server

pnpm dev

npm run dev

yarn dev

or start Storybook

pnpm storybook

npm run storybook

yarn storybook

Troubleshoots

• the cross-env package needs for a workaround, because the ts-node package has a bug with esm type modules and crashes during initialization. It needs to wait for fix it. (Issue 1) (Issue 2)
• we should name the file babel.config.cjs with the extension cjs and not js, because of esm bug.
• json-server has a bug on the last version (v1.0.0-alpha.23) so we use 0.17.4 version instead. (temporary replace package on Mock Config Server)
• Defining global variables by the esbuild-loader is not working for some reason. So far, using a default DefinePlugin by webpack. (esbuild-loader docs), (source)

License

Licensed under the MIT license.