React Data Visualization Project

This project is a data visualization application built with React using Vite, TailwindCSS, Recharts, and shadcn. The application consumes a given .json file containing dummy results for an advertising campaign and builds a data visualization. It displays the data through charts and provides three Key Performance Indicators (KPIs):

• The campaign with the most impressions
• The campaign with the most clicks
• The date with the highest amount of combined activity (clicks and impressions)

Features

• Intuitive data visualization using charts
• Clear labels for campaign names and dates
• Display of three KPIs
• Responsive design with TailwindCSS
• Modern component library with shadcn

Installation

Prerequisites

• Node.js (>= 12.x)
• npm (>= 6.x) or yarn (>= 1.22.x)

Steps

1. Clone the Repository

   git clone https://github.com/SohamNagi/ReactDataVis.git
   cd ReactDataVis
   

2. Install Dependencies

   npm install
   # or
   yarn install
   

3. Run the Development Server

   npm run dev
   # or
   yarn dev
   

Usage

• Open http://localhost:5173 or the portname mention in the terminal to see the data visualization and KPIs.
• You can also access it on the web at www.reactdatavisual.vercel.app

Technologies Used

• React: A JavaScript library for building user interfaces
• Vite: A fast build tool and development server
• TailwindCSS: A utility-first CSS framework
• Recharts: A composable charting library built on React components
• shadcn: A modern component library for React used for boilerplate