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

Submitted

[NextJS, Tailwind CSS] - Order Summary Component

Loretta 50

@lucky-lore

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


-------- All Frontend Mentor Challenges --------

Hello there! 👋

I'm a professional React developer working through the challenges from Frontend Mentor. 3 years ago doing the Guru projects landed me a job and I am coming back to finish all the challenges as a hobby. I'm methodically progressing through these challenges, starting with the free versions, and gradually working up to the premium ones.

-------- My Journey 🚀 --------

  • Current Phase: Completing all Newbie Free projects.
  • End of Current Phase: Code revision and optimization (E.g. Componentization/modularization)
  • Next Steps: Moving onto Junior, Intermediate, Advanced, and finally the Guru levels.
  • Premium Challenges: After completing the free versions, I'll tackle the premium challenges.
  • End Phase: Code revision and optimization (E.g. Adding service workers, web workers, optimizing accessibility, refactoring projects to support PWAs)

-------- Repository Overview 📚 --------

The repository is a Lenra Monorepo. Each project in /packages is hosted on Vercel. The live versions you can find in the README.md

  • Project Status: In Progress 🚧
  • Number of Challenges Completed: 5

🔗 Repository Link

-------- Project Structure --------

Each project is housed in its own folder in the packages directory and contains all the necessary files. Feel free to explore.

-------- Stack That I will be using for the projects --------

  • NextJS
  • Zustand
  • React Query
  • Tailwind CSS

-------- Future Plans 🌟--------

  • Code Optimization: Once all Newbie Free challenges are completed, I plan to revisit each project. I'll focus on optimizing the code, implementing Progressive Web Apps (PWA), enhancing accessibility, and general code clean-up.
  • Timeframe: Due to my busy schedule, I'm aiming to complete these challenges ASAP. Your understanding and support are much appreciated!

-------- Connect with Me and Support My Journey! 🤝--------

  • Star the Repo: If you find my work valuable or interesting, please give it a star! ⭐
  • Follow Me on GitHub: Stay updated with my progress and latest projects by following me here.

Your support and feedback are crucial to my growth as a developer. Let's connect and embark on this coding journey together!

Thank you for stopping by! 🙏

Community feedback

P
Jax Teller 670

@piushbhandari

Posted

  • for that wavy pattern, i would suggest that instead of having background-repeat: no-repeat, change it to background-repeat: repeat-x;. this is because the pattern looks awkward when you scale your component to screen widths larger than 1440px

  • the proceed to payment and cancel order need to be converted to more semantic elements i.e <button> or <a> because presumably, depending on the need of this on a web page, these are going to be doing something

  • for all interactive elements, make sure to have hover/focus states to indicate that these can be interacted with

  • i would suggest adding side paddings on your main/body element so that your component isn't hugging the edges.

  • add an alt attribute to your image

Marked as helpful

1

Loretta 50

@lucky-lore

Posted

@piushbhandari Those are very valid points. Congratulations on noticing them and thank you for the feedback.

The solutions I post are not yet in complete form but any feedback is welcome 😊

0

@MundiaNderi

Posted

Happy to learn that the Guru projects landed you a job in the past. Really inspiring to newbies like me. I just started learning React and I hope to start practicing with Frontend Mentor.

Cheers!

1

Loretta 50

@lucky-lore

Posted

@MundiaNderi I'm happy you've found some inspiration in my journey! Wish you luck and all the best ❤️

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord