Frontend Mentor - Invoice app solution

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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

The challenge

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)

Screenshot

Links

• Solution URL: solution URL here
• Live Site URL: live site URL here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Remix
• React - JS library
• Next.js - React framework
• Styled Components - For styles
• Prisma - For database management
• MongoDb - For database model

What I learned

This was a challenging project, i extended it by making it a fullstack application and including authentication for users. I learnt alot about managing the backend and creating request to the server which has been made easier by the remix framework built on top of react and prisma.

const proudOfThisFunc = () => {
  console.log("Hello user add an invoice🎉");
};

Continued development

I would like to focus on learning how to better optimize website in terms of scalability and speed. I plan to learn and build my next project using typescript to improve my experience and add type safety to my projects.

Author

• Frontend Mentor - @joshysmart
• Twitter - @saniojoshua