Childcare Invoice Generator

Category

App Design

Service

App Development & Branding

Tools

React with Vite, Custom CSS

Website

https://childcare-invoice-generator.vercel.app/

Overview

The challenge

Users should be able to:

  • Add a family name
  • Add children to that family group
  • Enter the amount of hours the childcare will cover
  • Apply any funding required
  • See a total of how much to charge/pay that week

Screenshot

Childcare Invoice Generator

Links

My process

  • After learning more about the versatility of React-Router-DOM, I decided to apply this knowledge to a small project I had recently completed.
  • I began by using the createBrowserRouter object to define my Outlet, loaders, path to the Dashboard, an Error page and an action to be able to logout.

Built with

What I learned

I reinforced my knowledge of mapping through data and using conditional statements to create a reliable user experience.

I learnt how to use key features of the React-Router-DOM, such as _action.

Continued development

The next steps are to:

  • Finish error handling
  • Implement the facility to print, download, and share a professional looking invoice

After this, I intend to make the app a completed full-stack project, where the data will be stored in a database and users can log in and save data.

Author

Acknowledgments

Massive thank you to Joe Abell for helping me fix some small errors I made along the way!

Connect with a member of Jorvik Web Dev to start a project or find out more info.

Hireus Close Image