- ✅ pnpm
- ✅ CRA
- ✅ React
v18🔥
- ✅ TypeScript
- ✅ NestJS
- ✅ Store
Recoil
- ✅ Router
React Router v6
- ✅ UI-framework
MUI v5
- ✅ Dev tools
- ✅ eslint
- Fast
- Efficient
- Supports monorepos
- Strict
This project was bootstrapped with Create React App.
The latest version (v18) is used here. All dependencies support React v18.
Written in TypeScript
NestJS framework TypeScript starter repository.
React Router v6 is used here.
MUI v5 is used here. MUI is a fully-loaded component library, super customizable, and easy to use.
As a store management tool Recoil is used. Check the frontend/src/store/transactions folder for more information.
root
├── package.json
├── backend
│ └── requests.http
│ └── .env
├── data
├── frontend
│ └── .env
│ └── src
│ └── components
│ └── hooks
│ └── layouts
│ └── routes
│ └── sections
│ └── services
│ └── store
│ └── theme
│ └── types
Using npm
Install pnpm:
npm install -g pnpmUsing Homebrew
If you have the package manager installed, you can install pnpm using the following command:
brew install pnpmInstall dependencies from the root:
pnpm iAdd .env in /frontend
cd frontend
paste
REACT_APP_CLIENT_PORT=3000
REACT_APP_SERVER_PORT=5000
REACT_APP_HOST=http://localhost
Add .env in /backend
cd backend
paste
PORT=5001
To build
pnpm buildTo run in development from the root run
pnpm start:devTo clean
pnpm cleanNestJS was used for future CRUD transactions additions. Currently there are two routes:
- /transactions
- /transactions/:id
To test backend routes theres is a requests.http file for testing
For state managment I used Recoil. Apart from less boilerplate then Redux I chose it for various caching reasons, use of selectors and many other benefits community is talking about. Also being familiar with Redux I haven't used Recoil before so I wanted to give it a shot.
MUI v5 was used primarily for the tabular data presentation and caching. I am pretty familiar with the framework but for the appeal and quick turnaround it was a helper.
I put TODO comments in the code where I believe there is a bug that needs to be addresses. Here are the PR's that need to be opened in the order of importance.
PR-1 Fix React state update on a component that hasn't mounted yet.
PR-2 Combine filters in the filters selectors to combine filtering. Change from Set to Arrey keys.
PR-3 Remove inline CSS into a theme
PR-4 Add dark theme like I used here
PR-5 Add a create route to backend.
PR-6 Create a add transaction form.
PR-7 Apply hybrid validation from front and back like used here
-
The latest version of
eslintwith the latest recommended collection ofeslintrules is available out of the box. It contains:- eslint:recommended
- react/recommended
- @typescript-eslint/recommended
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.