This project was created using React and bootstrapped with Create React App.
It is a clone of this demo, which I have customized as I saw fit.
You are an employee of a company and you've spent some money doing some company tasks.
The table on the page provides you with the following information:
-
the date you spent the money
-
what you spent the money on (i.e. Merchant)
-
how much was spent
-
the status of the expense: whether it's a new one, if you've been reimbursed, or it's in progress
-
a comment providing the context in which you made the expense
You can search the table using the form on the left (if you're viewing the application on a large screen)
or in the dropdown when you click on Filters to your right, just before the top-level navigation
(if you're viewing the application on a mobile device).
The beauty of the application is that it updates in real-time in response to your search.
More so, you can sort the table using any of the table headers.
You're also provided with a total amount the company still has to reimburse you
(calculated by summing expenses with the New status).
You can switch the theme to light/dark using the sun/moon FontAwesome icon in the top-level navigation.
In the nearest future, I will provide a description of how I used React components, state, props, context, built-in and custom Hooks, etc. to complete this project.
Please send me an email if you have a job for me or you want us to collaborate on some project.