iflashlord / warehouse-frontend

Warehouse Frontend

Basic configuration

Proxy configuration

In the file src/vite.config.js, you can change the proxy configuration to the backend server. It uses the localhost with port 7000 by default. API is going to be available at http://localhost:PORT/api.

Run / Test / Build

Basics

To run the project, you need to install the dependencies with yarn or npm install.

Development

yarn dev

Build

yarn build

Test

yarn test

Structure

src
    - components
      - ProductList
    - constants
    - hooks
    - pages
    - router
    - models
    - styles
    - urls

Components

ProductList

Hooks

useFetchProducts

Pages

Home

Technical Decisions

- usgin styles components
- using react hooks
- retry approach for fetch products
- using axios

I have used the primary and fast approach for this project, and in some parts, I have different ideas on the implementation and improvements.

I have used the hook to make the central component cleaner, and the primary goal is the separation of concern.

I did my best to make a clean structure ready for long-term development.

Improvements / TODO

- add tests
- remove any types
- only load if slide shows in view
- caching approach
- useMutation hook for post data
- make product components more generic
   - add configuration
   - add renderProp for elemetns
   - internanalize
   - add more a11y support

Vite

I decided to use Vite as the build tool, which is more customizable, light, clean, and way faster than CRA.

styled-components

I decided to use styled-components as the styling library, which gives the encapsulated style and cleaner JSX form for nodes in the development process.

License

This project is licensed under the terms of the MIT license.