Scribd
Upload
6 views

Coding Exercise_ Frontend

Candidates are tasked with developing an AI-powered educational chat application using Next.js/ReactJS that features real-time updates, advanced state management, and optimized performance. Key components include a responsive chat interface, mock API integration, and performance enhancements, with optional bonus features like user mentions and voice message support. The application must demonstrate expertise in various technologies such as TypeScript, Zustand/Redux, and UI frameworks.

Uploaded by

divyanshi10300
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Coding Exercise_ Frontend

Candidates are tasked with developing an AI-powered educational chat application using Next.js/ReactJS that features real-time updates, advanced state management, and optimized performance. Key components include a responsive chat interface, mock API integration, and performance enhancements, with optional bonus features like user mentions and voice message support. The application must demonstrate expertise in various technologies such as TypeScript, Zustand/Redux, and UI frameworks.

Uploaded by

divyanshi10300
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Coding Exercise: AI-Powered Educational Chat Application

Overview

Candidates are required to develop a Next.js/ReactJS-based interactive chat application


that simulates real-time AI-powered educational discussions. The application should
provide real-time updates, advanced state management, and optimized performance
while ensuring a seamless user experience.

To complete this assignment, candidates must demonstrate expertise in React.js/Next.js,


TypeScript, Zustand/Redux, WebSockets (frontend-only), and UI frameworks such as
TailwindCSS or Material UI.

Application Components

1. Real-Time Chat Interface

Objective:

Develop an interactive educational chat interface that ensures smooth user interaction and
real-time updates.

Key Features:

●​ Chat UI & Message Handling:​

○​ Develop a responsive chat interface that supports rich text formatting


(bold, italic, lists, links).
○​ Implement scroll-to-bottom behavior for seamless navigation.
○​ Ensure message animations using Framer Motion.
●​ Real-Time Experience Simulation:​

○​ Display "Typing..." indicators for AI-generated responses.


○​ Show sent, delivered, and read receipts.
○​ Implement user presence indicators (active, offline, typing).
●​ Dark Mode & Theming Support:​

○​ Enable light and dark mode switching with persistent settings.


○​ Implement custom theming using CSS variables and Zustand.
●​ Message Input Enhancements:​

○​ Support emoji selection, markdown-style formatting, and message


editing.
○​ Enable keyboard shortcuts (e.g., Shift + Enter for new lines, /help for
quick actions).
○​ Display a character limit indicator for long messages.
2. API Integration & State Management

Objective:

Manage frontend state efficiently while simulating real-time API interactions.

Key Features:

●​ Mock API Integration (Frontend Only):​

○​ Use mock API services or JSON files to simulate data retrieval.


○​ Implement optimistic UI updates for seamless user experience.
●​ State Management & Data Persistence:​

○​ Utilize Zustand or Redux Toolkit to manage:


■​ Chat history (persisted across sessions).
■​ User session data (mock authentication).
■​ UI preferences (theme, accessibility settings).
●​ Error Handling & Loading States:​

○​ Implement skeleton UI placeholders for loading messages.


○​ Add graceful API failure handling, including retry logic and notifications.
○​ Provide a network reconnect indicator for unstable connections.

3. Performance & UI Optimization

Objective:

Ensure fast performance, accessibility, and SEO optimization for improved user
engagement.

Key Features:

●​ Next.js Performance Enhancements:​

○​ Use Server-Side Rendering (SSR) or Incremental Static Regeneration


(ISR).
○​ Optimize lazy loading, tree-shaking, and code-splitting.
●​ SEO & Accessibility Compliance:​

○​ Implement dynamic meta tags for improved discoverability.


○​ Ensure ARIA compliance, keyboard navigation, and high contrast modes.
○​ Integrate speech-to-text and text-to-speech features for accessibility.
●​ Micro-Interactions & Animations:​

○​ Use Framer Motion for smooth transitions.


○​ Implement message fade-in effects for an enhanced visual experience.
○​ Add hover effects and button animations to improve user interaction.

Tools & Libraries (Choose Any)

Candidates should select and justify their technology stack choices.

Frontend Stack:

●​ Framework: Next.js/ReactJS
●​ State Management: Zustand / Redux Toolkit
●​ Styling: TailwindCSS, Chakra UI, or Material UI
●​ Animations: Framer Motion for UI transitions
●​ WebSockets/Polling: Native WebSocket API (mocked for frontend testing)

Bonus Features (Optional)

●​ User Mentions (@username) – Highlight messages mentioning specific users.


●​ Voice Message Support – Enable recording and playback of voice messages.
●​ Chatbot Personality Settings – Allow users to customize AI behavior and
response style.
●​ PWA Support – Implement offline mode and installable chat functionality.

Notes:

●​ The application should be designed for scalability and efficiency.


●​ Proper error handling and logging should be implemented.
●​ The choice of state management, UI libraries, and optimization strategies
should be justified.

You might also like