This is my solution to the Katas described in https://github.com/DemystData/code-kata. The App is divided into a frontend build in React which communicates with a backend NodeJS RESTful API.
The frontend side was implemented based on create-react-app
, which provides a fully set up useful for starting a React project from scratch. It uses basic React state management through useState
, nothing too complex. I've added a React router to easily manage web page routing. As the loan application process progresses, different pages are shown on the screen, which allow to move through the different stages. I've included basic error handling for non HTTP 2XX responses.
The backend component was implemented in NodeJS and Typescript, using an Hexagonal Architecture like approach. Through TS interfaces, I first come up with cohesive interfaces, which then are implemented in separate packages. This would ease replacing implementations for specific interfaces when needed.
The final resulting project is a good demonstration of what can I built in ~15 working hours.
src/components
: holds the fine grained components that can be reused across the different pagessrc/layout
: holds the components related to general layout and webapp structuresrc/pages
: holds the different pages to be rendered by the routersrc/services
: packages functionality that isn't related to React rendering, but is used by components (e.g. API calls)
db
: packages DB related functionality and settings. This project uses a SQLite database supported through the Knex utilityscripts
: common scripts for dealing with repetitive taskssrc/routes
: API routes definitionsrc/controllers
: controllers that will handle API requestssrc/domain
: holds the entities and terms core to the domain definition. Carries out core domain logicsrc/services
: specifies common facades and interfaces that group functionality depending on the Domain layersrc/repositories
: defines the common interfaces for communicating with a data sourcesrc/impl
: holds the specific implementation of common abstract interfaces and dependencies the application depends onsrc/network
: functionality related to pre/post-formatting of data before passing it over to the controllers or sending it over through the wire
Commands:
npm run build
: executes TS and generates a JS transpiled bundlenpm run test
: executes unit testingnpm run db:create
: creates a brand new DB structure (you should first remove thedb/mydb.sqlite
file first)
This is the workflow that better depicts how the project works:
- From the initial screen, the user selects a company, an accounting system and enters an amount for the loan. A new company can be registered from there if the desired one isn't shown.
- Once the user submits the initial data, the server asks for a balance sheet and temporarily stores an operation token, which should be used to further confirm the loan application. The user is redirected to a summary page to review the operation details.
- The user can either cancel or confirm the operation. If cancelled, he'll be redirected to the initial screen. If confirmed, a new loan application is stored in the server, the decision engine is executed and the user is presented with the result of the operation.
- Setup the backend
- Go to the
server
directory - Run
npm install
- Run
npm run start:dev
- Go to the
- Setup the frontend
- Go to the
client
directory - Run
npm install
- Run
npm run start
- Go to the
- App will be running on
http://localhost:4000
- Go to the main root project (which contains the docker-compose file)
- Run
docker compose up --build
- App will be running on
http://localhost:4000