yan-fung / tech-test-expense-tracker

A technical task for a Junior Developer role for Invosys.

Technical Task for Invosys

Introduction

A technical task as part of an interview for Invosys.

My task involved building a new React Component to represent the image provided. The component will be used to integrate to an endpoint which will provide the following information:

• Daily Spend Limit (£100)
• Current Spend (£25)
• List of (up to 4 and at least 1) email addresses
• List of (up to 4) mobile numbers

The component has the capability to use local storage. It should be written as a standalone component that can be easily integrated into an existing application.

I also added a "remove" button to allow users to delete email addresses and phone numbers.

The application is deployed on Vercel, and you can try the app here:

Desktop view

An alert message pops up if a user attempts to submit a phone number without adding an email.

Quick Start and Commands

1. Clone the repo:

gh repo clone /yan-fung/tech-test-expense-tracker

2. Install the packages locally:

npm install

3. Run the development server for the app.

npm start

5. Test the code in tests folder.

npm test

Technology

• React is a JavaScript library for building user interfaces, and React Testing library is a testing utility for testing React components. Combining them to create interactive and easily testable user interfaces.

Authors

🧑‍🚀 Yan Fung

• GitHub @yan-fung
• LinkedIn @yan-fung