This project was initially bootstrapped with Create React App and then modified to taste. It's based on the requirements of the Digbang Coding Exercise.
This particular exercise was performed by Gustavo Malamud
The following technologies were used for this app:
- Create React App (previously mentioned)
- React Hooks
- UseBetween as a state sharing tool (ContextAPI would probably have been overkill for this)
- SCSS for CSS pre-processing and variable declaration,
- BEM for some if not most of the CSS declarations,
- Flexbox for layout distribution,
- PropTypes (a little bit since our AppContainer squealed a little bit over the contents of the
{children}element) - A couple of helper functions to shape and format the currency inputs better and do some calculations,
- React-Currency-Format as our handler for currency based inputs,
- And a little bit of ESLint and Prettier for validating proper functioning and cleanliness of the raw code.
- RC Slider as per the project's requirements.
The idea behind the structure of this app was to keep the application as compartimentalized as possible, while maintaining some kind of bond within the components in the shape of state being shared for two main elements: the credit amount balance, and the interval it would be spread in.
Please use this with Yarn. Not that this wouldn't work with NPM, we're just better friends with Yarn on this exercise.
To run, clone this repo, and first, run:
and then:
Open http://localhost:3000 to view it in your browser.
This project was deployed to Vercel.
As a part of this project and due to time constraints I would have like to do a couple more things with this, namely:
- Unit testing through Jest+Enzyme
- E2E or Integration Testing through Cypress
- Move this to SSR through NextJS.
- Ellaborate a mobile friendly PWA.
- Refactor to Typescript.