---

DashGen: The Config-Driven Dashboard

A full-stack web application demonstrating a powerful and elegant architectural pattern: a dynamic dashboard whose entire layout and content are generated from a single JSON configuration file.

This project is a showcase of modern development principles, including a clear separation of concerns between a Node.js/Express backend API and a dynamic React frontend.

---

Final Product

(This screenshot shows the dashboard rendering three distinct widgets—a key metric, a line chart, and a status bar—all generated dynamically from the config.json file.)

The Philosophy

The core idea is to create a UI that is not hard-coded, but is instead a generic "renderer" for a data contract. By simply editing the config.json file on the backend, a user can add, remove, or reconfigure dashboard widgets without touching a single line of frontend code. This showcases a flexible and scalable approach to building user interfaces.

Core Features

• Full-Stack Architecture: A lightweight Node.js/Express backend serves a configuration file via a simple REST API.
• Dynamic React Frontend: A React single-page application fetches the configuration and dynamically renders the appropriate components.
• Component-Based Design: The UI is built from a set of reusable, independent components (KeyMetric, LineChart, StatusBar).
• Data-Driven UI: The WidgetRenderer.js component acts as a "brain," intelligently deciding which component to render based on the type specified in the configuration data.
• Locally Testable: The entire project runs locally with no external dependencies or cloud services required.

Technical Stack

• Backend: Node.js, Express.js, CORS, Nodemon (for development)
• Frontend: React.js, Axios, Recharts (for data visualization)
• Package Management: npm

Getting Started

Prerequisites

• Node.js and npm (preferably installed via NVM)
• A basic understanding of the command line.

Installation & Launch

1. Clone the repository:

   git clone https://github.com/YOUR_USERNAME/dashgen.git
   cd dashgen

2. Install Backend Dependencies: Navigate to the backend directory and install the required packages.

   cd backend
   npm install

3. Install Frontend Dependencies: From the root dashgen directory, navigate to the frontend directory and install its packages.

   cd ../frontend
   npm install

4. Run the Application: You will need two separate terminals to run both the backend and frontend servers simultaneously.

   • In Terminal 1 (from the /backend directory):

     npm start

     (Your backend API will now be running at http://localhost:5001)

   • In Terminal 2 (from the /frontend directory):

     npm start

     (Your React application will open in a browser at http://localhost:3001)

Experiment and Customize

The magic of this project is in the backend/config.json file. Try making changes to it and see the dashboard update automatically:

• Change the dashboardTitle.
• Add a new KeyMetric widget to the widgets array.
• Change the data values in the LineChart widget.

---

This project was built as a demonstration of clean architecture and modern full-stack development practices.