Childcare Invoice Generator

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

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

Links

• Solution URL: (https://github.com/hannahf86/adviceGeneratorApp)
• Live Site URL: (https://childcare-invoice-generator-qjhydycuk-hannah-feehans-projects.vercel.app/)

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

• React
• React-Router-DOM
• Vite
• JSX
• CSS
• React Icons
• Toastify
• Mobile-first workflow

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

• Website - Hannah Feehan
• Twitter - @hannahfdev

Acknowledgments

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