FakeStoreApi

Simple user list of FakeStoreApi application with TypeScript, React and React Hooks.

• Client - netlify
• json-server - vercel
• api - FakeStoreApi

Run application

install dependencies and run application

npm i && npm run start

Scripts

• npm run start - start application
• npm run build - build dev mode
• npm run ts - run typescript
• npm run start:js - run built javascript
• npm run lint - lint react files
• npm run preview - preview application
• npm run test - run unit test vitest
• npm run test:ui - run unit test vitest:ui

Install tooling

Make sure you have the following installed

• NodeJS — check .nvmrc file for needed version
• Yarn

Done

• can search user by debounced typing
• can add in editable mode user, if press enter or press button add

Todo

• refactor
  • extract ui and logic for make code more readable
  • as for globalStyled remove (check doc)
  • custom hook
    • setReadable rename to toggleToggleable
    • create abstraction for localstorage, (create initilization hook)
• add view mode feature by table or list
  • add pagination and virtualization
• classical architecture to module
  • migrate from vite to webpack, vitest to jest
  • custom hook for localstorage
  • local storage or indexdb for offline
• loaders state, skeleton for load
• cannot add items with the same name in a row
• edit fields items
• create transform class for user entity to user item list
• add some styled scss
• down button must close list with animation
• relative paths for imports like @/module/ui/...
• feature api for first time init
• if last item no border bottom
• Keyboard pressing, ctr+z, ctrl+e (radix ui?) e.t.c

For local start better use local json-server it work faster

npm i && npm run start

if use local json-server change config/index.ts const URL

Frontend stack

• UI: react, chakra-ui
• Data model: json-server, local storage
• Lang: typescript
• Lint: eslint, prettier
• Deployment: netlify