Add System Architecture Diagram and Optimize UI Screenshots

[Nitya-003]

Description

To improve the project's readability and professional standards, the README.md needs a visual overhaul. Currently, the repository is text-heavy and lacks a clear architectural overview. I propose adding a Mermaid.js diagram to visualize the tech stack and converting existing screenshots into structured HTML tags for better layout control.

Proposed Enhancements

1. System Architecture (Mermaid.js)
A visual flow will help new contributors understand how the Frontend, Backend, and external APIs (Spoonacular/G News) interact.
Proposed Diagram Code:

graph TD
    A[React Frontend] -->|JWT Auth| B[Express.js Backend]
    B -->|Mongoose| C[(MongoDB Atlas)]
    B -->|Nutritional Data| D[Spoonacular API]
    B -->|Health Articles| E[G News API]
    B -->|Notifications| F[Nodemailer/App Pass]

Loading

2. UI Screenshot Optimization (HTML Tags)
The current Markdown screenshots lack size and alignment control. I suggest replacing them with centered HTML <img> tags to ensure a clean, uniform "Gallery" look.

Goals

• Clarity: Provide an "at-a-glance" understanding of the system logic.
• Visual Appeal: Break up long walls of text with professional, aligned imagery.
• Responsive Design: Ensure screenshots don't overflow on different screen sizes by using percentage or fixed pixel widths.

[Xenon010101]

Hi, I am a GSSoC 2026 contributor and would like to work on this issue. This project matches my expertise. Please assign it to me.

/assign