1. Executive Summary

This document outlines the technical and functional requirements for developing a lightweight, real-time chat application as part of Stage 1 development. The primary objective is to create a functional Minimum Viable Product (MVP) that demonstrates core chat functionality with a clean, modern user interface.

This project serves dual purposes: (1) delivering a working prototype for stakeholder review, and (2) providing a practical assessment and learning opportunity for newly onboarded developers. The focus is on rapid development, code quality, and adherence to modern web development best practices.

2. Technology Stack

2.1 Frontend Framework

You have the flexibility to choose between the following options based on your expertise:

2.2 Additional Technologies

Technology	Purpose	Status
TypeScript	Type safety and better developer experience	Optional (Recommended)
Tailwind CSS	Utility-first CSS framework for rapid styling	Recommended
React Hooks	State management (useState, useEffect, etc.)	Required
React Router	Client-side routing (if using React.js)	Conditional

3. Functional Requirements

3.1 Authentication Flow (Simplified)

For Stage 1, we are implementing a simplified authentication system that does not require traditional username/password validation or backend authentication services. The focus is on user identification and routing.

3.1.1 Login Form Component (LoginForm.tsx)

Component Responsibilities:

• Accept user input (any numeric value, e.g., "016" or any random number)
• Validate that input is not empty
• Trigger navigation to the chat dashboard with the user number as a route parameter
• Update the application state with the user identifier

Technical Specifications:

• Input Field: Single text/number input for user identification
• Validation: Basic client-side validation (non-empty field)
• Submit Action: On form submission, call a callback function passed via props
• Routing: Navigate to /chat/:id where :id is the entered number

3.1.2 User Flow

1. User lands on /login route
2. User enters any numeric identifier (e.g., "016", "123456")
3. User clicks submit button
4. Application validates input locally
5. Application navigates to /chat/:id with the entered number
6. User state is updated in ChatDashboard component

3.2 Chat Dashboard (ChatDashboard.tsx)

3.2.1 Component Responsibilities

• Extract user ID from route parameters (/:id)
• Maintain users state using React hooks
• Display messages for all users in the group chat
• Provide interface for sending new messages
• Handle message rendering and scrolling behavior

3.2.2 State Management

The component must manage the following state:

• users: Array of user objects currently in the chat
• messages: Array of message objects (sender, content, timestamp)
• currentUser: User ID extracted from route parameters
• messageInput: Current message being typed

3.2.3 UI Components

The chat dashboard should include:

• Header: Display group name and online user count
• Message Container: Scrollable area displaying all messages
• Message Bubbles: Individual message components with sender info and timestamp
• Input Area: Text input field and send button at the bottom
• User Indicator: Visual distinction between current user and other users' messages

4. UI/UX Requirements

4.1 Design System

The application must adhere to the following brand guidelines:

Element	Specification	Usage
Primary Color	White (#FFFFFF)	Main backgrounds, cards, containers
Secondary Color	Green (#03C755)	Buttons, highlights, active states, branding elements
Text Color	Dark Gray (#333333)	Primary text content
Background	Light Gray (#F5F5F5)	Page backgrounds, chat container

4.2 Component Styling Guidelines

4.2.1 Login Form

• Centered layout on the page
• White card with subtle shadow
• Submit button using secondary color (bg-[#03C755])
• Clear input labels and placeholders
• Responsive design for mobile devices

4.2.2 Chat Dashboard

• Full-height layout with fixed header and input area
• Scrollable message container in the middle
• Message bubbles: Current user (right-aligned, green), Others (left-aligned, gray)
• Timestamps in smaller, muted text
• Send button using secondary color

4.3 Responsive Design

The application must be responsive and functional on:

• Desktop (1920x1080 and above)
• Laptop (1366x768)
• Tablet (768x1024)
• Mobile (375x667 and similar)

5. Application Routing

5.1 Route Definitions

Route	Component	Description
/ or /login	LoginForm	Landing page with login form
/chat/:id	ChatDashboard	Chat interface with dynamic user ID

5.2 Route Parameters

• :id - Dynamic parameter representing the user's identification number
• This parameter should be accessible within ChatDashboard component
• Used to identify the current user in the chat session

5.3 Navigation Flow

1. User accesses the application → Redirects to /login
2. User enters number and submits → Navigates to /chat/:id
3. Chat dashboard loads with user ID from route parameter

6. Technical Specifications

6.1 Component Architecture

Follow these architectural principles:

• Reusability: Create modular, reusable components
• Separation of Concerns: Separate UI logic from business logic
• Props-based Communication: Use props for parent-child data flow
• State Management: Use React hooks (useState, useEffect) appropriately

6.2 Recommended Component Structure

6.3 Code Quality Standards

• Use meaningful variable and function names
• Add comments for complex logic
• Follow consistent formatting (use Prettier if possible)
• Implement basic error handling
• Write clean, readable code

7. Stage 1 Limitations & Future Scope

7.1 What is NOT Required in Stage 1

7.2 Planned for Future Stages

These features will be implemented in subsequent stages:

• Stage 2: Backend integration with proper authentication
• Stage 3: Real-time messaging using WebSocket
• Stage 4: Multiple chat rooms and private messaging
• Stage 5: Advanced features (file sharing, reactions, etc.)

8. Development Guidelines

8.1 Getting Started

1. Setup: Initialize project using Next.js or Create React App
2. Install Dependencies: Install Tailwind CSS and any required libraries
3. Project Structure: Set up folder structure as recommended
4. Version Control: Initialize Git repository and commit regularly
5. Development: Start with LoginForm component, then move to ChatDashboard

8.2 Testing Approach

• Test login form with various inputs (valid numbers, edge cases)
• Verify routing works correctly
• Test message sending and display
• Check responsive design on different screen sizes
• Validate UI matches design specifications

8.3 Best Practices

• Commit code frequently with clear commit messages
• Keep components small and focused
• Use TypeScript interfaces/types if using TypeScript
• Implement loading states for better UX
• Add basic error boundaries

9. Deliverables

9.1 Required Deliverables

Deliverable	Description
Source Code	Complete, well-organized codebase in Git repository
README.md	Setup instructions, architecture overview, and usage guide
Working Application	Deployed or locally runnable application
Demo	Brief walkthrough of implemented features

9.2 Evaluation Criteria

Your work will be evaluated based on:

• Functionality: Does it work as specified? (40%)
• Code Quality: Is the code clean, organized, and maintainable? (30%)
• UI/UX: Does it match design specifications and provide good user experience? (20%)
• Documentation: Is the code and setup properly documented? (10%)

10. Support & Communication

10.1 Questions & Clarifications

If you encounter any ambiguities or need clarification on requirements, please reach out to your team lead or supervisor. It's better to ask questions early rather than making assumptions.

10.2 Progress Updates

Please provide regular updates on your progress:

• Daily standup or status updates
• Flag any blockers or challenges immediately
• Share work-in-progress for early feedback

10.3 Timeline

11. Conclusion

This project is an excellent opportunity to demonstrate your React/Next.js skills and understanding of modern web development practices. Focus on writing clean, maintainable code and don't hesitate to ask questions when needed.

Remember, this is Stage 1 of a larger project. The goal is to build a solid foundation that can be extended in future stages. Good luck, and we look forward to seeing your implementation!