Skip to content

Latest commit

 

History

History
111 lines (80 loc) · 3.78 KB

readme.md

File metadata and controls

111 lines (80 loc) · 3.78 KB

Static Badge

image

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

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
  1. Copy .env.example to .env
cp .env.example .env
  1. 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.