Figma to React Frontend Conversion
Budget: $30 – $250 USD
I have a React, Typescript, Next.js fronted application that I developed based on a finished Figma design. The application is currently static and requires improvements. It consists of five main pages.
The project has the following requirements:
- Ideal Timeframe: A fast turnaround of less than a week is expected.
- Budget: The budget for this project is USD 200, including all aspects described here.
The successful candidate should possess the following qualities:
- Experience in working with React and the ability to provide evidence of past React projects.
- Ability to work quickly and efficiently to meet the tight deadline of less than a week.
- A portfolio showcasing their ability to integrate Figma designs into front end components.
- Good communication skills for regular content updates.
- Experience in developing websites where the client regularly updates the content to ensure a smooth process.
Tasks to be completed:
- Refactor and Fix the Code:
Break the code into reusable components for better maintainability and reusability.
Follow best practices such as using a consistent coding style, descriptive variable names, and comments to explain the code's purpose.
Address small rendering and logic errors, such as preventing navigation to other pages without element selection. Detailed instructions will be provided for each page, including API calls and expected data types.
- Ensure Code Alignment with Figma Designs:
Review the code and make sure that the layout, colors, fonts, and other visual elements match the Figma designs.
Ensuring the code is responsive and works across various devices and browsers
- Implement Web Designs in Figma:
Create Figma designs for both desktop and mobile versions of the web application.
Use web parts for browsers and mobile parts for mobile users to optimize the user experience on different devices.
- Activate All Buttons:
Check the code to ensure that all buttons are functional and respond to user interactions.
Add event listeners to buttons and define the corresponding actions to be performed when they are clicked.
- Integrate Company Name and Logo:
Incorporate the provided company name and logo into the application.
Update the code to include the company name in the application title and display the logo prominently.
- Use Local Images:
Replace external images with local images to improve performance and reduce the risk of broken links.
Save the images in an appropriate format and optimize them for web use to reduce file size.
- Make Pages Dynamic with API Calls:
Transform static pages into dynamic pages by making API calls to retrieve data.
Implement GET, PUT, and other API calls as needed to fetch and update information.
Use a consistent approach for making API calls and handling responses to ensure code consistency.
Detailed instructions will be provided for each page, including API calls and expected data types and examples.
- Ensure Successful npm run deploy:
Test the npm run deploy command to ensure it passes and creates a static page.
Troubleshoot any issues preventing the command from running successfully.
Optimize the deployment process to minimize build time and improve efficiency.
- Document the code with comments and create unit tests to ensure code quality and maintainability.Document the code with comments:
Use clear and concise comments to explain the purpose of each function, class, and method.
Include comments to document any assumptions or limitations of the code.
Write unit tests for each function, class, and method to ensure that they are working as expected.
The project has the following requirements:
- Ideal Timeframe: A fast turnaround of less than a week is expected.
- Budget: The budget for this project is USD 200, including all aspects described here.
The successful candidate should possess the following qualities:
- Experience in working with React and the ability to provide evidence of past React projects.
- Ability to work quickly and efficiently to meet the tight deadline of less than a week.
- A portfolio showcasing their ability to integrate Figma designs into front end components.
- Good communication skills for regular content updates.
- Experience in developing websites where the client regularly updates the content to ensure a smooth process.
Tasks to be completed:
- Refactor and Fix the Code:
Break the code into reusable components for better maintainability and reusability.
Follow best practices such as using a consistent coding style, descriptive variable names, and comments to explain the code's purpose.
Address small rendering and logic errors, such as preventing navigation to other pages without element selection. Detailed instructions will be provided for each page, including API calls and expected data types.
- Ensure Code Alignment with Figma Designs:
Review the code and make sure that the layout, colors, fonts, and other visual elements match the Figma designs.
Ensuring the code is responsive and works across various devices and browsers
- Implement Web Designs in Figma:
Create Figma designs for both desktop and mobile versions of the web application.
Use web parts for browsers and mobile parts for mobile users to optimize the user experience on different devices.
- Activate All Buttons:
Check the code to ensure that all buttons are functional and respond to user interactions.
Add event listeners to buttons and define the corresponding actions to be performed when they are clicked.
- Integrate Company Name and Logo:
Incorporate the provided company name and logo into the application.
Update the code to include the company name in the application title and display the logo prominently.
- Use Local Images:
Replace external images with local images to improve performance and reduce the risk of broken links.
Save the images in an appropriate format and optimize them for web use to reduce file size.
- Make Pages Dynamic with API Calls:
Transform static pages into dynamic pages by making API calls to retrieve data.
Implement GET, PUT, and other API calls as needed to fetch and update information.
Use a consistent approach for making API calls and handling responses to ensure code consistency.
Detailed instructions will be provided for each page, including API calls and expected data types and examples.
- Ensure Successful npm run deploy:
Test the npm run deploy command to ensure it passes and creates a static page.
Troubleshoot any issues preventing the command from running successfully.
Optimize the deployment process to minimize build time and improve efficiency.
- Document the code with comments and create unit tests to ensure code quality and maintainability.Document the code with comments:
Use clear and concise comments to explain the purpose of each function, class, and method.
Include comments to document any assumptions or limitations of the code.
Write unit tests for each function, class, and method to ensure that they are working as expected.