Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions6Comments7

All comments

  • Héctor Figuereo• 370

    @hector535

    Submitted

    UPDATE

    Updated the solution to add certain improvements, such as loading messages to improve the UX, cache to speed up searches already performed, and small corrections to the CSS that prevented the app from being displayed properly on smaller screens.

    🔨 Built with

    • Vite
    • React
    • TypeScript
    • React Router v6
    • React Virtuoso
    • React Hook Form
    • React Query
    • ZOD
    • Local Storage
    • SASS Modules
    • CSS Grid
    • Flexbox

    ✨ Addons

    • Some transitions were added to make the app more appealing
    • A virtualized list to improve performance when a high number of invoices accumulate on the screen

    I'm always open to suggestions on how to improve the project structure, accessibility, naming convention, code reuse, or anything else you think I should improve. It would be deeply appreciated.

    Thank you. 😊

    Invoice app (React | TypeScript | React Hook Form | React Query)

    #react#react-query#react-router#react-testing-library#typescript

    2

    Vodina Efem• 120

    @Simplyvoda

    Posted

    Good one !

    1
  • Vodina Efem• 120

    @Simplyvoda

    Posted

    Well done ! :)

    0
  • Vodina Efem• 120

    @Simplyvoda

    Posted

    Hey Artur, I think you did a good job on this , well done ! :)

    1
  • Vodina Efem• 120

    @Simplyvoda

    Posted

    Hey ! Very good job on this. How do you get your work to be the exact same size as the original design ? Any tips you could share ? Thank you .

    0
  • Vodina Efem• 120

    @Simplyvoda

    Posted

    Hey there ! Good attempt, you just need to work on the font (The heading are in capital/uppercase) as well as centering the container. I wonder , did you use flexbox for centering ??

    0
  • Vodina Efem• 120

    @Simplyvoda

    Posted

    Nice solution , increase the border radius on the container, add shadows to the container as well and it would look closer to the original design. Well done :)

    0
  • GeorgeBryzh• 80

    @GeorgeBryzh

    Submitted

    While i built project, i struggled with changing font's color of a elements, that default have a underline and purple text. I used .change-plan-link:link putting color property here. But there wasn't color changes. Then, I put color into .change-plan-link:visible selector and here worked color changing. I don't know why i didn't get along with :link. Could you share is there sense to use header putting here img.

    I used Grid to make plan elements inline

    Order summary card with Grid

    1

    Vodina Efem• 120

    @Simplyvoda

    Posted

    This is very good

    0