Building a Landing Page with Chakra UI and Framer Motion: My Experience as a React Developer

As a React developer, I recently had the opportunity to work on a landing page project. I used Chakra UI for styling and found it to be a great choice for creating a clean and modern design. With Chakra UI, I could quickly create components such as buttons, navigation, modals, and forms that looked great and were easy to use.

Another feature of Chakra UI that I appreciated was its seamless integration with Framer Motion. This animation library allowed me to easily animate some elements on the landing page, adding an extra level of interactivity and engagement for the user. The integration between Chakra UI and Framer Motion was straightforward and well-documented, making it easy to implement animations with minimal effort.

Challenges

While working on the landing page project, I encountered several challenges that pushed me to develop my problem-solving skills and taught me valuable lessons about UI development. Here are some of the challenges I faced, along with the solutions I implemented to overcome them.

Non-scrollable modals

While working on the landing page project, I encountered a challenge with non-scrollable modals. Specifically, the modals containing the contact forms weren't scrollable, which made it difficult for users to fill out the forms. After spending some time investigating the issue, I discovered that the problem occurred whenever the drawer component was open.
To solve this issue, I created a state variable that tracked whether the modal was open and used conditional rendering to display the drawer component; so whenever the modal was open, the drawer component closed. This approach ensured that the modals were always scrollable and provided a better user experience for the website visitors.

ESP account creation

ESP stands for Email Service Provider. An ESP is a company that provides email marketing and email communication services to businesses and organizations. ESPs typically offer tools and services to manage and send large volumes of email, such as newsletters, promotional messages, transactional emails, and more. Some popular ESPs include Mailchimp, Constant Contact, SendGrid, and Campaign Monitor.

As part of my work on the landing page project, I needed to set up a way for customers to send messages to the client. I decided to use the SendGrid API for this purpose and spent some time learning how to send emails through the API. I even wrote the backend code that would allow customers to send messages to the client.
However, when I tried to create an account on SendGrid, my application was denied. I attempted to create an account using several different email accounts, but all attempts were unsuccessful. I received the same message each time: "You are not authorized to access SendGrid."
To work around this issue, I decided to use the mailto attribute to create a pre-filled email that would be opened in the user's email app. This solution allowed customers to send messages to the client without having to navigate to another page or use an external email service. Although this challenge initially caused some frustration, I was able to find a suitable workaround and complete the landing page project successfully. I had to opt for this solution because the deadline for the project was fast approaching.

Conclusion

I found working with Chakra UI to be a great experience. It allowed me to focus on the functionality of the landing page while still creating a beautiful design. I look forward to using Chakra UI in future projects and continuing to explore its capabilities.

Here's a link to the landing page.

Let me know what you think. Cheers!