[Front-End System Design] - Chat application

Step-by-Step Tutorial: Designing a Chat Application from Scratch

1. General Planning:

   • Start by outlining the general requirements for the chat application, such as sending and receiving messages, attaching media, viewing contact lists, and sharing messages.
   • Define functional requirements, including low latency for real-time communication, compatibility with short network bands, and optimization for mobile devices.

2. Components Architecture:

   • Design the component hierarchy, starting with the top-level Chat App component containing Contact List and Chat View components.
   • Define components like Contact, Chat View, Message List, Attachments, and Message Actions.

3. Data API and Protocol Selection:

   • Choose between Long Polling, WebSockets, and Server-Sent Events based on pros and cons.
   • Consider factors like latency, network bandwidth, resource usage, and compatibility with HTTP/2.

4. Data Entities and API Design:

   • Define APIs for message updates, fetching contacts, attaching media, and sending messages.
   • Identify entities like Contacts, Messages, and Attachments with relevant attributes.

5. Data Storage and Retrieval:

   • Fetch contacts from the API and store them in a normalized format.
   • Subscribe to new messages, synchronize data using timestamps, and organize messages by contact ID.

6. Optimization Strategies:

   • Optimize rendering performance by inlining critical resources, using efficient CSS naming, and implementing placeholders for faster loading.
   • Enhance network performance with resource zipping, HTTP/2 multiplexing, bundle splitting, and efficient caching policies.

7. Accessibility Features:

   • Implement responsive units (rem), keyboard shortcuts, and color schemes for users with disabilities.
   • Ensure semantic HTML structure, provide sound feedback, and optimize images with correct attributes.

8. Final Touches:

   • Test and iterate on the design, gather feedback, and make improvements collaboratively.
   • Prepare for interviews by discussing your thought process and decision-making in designing the chat application.

By following these steps, you can create a well-structured and optimized chat application design for front-end development.