/invoicer

Optimize Your Finances with Invoicer.

Primary LanguageTypeScript

🚀 Invoice App

This is a solution to the Invoice app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

✅ Table of contents

💡 Overview

The challenge

The challenge is to build out this multi-page website and get it looking as close to the design as possible.

Users should be 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
  • Bonus: Keep track of any changes, even after refreshing the browser (localStorage could be used for this if you're not building out a full-stack app)

Screenshots

desktop version desktop version

tablet version tablet version

mobile version mobile version

Links

🎯 My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Mobile-first workflow
  • Accessibility in mind
  • Next.js 14 – Full-Stack Web Framework
  • React – JS library
  • Clerk – Authentication and User Management
  • Prisma – Node.js and TypesScript ORM
  • TypeScript
  • Vitest – Next Generation Testing Framework
  • Storybook – Frontend workshop for UI
  • Tailwind CSS – CSS Framework
  • Vercel – Frontend Cloud

What I learned

  • Next.js 14:

    • TODO

  • Clerk:

    • TODO

  • Prisma:

    • TODO

  • Vercel Postgres:

    • TODO

  • Storybook:

    • TODO

Useful resources

👨‍💻 Author