Project 1 - Expense tracker
Overview of the Project:
This is the project to create a single page app using react basics to track daily expenses for users. The tracker has three dimensions. Receiving and validating user input is the first step. Listing out entered data is the next step to data entry. And visualizing the data is the third and advanced step. The project touches the basics of CRUD operations and touch base on using third-party libs for advanced use cases like visualization.
Goals
- Student should be able to understand basics of CRUD operations, using props state and working with form inputs
- Listing the entered data is something we do daily as a front-end developer. Student should know about listing the data and usage of react Keys
- Students should be able to include a third party library and use it along with their own react app.
Key Highlights of the Project:
- Create an expense tracker application which should perform following operations
- User should be able to add expense for an item for required month
- User Should be able to update expense at any given point of time
- User should be able to delete expense at any given point in time
- User should be able to see comparative analysis of year wide expenses with bar graph visualization
Deliverables of this project:
- A proper folder structure which seeds through create react app
- App should work well with data entry, and one should consider validations
- Listing the user data is crucial and it should work well with CRUD operations
- App should visualize the data using third part library
Expected Outcomes:
- One should be aware about how to install react app and use it for local development
- One should be aware about creating components, using states and props
- One should be aware about lifting state and usage of keys for list items
- One should be aware about installing third party library and use along with app