The "Design Handoff Project" involves taking a design created by a UX designer and transforming it into a fully functional code. This project focuses on building a landing page for a "Yoga Studio." The chosen technology for implementing the landing page is React.
The journey of this project began with a critical step - a meeting with a talented UX designer. During this initial meeting, we immersed ourselves in a deep dive into the design, paying close attention to the intricacies of animations and the functionality of each component. This collaboration allowed us to gain a comprehensive understanding of the project's vision.
As development kicked off, the process involved constant communication with the designer, ensuring that every animation and component aligned with the initial design concept. To facilitate this, we deployed the website, granting the designer access to view the ongoing progress and newly implemented features on a daily basis. This iterative approach helped us maintain a close alignment with the design's evolution.
The command below is a combination of installing dependencies, opening up the project on VS Code and it will run a development server on your terminal.
npm i && code . && npm run dev
npm i react-i18next i18next
npm i react-router-domWhile this project brought immense learning opportunities, it was not without its challenges. One notable challenge was the integration of SVG images into the project. Implementing hover, active, and other interactivity effects within the context of the Tailwind CSS framework presented a unique set of hurdles.
To address this issue, I undertook self-study sessions for two days to explore solutions. I experimented with different approaches, such as utilizing SVG directly in React Vite and harnessing the power of the "group-hover" utility class. Additionally, I explored the use of JavaScript to control and manipulate the desired hover effects, further enhancing the interactivity of the project.
Time constraints added an additional layer of complexity to this project. With a tight schedule of only 3-4 days to complete the entire project, time management and efficient problem-solving became critical. The limited timeframe pushed me to stay focused, innovative, and resourceful in order to meet the project's goals.
I embraced these difficulties as opportunities for growth and learning, which ultimately enriched our development experience.