@seanhillweb
Submitted
Hello Frontend Mentor Community,
This is my solution for the Advice Generator App. I am a free user, and do not have access to the design files from the Pro version. I built this app using React, Next.js, TailwindCSS, and Axios.
Difficulties Encountered:
This was my initial foray into using Axios. Seems like a solid solution for managing API handling. No major difficulties.
Technologies Used:
Submitted
Hello Frontend Mentor Community,
This is my solution for the Todo App. I am a free user, and do not have access to the design files from the Pro version. I built this app using React, Next.js, TailwindCSS, React Hook Forms, and Next Themes.
Difficulties Encountered:
This was my deep dive into the Reducer pattern. I think I came away with a greater understanding, but getting there was trickier than expected. I'm happy with how the state and event handling is managed.
Questions:
Does anyone have a recommendation for a tool to achieve the drag-and-drop interaction?
Technologies Used:
Submitted
Hello Frontend Mentor Community,
This is my solution for the Bookmark Landing Page. I am a free user, and do not have access to the design files from the Pro version. I built this app using React, Next.js, TailwindCSS, React Hook Forms, and Headless UI.
Difficulties Encountered:
SVGs as Components and Assets: I was unable to configure SVG support as both Components and Assets. I followed instructions from here but kept receiving build errors.
Questions:
Has anyone added SVGR support for Next.js projects? What does your configuration look like?
Technologies Used:
Submitted
Hello Frontend Mentor Community,
This is my solution for the Interactive Card Details Form challenge. I am a free user, and do not have access to the design files from the Pro version. I built this app using React, React Hook Forms, Next.js, and TailwindCSS.
Difficulties Encountered:
Component rendering: Initially, I was struggling to have the text on credit cards update in real time from the form inputs. I figured out that the forms were re-rendering on every input change. Decoupling the form from the page into a component, and then passing in the state as a prop fixed it!
Technologies Used:
Submitted
Hello Frontend Mentor Community,
This is my solution for the Notifications page challenge. I am a free user, and do not have access to the design files from the Pro version. I built this app using React, Next.js, and TailwindCSS.
Difficulties Encountered:
Array manipulation: Initially, I was struggling to add the functionality to mark all messages as read. However, I think I found a really clean solution thanks to this documentation: https://react.dev/learn/updating-arrays-in-state
Questions:
I created a static data.js file to keep track of user data; is there a better structure that would resemble real-world application?
Technologies Used:
Submitted
Hello Frontend Mentor Community,
This is my solution for the Age Calculator App. I am a free user, and do not have access to the design files from the Pro version. I built this app using React, Next.js, TailwindCSS, and React Hook Forms. This is my first time using React Hook Forms.
Difficulties Encountered:
Multi-input validation: I was unable to find a clean way to validate all of the fields to make sure the date is valid. My initial approach was to use date-fns and the isValid method for verification, but I wasn't sure how to pass the form data before submission.
Questions:
Does anyone have any experience setting up a form schema with Yup or Zod? What would be a good structure using this project as an example?
Technologies Used:
React React Hook Forms Next.js TailwindCSS Date-FNS
Submitted
Comments and feedback welcomed!
Is it possible to add a smooth transition on hover for buttons that use gradients as backgrounds?
