Submitted about 1 month ago

Contact Form Solution with React JS ⚛️ & Tailwin CSS 🖌️

react, tailwind-css

Hossein Heydari•540

@Hossein-H-I

A solution to the Contact form challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am most proud of my first project using React. It was an exciting experience for me, as I was able to learn and apply new concepts in a practical way. I faced several challenges along the way, such as understanding state management and component lifecycle, but overcoming these obstacles helped me grow as a developer.

If I were to do it again, I would spend more time planning the project structure and researching best practices before diving in. This would help me avoid some of the pitfalls I encountered and make the development process smoother.

What challenges did you encounter, and how did you overcome them?

One of the main challenges I faced was working with React for the first time, especially understanding how to manage state using hooks like useState. For example, implementing error messages and figuring out the best way to display them was initially difficult. I overcame these challenges by researching extensively online, reading documentation, and studying examples to better understand state management and component behavior.

Additionally, deploying the project was a new experience for me. I used Vercel to host my application, which made deployment straightforward and efficient. Overall, these challenges helped me enhance my problem-solving skills and deepen my understanding of React development.

What specific areas of your project would you like help with?

Since this was my first experience working with React, I might have made some mistakes. I would really appreciate any feedback or suggestions you have to help me improve.

Code

Please log in to post a comment

Community feedback

Marzia Jalili•7,270
@MarziaJalili
Posted about 1 month ago
Waah waah, Mashallah! 🥳

Can't believe it's your first React project because it's just flawless! Literally failed to find any issues in the code.

🌟 A teeny tiny tweak?

✅ The success message box size is a bit off on mobile, bro. It kinda causes overflow and doesn't fit with the form.

✅ The issue comes from the line below which is perfect for large screens, but prevents the p text to wrap, and therefore, taking too much space and causing overflow:
```
width: max-content;
```
✅ To fix this set a media query within the selector and set a fixed with for the element:
```
.success-mess-box {
  @media (max-width: 768px) {
    width: 90%;
  }
}
```
You're basically crashing React, no cap! 🔥🔥🔥
Marked as helpful

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