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.
Key Success Criteria:
- Functional login system with dynamic routing
- Real-time message display in group chat interface
- Clean, responsive UI matching brand guidelines
- Well-structured, maintainable codebase
- Completion within agreed timeline
2. Technology Stack
2.1 Frontend Framework
You have the flexibility to choose between the following options based on your expertise:
Option 1: Next.js (Recommended)
- Version: 14.0 or higher
- Advantages: Built-in routing, Server-Side Rendering (SSR), optimized performance
- Use Case: Ideal for scalable applications
Option 2: React.js
- Version: 18.0 or higher
- Requirements: Must use React Router for routing
- Use Case: Suitable for simpler SPA applications
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
Expected Props Interface:
{
onSubmit: (userNumber: string) => void;
// Optional: loading state, error handling
}
3.1.2 User Flow
- User lands on
/login route
- User enters any numeric identifier (e.g., "016", "123456")
- User clicks submit button
- Application validates input locally
- Application navigates to
/chat/:id with the entered number
- 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
Example State Structure:
// Users State
users: [
{ id: "016", name: "User 016", status: "online" }
]
// Messages State
messages: [
{
id: "msg_1",
senderId: "016",
content: "Hello everyone!",
timestamp: "2025-11-06T10:30:00Z"
}
]
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)
⚠️ Important Note on Styling: While Tailwind CSS is recommended, ensure you create
reusable component classes to avoid repetition and maintain consistency across the application.
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
- User accesses the application → Redirects to
/login
- User enters number and submits → Navigates to
/chat/:id
- 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
src/
├── components/
│ ├── LoginForm.tsx
│ ├── ChatDashboard.tsx
│ ├── ui/
│ │ ├── Button.tsx
│ │ ├── Input.tsx
│ │ ├── MessageBubble.tsx
│ │ └── MessageInput.tsx
├── pages/ (or app/ for Next.js)
│ ├── login.tsx
│ └── chat/[id].tsx
├── styles/
│ └── globals.css
└── utils/
└── helpers.ts
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
The following features are explicitly OUT OF SCOPE for Stage 1:
- Authentication/Authorization: No backend authentication, JWT tokens, or password validation
- Real-time Backend: No WebSocket or Socket.io integration
- Database Integration: No persistent storage of messages or users
- Multiple Chat Rooms: Single group chat only
- File Uploads: Text messages only
- User Profiles: No profile pages or user management
- Message Editing/Deletion: 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
- Setup: Initialize project using Next.js or Create React App
- Install Dependencies: Install Tailwind CSS and any required libraries
- Project Structure: Set up folder structure as recommended
- Version Control: Initialize Git repository and commit regularly
- 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
Recommended Development Timeline:
- Day 1-2: Project setup, LoginForm component
- Day 3-4: ChatDashboard component, routing
- Day 5: UI refinement, styling, responsive design
- Day 6: Testing, bug fixes, documentation
- Day 7: Final review and demo preparation
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!