📊 Website Metrics Dashboard

Hey there! This is a modern, responsive dashboard for visualizing marketing metrics like clicks, impressions, conversions, and costs — built with a focus on clarity, accessibility, and interactivity.

---

🧠 What Is This?

This dashboard helps users visualize how a website is performing using sample data (or an API). It includes:

• 📈 Line charts for daily metrics
• 📋 Summary cards for totals
• ✨ Interactive highlights (when hovering the summary cards)
• 📅 Date picker you can select date ranges with. Note: The available data is restricted to date range from the dataset provided.

---

🛠️ What Was Used?

• React – for building the user interface
• React Query – for fetching data and managing loading/error states
• Chart.js – for drawing the charts
• Tailwind CSS – for styling and responsiveness
• TypeScript – for code quality and safety
• Jest + React Testing Library – for testing

---

🚀 How to Run the Project

Step 1 – Download

• Download the .zip file and extract it,
• then in your terminal:

cd your-unzipped-folder-name

Step 2 – Install Dependencies

npm install

Step 3 – Start the Project

• In your terminal, start the app using:

npm run dev

Then open your browser and go to:

http://localhost:5173

Step 4 – Run the Tests (Optional)

npm test

Happy reviewing!