Phew, finally done! This was not as easy as it looked it. I used radix-ui primitives for accessible headless ui components. Added a lil bonus dashboard with yearly reports showing pie/line chart using nivo (that's where accessibility went out of the window how do people make charts accessible???). Any feedback/bugs/issues lmk!!!
Hi @diaasaur, great job!
One thing I would suggest you is to sync the filters with the url. Imagine you add to this project pagination, one user should be able to reload and see just what he needs, for example: page 2 of invoices with status paid. It is typically a good thing in web apps! If you want, check my solution of this challenge!
I realise my form doesn't work, i have used react-hook-form before and will practice using it in other scenarios.
I would like to know how to better use custom components if anyone has any suggestions. As in when should i create them, and when shouldn't I.
Thanks!
Hi @jdnCreations!
I would suggest you to keep the App file as clean as possible. Ideally, the best practice is to have one component per file. You could also improve how to convert the UI into components, this should be a process that you do before starting to code. I suggest you to read through this page of the React docs (https://react.dev/learn/thinking-in-react).
For example you could have splitted things like this: One component per step: PersonalInfoStep, SelectPlanStep, AddOnsStep, SummaryStep Then in the App you could have stored the current step state and with that deciding what step component to show.
Also, one thing that can help you is to create a "ui" folder inside the "components" folder to put there all reusable ui elements like buttons, inputs, ecc.. This allows you to keep project structure clean and don't repeat code.
I found creating this mobile phone illustration in Vanilla CSS to be quite a tedious job. Someone with professional experience, please tell me there are ways to create such layout faster and with less divs... What's the usual modern approach? A framework? Or maybe you would go for Vanilla CSS here since it's not so complicated yet?
Hi @pawelpikus,
I think you could have used less divs using only p tags when there was only text inside of the element. Also u could have wrapped all the messages in a container div with a padding to give the space around all the screen of the mobile element.
You can have a look at my implementation if u want.
Thank you,
Happy coding 😊
