Balance Checker - Take-Home Assignment for Dwelling Technologies Inc.

Simple balance checker that accepts 16 digits and returns a fake balance based on the digits entered.

Demo

Screen.Recording.2023-07-07.at.7.27.35.PM.mov

Libraries/Frameworks used

Backend

• Backend Framework ExpressJs, Bootstrapped using Express Generator
  • First time using express, was curious about how its structure would let me get a basic route done and testable and found it was quite nice. A bit heavy on the boilerplate and built-in comments but had a quick turnaround to hitting an api locally.

Frontend

• Spun up quickly with the create react App package.
  • Its is one of the quickest ways to get a single page react app off the ground for a small project
• MaterialUI for a styling/component library
  • Some prior experience with this component library, styling is a bit complicated since there are a handful of ways to go about it but pretty quick to get standard uis ready

Planning

- This is kind of my 'product' ish way of diagramming the basic needs of the frontend and backend along with some immediate ideas to keep in mind during development and ticket breakdown

Frontend 'ticket' breakdown

• Create component to show the balance checker component and button
  • Create component to hold list of balances
  • Create component for balance row + formatting
  • Sort the cards in order of balance
  • Validate on correct format
• Test for each component + its validation

Backend 'ticket' breakdown

• Research frameworks for quick spin-up
• Make an api that accepts a 16 digit number
  • Make a provider that takes in the input
    • Last digit ends in 5 or 2, sum up first 12 numbers
    • else return 0
  • Test

Good additions I didn't have time to do but would be nice

• Using Yup for validation
• Converting to Typescript (mostly because I'm more comfortable with the string typing but it also makes it nicer to test when you can export interfaces)
• Creating a flexible theme setup for the Mui components and a master theme
• Disabling the button on invalid number (not done in favor of design)
• Setting up github actions for auto running tests
• Creating a more fleshed out api structure to accommodate future moves to a db
• Modal to ask them to enter the full card number in order to delete it (+ are you sure check)
• Integration test
• Testing/Screenshots on a set of expected devices for use
• Breaking determineBalance code from the router into a set of functions in a handler
• Add jest as a dep for the api and write unit tests