Skip to content

Latest commit

 

History

History
46 lines (33 loc) · 3.07 KB

requirement-fe.md

File metadata and controls

46 lines (33 loc) · 3.07 KB
Raw

Coding Challenge: AI Immigration Chatbot with NextJS and React

Welcome to the frontend coding challenge! In this challenge, you'll build a sophisticated AI-based chatbot using NextJS and React that helps users understand the immigration process. Your goal is to create an interactive and visually appealing chatbot that can answer basic questions about immigration, such as visa types, application processes, and common FAQs.

We will review your code with a focus on comprehensive component testing, clear documentation, effective state management, accurate AI responses, high code quality, proper error handling, efficient user interaction, responsive design, successful deployment, and any additional bonus features.

Requirements

  1. NextJS: Use NextJS as the primary framework for building the application.
  2. React: Utilize React for building reusable UI components.
  3. TypeScript: Implement the project using TypeScript for improved type safety.
  4. AI Integration: Implement a basic AI component that can respond to user queries using a third-party AI API (e.g., OpenAI's GPT-3).
  5. Styling: Use a modern CSS framework or CSS-in-JS solution (e.g., Tailwind CSS, Styled Components).
  6. Fun Factor: Make the chatbot interactive, visually engaging, and user-friendly.

Features

  • User Interaction: The chatbot should handle user inputs and provide relevant responses in a conversational UI.
  • State Management: Use React hooks or a state management library (e.g., Redux, Zustand) to manage the application state.
  • AI Responses: Integrate with a third-party AI API to generate dynamic responses.
  • Responsive Design: Ensure the chatbot works well on various screen sizes and devices.

Getting Started

  1. Setup: Create a new NextJS project with TypeScript support.
  2. UI Components: Design and implement reusable React components for the chatbot interface.
  3. API Routes: Utilize NextJS API routes to handle communication with the AI service.
  4. State Management: Implement state management for the conversation flow.
  5. AI Integration: Integrate a third-party AI API for generating responses.

Submission

  1. Code: Ensure your code is well-documented and follows best practices.
  2. README: Update the README with instructions on how to run the application and any necessary environment setup.
  3. Tests: Include unit tests for your components and utility functions.
  4. Submission: Submit your code as a GitHub repository link.

Bonus Points

  • User Authentication: Implement user authentication to personalize responses and save conversation history.
  • Localization: Add support for multiple languages using a library like next-i18next.
  • Accessibility: Ensure the chatbot is fully accessible and complies with WCAG guidelines.
  • Advanced UI Features: Implement features like typing indicators, message reactions, or voice input.
  • Deployment: Deploy the application to a cloud service (e.g., Vercel, Netlify) and provide a live demo link.

We hope you enjoy the challenge and look forward to seeing your creative solutions!