Frontend Engineer Take-Home Task: Building Uniswap-like Feature with React and Next.js

Objective: The goal of this take-home task is to assess your skills in building a front-end interface using React and Next.js, particularly focusing on implementing functionality similar to Uniswap, a decentralized exchange for cryptocurrencies. You will be expected to create a simplified version of the swapping feature found in Uniswap.

Instructions: You are required to build a web application that allows users to swap between two cryptocurrencies. The application should be built using React and Next.js for server-side rendering. While the functionality will be simplified compared to Uniswap, it should mimic the core swapping feature. Make sure your output looks exactly like the UI Design shared below.

UI Design: Uniswap: https://app.uniswap.org/ Coin Price API: https://apiguide.coingecko.com/getting-started/introduction

Requirements:

1. Swapping Page:

   • Display two input fields for selecting the cryptocurrencies to swap.
   • Input fields should include dropdowns or auto-suggest functionality for selecting the cryptocurrencies.
   • Allow users to input the amount they want to swap.
   • Display the estimated amount of the other cryptocurrency the user will receive after the swap, based on the current exchange rate.
   • Implement a swap button to execute the transaction.
   • Show appropriate error/success messages during the swapping process.

2. API Integration:

   • Utilize cryptocurrency price data from a public API (e.g., CoinGecko, CoinMarketCap) to fetch real-time exchange rates.
   • Implement the necessary API calls to fetch cryptocurrency data and exchange rates.

3. User Experience:

   • Ensure a smooth and responsive user interface.
   • Implement loading indicators during API requests.
   • Validate user inputs and provide clear error messages if inputs are invalid.

4. Optional Enhancements (Bonus):

   • Implement transaction history to show the previous swaps.
   • Add support for more cryptocurrencies.
   • Implement a simple user authentication system.
   • Add visual enhancements such as animations or transitions.

5. Hosting:

   • Make sure to host your output in any vendors like Vercel, Netlify etc..
   • Share deployed URL in the ReadMe file of your output repository.

Guidelines:

• You are free to use any libraries or frameworks that you find appropriate.
• Design and styling are important but not the primary focus. You can use existing UI libraries like Material-UI or Tailwind CSS for quicker styling.
• Make sure your code is well-structured, maintainable, and follows best practices.
• Write clear comments wherever necessary to explain your code.
• Provide instructions on how to run your application locally.

Submission:

• Send a GitHub repository link containing your code.
• Include a README file with clear instructions on how to run the application and any additional information you deem necessary.

Evaluation Criteria:

• Functionality: Does the application meet the specified requirements?
• Code Quality: Is the code well-structured, readable, and maintainable?
• User Experience: Is the application intuitive and user-friendly?
• API Integration: Is real-time cryptocurrency data accurately fetched and displayed?
• Bonus Points: Any additional features or enhancements beyond the basic requirements.

Note: This task is designed to simulate real-world development scenarios and showcase your skills as a frontend engineer with React and Next.js experience. Feel free to reach out if you have any questions or need further clarification. Good luck!