This is a submission for a mock Spend Tracker feature for the Empower Frontend Engineering Challenge.
The app is built in React, utilizing JavaScript
, TypeScript
, HTML
, and CSS
.
It leverages Tailwind, Framer Motion and Material Icons.
I've also built a CRUD API hosted on Vercel to provide a simple backend for testing this app.
Start Client
npm install
npm run dev
Based on the given time window I was able to:
- create a unified aesthetic
- build a responsive layout
- build a fully functioning React app that communicates with an API
- Dashboard with Account and Tracker listing
- Account Detail page with Transaction listing
- Tracker Detail page
- Add, Edit and Delete functionality for Accounts and Trackers
- Logic to Create Transactions for testing purposes
Given more time I would have attempted to include the following missing requirements:
- A Spend Analyzer component leveraging a library like React Charts to create an engaging visualization for user to see thier spending over a period of time.
- Testing integration via React Testing Library and possibly Vitest
Backend: Though this build utilizes a simple active API, it assumes that in a real-world setting the actual backend would be much more comprehensive and provide a more detailed schema and logic such as connecting transactions to accounts.
Security: Based on the timeline, this app also assumes there would be authentication setup on this client, possibly via User auth and tokens.