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
-
Technology Stack:
- React.js
- Next.js
- Any CSS library (e.g., Tailwind CSS, Bootstrap)
- Any state management library (e.g., React Context, Redux) (optional)
-
Functionality:
- Implement a single-page application with two sections: one for generating OTPs and another for verifying OTPs.
- Use React hooks for state management.
-
API Interaction:
- Utilize the provided
/api/otp/generateand/api/otp/verifyendpoints. - Implement proper error handling.
- Utilize the provided
-
Design:
- Design a responsive and visually appealing interface.
-
Deployment:
- Deploy the frontend on Vercel or any preferred platform.
- Share the deployment link.
-
Documentation:
- Include a README with local setup instructions and any considerations made during development.
- Create a public GitHub repository.
- Deploy the frontend.
- 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.
- 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.