Skip to content

This project is an Invoice Management System built with Next.js, TypeScript, Tailwind CSS, React Query, Jest, and Testing-Library. It features a user-friendly interface with dark theme support, account creation using email and CRUD operations on invoices.

Notifications You must be signed in to change notification settings

DomZem/invoice-next-app

Repository files navigation

Invoice Next App

This project is an Invoice Management System built with Next.js, TypeScript, Tailwind CSS, React Query, Jest, and Testing-Library. It features a user-friendly interface with dark theme support, account creation using email, secure authentication with JWT access tokens, and CRUD operations on invoices. The application allows users to read invoices with pagination, filter them by status (Draft, Pending, Paid), and displays toasts for every mutation operation. Additionally, the project is responsive on mobile devices

📸 Project Screenshots:

home page dark theme

home page light theme

empty invoice page dark theme

empty invoice page light theme

new invoice form modal dark theme

new invoice form modal light theme

invoice details page light theme

update invoice status toast light theme

edit invoice form modal light theme

delete invoice modal light theme

invoice page with data

🧐 Features

Here're some of the project's best features:

  • Create account using address email
  • Secure app against unauthorized users using jwt access token from the backend saved as http only cookie
  • Read invoices by pagination
  • Filter invoices by status, like: Draft, Pending and Paid
  • CRUD operations on invoice
  • Display toast on every mutate operation
  • Responsive on mobile device
  • Dark theme

🚀 Credentials

If you want to check the app immediately, you can use that example account:

🛠️ Installation Steps:

⚠️ Before you run these commands make sure you run your backend server.
You can do that by using that repo: https://github.com/DomZem/invoice-nest-api. I described there step by step what to do.
After that setup env variable to contain link to server.

Clone project

  git clone https://github.com/DomZem/invoice-next-app.git

Go to the project directory

  cd invoice-next-app

Install dependencies

  npm install

Run app

  npm run dev

💻 Built with

Technologies used in the project:

  • Next JS

  • TypeScript

  • TailwindCSS

  • React Query

  • Jest

  • Testing-Library

About

This project is an Invoice Management System built with Next.js, TypeScript, Tailwind CSS, React Query, Jest, and Testing-Library. It features a user-friendly interface with dark theme support, account creation using email and CRUD operations on invoices.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages