Welcome to project Charge-Up! An invoice full-stack application that allows users to register/login, add invoices based on billing information, view and sort through invoices, and edit, delete, and mark invoices as paid or pending. The application contains light and dark mode options, a mobile first responsive design, and user account details that can be updated at any time.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
The application consists of a frontend and backend, both of which are created through Next.js, meanwhile the database is created through using Postgres configured through Vercel. The application makes use of API routes to hit various data fetching endpoints to make CRUD operations to and from the frontend, backend, and database.
The initial welcome, login, and register pages are viewable by logged out users, and not accessible by logged in users since they are already signed in. If they try to access these pages, they will be redirected back to the dashboard page. The dashboard, account, create invoice, specific invoice id pages, and all of the features and components associated with them are only viewable and accessible by logged in users.
Welcome Page:
Dashboard Page / Dark Mode / View Invoices:
Dashboard Page / Light Mode / View Invoices:
Dashboard Page / Mobile Version
Dashboard Page / Select Invoice Type [All, Paid, or Pending]
Edit invoices:
Delete invoices:
Account Page:
Link: deepgit-charge-up.vercel.app
- HTML
- Tailwind CSS
- Typescript
- Next.js
- Vercel / PostgreSQL
- shadcn-UI [UI components]
- React Icons
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!