Comprehensive README Overhaul: Enhanced Visuals and Architecture Diagrams

[Nitya-003]

Description

The current README provides a great overview of the project's tech stack and features. However, as the project scales, we need to improve how information is presented to make it more professional, readable, and architecturally transparent for new contributors.

This issue proposes a major overhaul of the README.md focusing on two main areas:

1. Optimization of Screenshots: Replacing raw image links with structured <details> tags to improve page load and scrolling experience.
2. Architecture Visualization: Implementing Mermaid.js diagrams to represent the project workflow and database schema.

Proposed Changes

1. Screenshot Optimization (Using HTML Tags)
Currently, all screenshots are displayed at full size, making the README very long.

2. Mermaid.js Integration (System Architecture)
New contributors often find it difficult to understand how the Django backend interacts with Docker and Azure.

3. Mermaid.js Integration (Database Schema)Action
Create an Entity Relationship Diagram (ERD) using Mermaid syntax to show the relationships between User, Room, Topic, and Message models.

4. Updated Folder Structure
Action: Add a directory tree visualization (using the tree command style) to help users navigate the repository easily.

Technical Specifications

Example Mermaid Flowchart Syntax:

graph TD
    A[User] -->|Interacts| B(Django Web App)
    B -->|Persists Data| C[(SQLite/Azure DB)]
    D[GitHub Repo] -->|Triggers| E[GitHub Actions]
    E -->|Builds Docker Image| F[Azure Web App]

Loading

Example Screenshot Formatting:

<details>
  <summary><b>Click to view Authentication Screens</b></summary>
  <img src="link-to-login-image" alt="Login" width="600px">
  <img src="link-to-signup-image" alt="Signup" width="600px">
</details>

Why is this important for ECWOC?

• Onboarding: Helps new students understand the project structure faster.
• Professionalism: High-quality documentation is a hallmark of industry-standard projects.
• Clarity: Visualizing the CI/CD and Docker workflow makes the "Advanced Features" section much easier to grasp.

Labels: ECWOC