/invoice-app

A user-friendly invoice app built with Next.js, Tailwind CSS, and Mongoose, featuring Framer Motion for smooth animations. Users can manage invoices, perform CRUD operations, filter by status, toggle light/dark mode, and maintain state across sessions. Developed using TypeScript for reliability and scalability.

Primary LanguageTypeScript

Invoice App

Table of Contents

Prerequisites

  • npm: Node Package Manager for JavaScript
  • Vite: Frontend build tool for modern web development
  • TypeScript: Typed superset of JavaScript.

Tech Stack

  • Next.js: React framework for server-side rendering, automatic code splitting, and easy deployment
  • Tailwind CSS: Utility-first CSS framework for rapid UI development.
  • Mongoose: MongoDB object modeling for Node.js.
  • Framer Motion: React animation library for smooth, high-performance UI transitions.

Interaction

Users able to:

  • View the optimal layout for the app depending on their device's screen size
  • See hover states for all interactive elements on the page
  • Create, read, update, and delete invoices
  • Receive form validations when trying to create/edit an invoice
  • Save draft invoices, and mark pending invoices as paid
  • Filter invoices by status (draft/pending/paid)
  • Toggle light and dark mode
  • Keep track of any changes, even after refreshing the browser

Screenshot

Links

Getting Started

  1. First of all you need to clone app repository from github:
git clone https://github.com/DavitDvalashvili/todo-mern-app.git
  1. Next step requires install all the dependencies.
npm install
  1. To see project in action
npm run dev

Deployment

Before every deployment you need to create build file.

npm run build

after this you can use this file to deploy project on server.

Structure

├── app/
│ ├── api/
│ │ ├── invoice/
│ │ │ └── [id]/
│ │ │ └── route.tsx
│ │ ├── invoices/
│ │ │ └── [status]/
│ │ │ └── route.tsx
│ ├── invoices/
│ │ ├── page.tsx
│ │ ├── [invoiceID]/
│ │ │ └── page.tsx
│ ├── layout.tsx
│ ├── not-found.tsx
│ └── page.tsx
├── components/
│ ├── common/
│ │ ├── ConfirmDelete.tsx
│ │ ├── CustomCheckbox.tsx
│ │ ├── CustomDatePicker.tsx
│ │ ├── CustomSelect.tsx
│ │ ├── FilterBox.tsx
│ │ ├── InputBox.tsx
│ │ └── Loader.tsx
│ ├── layout/
│ │ └── Header.tsx
│ ├── invoice/
│ │ ├── Invoice.tsx
│ │ └── InvoiceDetails.tsx
├── config/
│ └── db.ts
├── hooks/
│ └── useWindowWidth.ts
├── models/
│ └── invoice.model.ts
├── styles/
│ └── global.css
├── types/
│ └── types.ts
├── utils/
│ └── numberGenerator.ts
└── README.md

Author