About
Technologies
Installation
Usage
App preview
👋 Welcome! MyInvoice is a web application for creating, storing, and generating invoices. It allows users to create accounts, login, create, delete and edit invoices, and generate PDF files with invoice data.
This is a side project that allowed me to develop my skills, try technologies that I had no contact with, and serves as a sample of my code to show during recruitment.
Live: https://my-invoices-depish1.vercel.app
I also prepared the backend of this application, but I warn you in advance that I am a fronted developer and it was my first contact with Node and express.js, so if you want to look at the code, treat it as a curiosity: https://github.com/depish1/invoices_backend
- React
- Typescript
- Redux Toolkit (global store)
- Redux Toolkit Query (API calls)
- React Hook Form (forms)
- Vite (builder)
- Styled Components (styles)
- Yup (validation)
- React-i18next (translations)
- Clone the repository: git clone https://github.com/depish1/invoices_frontend.git
- Install dependencies: npm install
- Run the app: npm run dev
- If you want to run the frontend locally and connect to the remote, server-hosted backend, paste the environment variable VITE_API from the .env.production file to the .env.development file.
- Create an account by signing up with your email address and a password.
- Login to your account using your email address and password.
- Create a new invoice by filling out the form with the necessary information.
- Read the list of existing invoices in the table after logging in.
- Update an existing invoice by clicking on the appropriate record in the table and making changes in the edit form.
- Delete an existing invoice by clicking on the menu icon in the corresponding record in the table in the last column of the table and select the "Delete invoice" option.
- Generate a PDF for an existing invoice by clicking on the menu icon in the appropriate record in the table in the last column of the table and select the "Generate invoice" option.
Sign up form
Sign in form
Invoices list view
New invoice form
Edit invoice form