Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Failed to decode param 'order-summary-component-gCBkGCVS5%20-%20Issues%20%B7%20joaomaia-code'
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Invoice App | React, Next.js, styled-components, Formik, Framer Motion

#framer-motion#react#styled-components#next
P
ApplePieGiraffeβ€’ 29,085

@ApplePieGiraffe

Desktop design screenshot for the Invoice app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
5guru
View Challenge

Design Comparison

SolutionDesign

Report

2

Accessibility Issues

8

HTML Issues

View Report

ApplePieGiraffe’s questions for the community

Hello, everybody! πŸ‘‹

This is my 30th solution on Frontend Mentor! πŸŽ‰ (And my first Guru level challenge submission.) 😎 This was definitely a tricky challenge, but I got to learn and try out many new things! πŸ˜€

I used React and Next.js to build the site, styled-components to style it, Formik (and Yup) to handle the forms in this challenge, and Framer Motion to add some page transitions and animations. πŸ˜„

There were quite a few things I had to learn in order to complete this challenge, and I'm not sure if I did them all correctly. πŸ˜₯ Looking back, there are a few things I wish I would have differently, but it's a learning experience! πŸ™‚

If anyone could share some resources on how to manage and organize larger projects like this, I'd really appreciate it! πŸ‘ Lots of resources that I find only focus on specific things (like creating a popup or using certain features of a tool) and not so much how to approach and think about an entire app. πŸ™ƒ

If you'd like to learn more about my project, see the README in my Git repo (where I also list a few quirks in my solution).

Feedback welcome and appreciated! 😊

Happy coding! 😁

BTW, click on the sidebar avatar for the attribution.

Community Feedback

P
The Burrito Doggieβ€’ 1,260

@BurritoDoggie

Posted

hello APG!

I love the cool animations and you also did an excellent job!

Keep Coding!

                          (@@)
                             \__/

2


P
ApplePieGiraffeβ€’ 29,085

@ApplePieGiraffe

Posted

@BurritoDoggie

Thanks, BurritoDoggie! πŸ˜€

1

Tesla_Ambassadorβ€’ 2,860

@tesla-ambassador

Posted

@ApplePieGiraffe Sorry I am late, with my response but I must say this is very great work. You have really done it bro! I love everything about it and just as you guessed... the first thing I did was switch to dark mode πŸ˜‚ Anyways, Cheers man! Happy coding (...and Keep on coding too!)😎

2

P
ApplePieGiraffeβ€’ 29,085

@ApplePieGiraffe

Posted

@tesla-ambassador

Haha, thanks, dude! πŸ™Œ

1

Tesla_Ambassadorβ€’ 2,860

@tesla-ambassador

Posted

@ApplePieGiraffe πŸ‘πŸ˜‰

1

P
Emmilie Estabilloβ€’ 5,340

@emestabillo

Posted

This is excellent APG! I think it's your best one yet. Great attention to detail. Smooth transitions and I like the little extras, like the number of invoices on the browser tab and the surprise when clicking on your avatar πŸ˜€ Hopefully someone comments regarding architecture since I'm curious about that as well. Filter works perfectly for a single category, my feature request would be to add for multiple categories lol :-)

2


P
ApplePieGiraffeβ€’ 29,085

@ApplePieGiraffe

Posted

@emestabillo

Wow! Thank you so much, emestabillo! 😊

I actually initially thought of allowing multiple filters to be selected on the home page, but I changed my mind for some reason after looking at the design files. But I do agree that's a good idea! Thanks! πŸ˜€

1

Kingsley Aguβ€’ 285

@didyouseekyng

Posted

Honestly I really admire your work, especially what you do with animations, I'm getting there someday and you're juss motivating me to get there. I love the dark and light theme, well done APG!! Mobile design is pretty solid.

1


P
ApplePieGiraffeβ€’ 29,085

@ApplePieGiraffe

Posted

@didyouseekyng

Haha, thanks, didyouseekyng! πŸ˜€

I'm glad to hear the mobile layout is working well since that's something I was a little anxious might be buggy! πŸ˜…

0

drallasβ€’ 375

@Drallas

Posted

Hello APG

This is a great version of the Invoice App, i couldn't find big issues playing with the invoices and testing the responsive layouts.

Only thing i noticed is that the new invoice animation vs edit invoice animation are at different speeds. To open and close an existing invoice takes a bit long... but the animations are sweet! :)

Looking forward to solve this challenge myself someday.

1


P
ApplePieGiraffeβ€’ 29,085

@ApplePieGiraffe

Posted

@Drallas

Thank you, Drallas! πŸ˜€

I actually have the same animation playing for both forms, so it's interesting that opening/closing an invoice seems to take a little longer than a new invoice... thanks for letting me know! πŸ‘

0

Samuel Palaciosβ€’ 615

@samuelpalaciosdev

Posted

Hi, ApplePieGiraffeπŸ‘‹

Congratulations, another amazing solution from you (as expected). I love the soft and cool animations you used. Your work impresses me, again, congratulations, mate ;).

Keep coding🧑

1


P
ApplePieGiraffeβ€’ 29,085

@ApplePieGiraffe

Posted

@samuelpalaciosdev

TY, Samuel! πŸ‘

0

P
Elise Rousseauβ€’ 685

@SarahHenriette

Posted

Hey ApplePieGiraffe πŸ™‚ !

Congratulations, the project is just on top ! RespectπŸ‘.

1


P
ApplePieGiraffeβ€’ 29,085

@ApplePieGiraffe

Posted

@SarahHenriette

Thank you, Sarah! πŸ˜€

1

P
Matt Studdertβ€’ 13,511

@mattstuddert

Posted

Hey APG,

Congrats on completing your 30th (!!) challenge overall and your 1st Guru level challenge! I'd agree with Em and say this is your best one yet (although you've posted lots of brilliant solutions!) πŸŽ‰

Here are some thoughts related to some of the bugs and issues you mentioned in your README.md:

  • You can use lots of different approaches to structure React applications, as I'm sure you've noticed! On Frontend Mentor, I use an altered version of a domain-driven architecture. This is mostly because we use Redux for state management. If I were starting fresh today, I'd probably go a different route. The way you've structured your code works well for this size project, though. It's easy to navigate, you've separated the components nicely, and you've created good utility functions.
  • I'd agree that using CSS custom properties instead of using Styled Component themes is a better approach. I'm feeling this pain on the Frontend Mentor codebase and will look to refactor at some point!
  • The quick flash of light will most likely come from the fact that the app needs to pull the state from localStorage. So it's partially rendered by the time it can read the state. In a typical app where you're pulling data, this configuration would be stored as a user preference in the database. This means it wouldn't have the flash, as everything would be set during server-side rendering in Next.js. That might not be the issue, but that would be my guess anyway.
  • You're right about the custom dropdown not being accessible. As it is, the focus never goes into the dropdown if navigating by keyboard. This is because you've got display: none; on the input elements. Instead, I'd recommend using a .sr-only class to visually hide the checkboxes and keep them accessible to screen readers. Here's a good article from the A11y Project about visually hiding content to learn more.

After looking at your code, here are a few recommendations:

  • Now that optional chaining in JS is a thing, you don't need to use the && operator so much. That means this line: filteredInvoices && filteredInvoices.length === 0 could become this filteredInvoices?.length === 0.
  • You're using a div with span elements to display the invoice page's addresses. Instead, you could add more context in the HTML by using the address element. You can read more about the address element on MDN here.
  • You could add the media query breakpoints to your theme. Seeing as they're used throughout the app, this would reduce duplication of values.

It's awesome to see you adding animations and extra details like the attribution overlay. Your attention to detail is incredible!

A couple of feature suggestions I'd love to see would be:

  • Try making the form disappear if someone clicks away from it instead of always needing to click the buttons at the bottom.
  • I know this wasn't in the design, but you could remove the "Mark as Paid" button from invoices that have a "Paid" status.

Overall, you've done an AMAZING job on this challenge! Especially considering you're still new to React and this was your first time using most of these packages.

Keep up the brilliant work! πŸ™Œ

Marked as helpful

5


P
ApplePieGiraffeβ€’ 29,085

@ApplePieGiraffe

Posted

@mattstuddert

Thank you so much, Matt! 🀩 This helps a lot! πŸ‘

I 100% agree with everything you said and I'll look into all of those points and try to learn from them! 😊

1

P
Anna Leighβ€’ 5,135

@brasspetals

Posted

Hey, APG! Congrats on your 30th solution! πŸ₯³πŸŽ‰

I'm nowhere near the point where I could give this a proper critique, and it seems like you've already gotten some amazing feedback, so I guess I'll just pile on the praise bandwagon! πŸ˜„

The animations and transitions are fantastic as always - the UX feels great. I know you've utilized various versions of the attribution button/avatar in previous projects, and it remains a great touch (and something I might have to steal!).

Definitely bookmarked for reference. πŸ‘ Looking forward to the next one!

1


P
ApplePieGiraffeβ€’ 29,085

@ApplePieGiraffe

Posted

@brasspetals

Thanks as always, Anna! 😊

Your solutions remind me to pay extra-careful attention to detail (which I tried to do). πŸ˜…

I'm very happy to hear the UX feels great for you and that you liked the attribution! πŸ˜‰ I thought a bunch about those things and really hoped they would come out well! 🀞

1

Aalekh Patelβ€’ 145

@infinity7998

Posted

This is soo neat! APG, I'll use your site as the inspiration for the animations. This is phenomenal work!!! <3

FWIW, I'm currently working on this project and have made it into a full stack app with React/Nextjs and Fauna (including authentication and with plans to turn it into a SaaS). I'm looking forward to deploy it in a few weeks.

1


P
ApplePieGiraffeβ€’ 29,085

@ApplePieGiraffe

Posted

@infinity7998

Thank you! πŸ˜€

And good luck with your project! πŸ‘

1

Aaron Stroudβ€’ 435

@astroud

Posted

Well done ApplePieGiraffe! I just got out of the hospital, so I don't have time to dive in to your code, but I've bookmarked it for future reference.

1


P
ApplePieGiraffeβ€’ 29,085

@ApplePieGiraffe

Posted

@astroud

Thanks Aaron! πŸ‘ Hope you're doing okay, now! Take care! πŸ™‚

1

@ecodolphin

Posted

Hey, APG!

I'm just reading here throw all the above feedback, and it's so warm and inspiring, also like overall community here. It's very valuable experience to have a touch with such folks like you, thanks for that :)

I'm pretty new here, try out your app something, and have a small question. Is it suggested any validation on form fields content? I just tapped my keyboard randomly a lot and just three fields produce some warnings, actually number data fields (so, I typed into those fields very big numbers, my invoice had a price over 10e+40 though...), and also e-mail field. Also my colleague told me a story, when he while testing the web app sent around 2Gb strings in authorization forms :D So, is it suggested such kinds of validation mechanisms to apply into Frontend Mentor challenges, or is it an overhead for this type of tasks and not suggested here?

Happy coding :)

Edit: here are some pictures with artifacts of such an irresponsible input :D https://drive.google.com/drive/folders/1DWqMXkqhrISK1GLCX2N2tE8rEul9wNcC?usp=sharing

2


P
ApplePieGiraffeβ€’ 29,085

@ApplePieGiraffe

Posted

@ecodolphin

Hey, there! Thanks for the feedback! πŸ˜€

I did add some basic form validation to the forms in this challenge (like to make sure that data of the correct type is entered into each form field), but I don't think I considered what would happen if a user entered really long numbers. πŸ˜…

Most of the Frontend Mentor challenges come with a README that outlines the basic steps and goals for the challenge, but if you want to add any other details then you're more than welcome to! πŸ˜‰ Of course, taking care of any issues that you find in your solution (such as this one) is encouraged.

But solutions aren't usually perfect (like mine)β€”so thanks for pointing this one out! 😊

1

Karimβ€’ 590

@Galielo-App

Posted

Hey ApplePieGiraffe!

I'm working on the same project and I will submit it in a few days. Your build is awesome, it's very responsive and reactive. However, using react dev tools, I saw that a lot of re-renderings happening on your application, mostly from components on your Invoice page. So I started looking at your code and I saw that you're not using memo or useCallback on your functions and components. What's happing is that every time the state of your parent element changes, all the components are going to re-render again, even if they don't need to re-render. If possible, I would like to copy your repo and create a solution for this problem. Let me know if I can, and maybe, we could work together to solve this problem!

Thanks for your time and happy coding :)

1


P
ApplePieGiraffeβ€’ 29,085

@ApplePieGiraffe

Posted

@Galielo-App

Hi, there!

Yesβ€”that's totally fine! Feel free to fork the repository and play around/change stuff. Thanks for taking a look and mentioning that issue. I'm still learning a lot about React, so any suggestions and improvements are welcome! 😊

Happy coding to you, too! πŸ˜€

1

Karimβ€’ 590

@Galielo-App

Posted

@ApplePieGiraffe

awesome!

In a few days, I'm gonna copy the repo and when the job is finished I'll create a README.md with all the changes I made, all the problems I solved and how everything works so you can learn new important things as a react developer :)

Thank you again and happy coding!

1

P
ApplePieGiraffeβ€’ 29,085

@ApplePieGiraffe

Posted

@Galielo-App

Thanks, Galielo! I'll be looking forward to that! πŸ˜€

1

karenefereyanβ€’ 375

@karenefereyan

Posted

I'm stuck on your projects. Amazing stuff. I love the way you document them on github. Gave me some ideas. I've been curious about the dark theme switch thingy. Will take time to study how you achieved the functionality. Maybe you could apply margins to the filter options to make it more breathable and easily distinguishable

1


P
ApplePieGiraffeβ€’ 29,085

@ApplePieGiraffe

Posted

@karenefereyan

Thank you! πŸ˜€

0

Steen Toonsβ€’ 260

@Steentoons

Posted

Wow!! This is so awesome.

You did a fantastic job from the animations to the light and dark themes to the filters and responsiveness. I will definately take time to learn how all this was achieved from your repo. And congrats for submiting your guru solution.

1


P
ApplePieGiraffeβ€’ 29,085

@ApplePieGiraffe

Posted

@Steentoons

Thanks so much! 😊 I hope you can learn a thing or two from looking around. Happy coding! πŸ˜€

0

Fidel Limβ€’ 2,695

@fidellim

Posted

Wow! Hello ApplePieGiraffe!

Amazing work! Hopefully, I'll be to create complex projects like this one too! I'll bookmark it for future reference too :) Thank you!

1


P
ApplePieGiraffeβ€’ 29,085

@ApplePieGiraffe

Posted

@fidellim

Thanks, Fidel Lim! πŸ˜€ Keep coding! πŸ‘

1

Omar Elbastawesyβ€’ 150

@omarelbastawesy

Posted

This is an excellent job. Keep coding.

1


P
ApplePieGiraffeβ€’ 29,085

@ApplePieGiraffe

Posted

@omarelbastawesy

Thank you very much! πŸ˜€

0

Please focus on giving high-quality, helpful feedback and answering any questions ApplePieGiraffe might have. Here are some key points to consider:

  • Does the solution include semantic HTML?
  • Is it accessible, and what improvements could be made?
  • Does the layout look good on a range of screen sizes?
  • Is the code well-structured, readable, and reusable?

You can read our community guidelines if you're unsure what to post.

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!