OTP Service Frontend Assignment

Task

Create a single-page application for the OTP Service using React.js or Next.js. The application should allow users to both generate and verify one-time passwords (OTPs) via email.

Users can choose the OTP type (numeric, alphanumeric, or alphabet) and provide additional details such as the organization name and email subject. The service will then send an email containing the OTP to the user's email address.

OTP Service API: https://otp-service-beta.vercel.app

Requirements

1. Technology Stack:

   • React.js
   • Next.js
   • Any CSS library (e.g., Tailwind CSS, Bootstrap)
   • Any state management library (e.g., React Context, Redux) (optional)

2. Functionality:

   • Implement a single-page application with two sections: one for generating OTPs and another for verifying OTPs.
   • Use React hooks for state management.

3. API Interaction:

   • Utilize the provided /api/otp/generate and /api/otp/verify endpoints.
   • Implement proper error handling.

4. Design:

   • Design a responsive and visually appealing interface.

5. Deployment:

   • Deploy the frontend on Vercel or any preferred platform.
   • Share the deployment link.

6. Documentation:

   • Include a README with local setup instructions and any considerations made during development.

Submission

1. Create a public GitHub repository.
2. Deploy the frontend.

Evaluation Criteria

• Functionality: Ensure accurate OTP generation and verification.
• Code Quality: Organized, readable, and maintainable code.
• User Interface: Intuitive and visually appealing design.
• Error Handling: Graceful handling of errors.
• Deployment: Successful deployment and functionality in the deployed environment.

Bonus Points

• State Management: Use a state management library (e.g., React Context, Redux).
• Documentation: Include a README with local setup instructions and any considerations made during development.

Resources

• React.js
• Next.js
• Tailwind CSS
• Redux
• Vercel
• OTP Service API
• OTP Service API Documentation
• OTP Service API Deployment