Skip to content

README.md

Latest commit

 

History

History
145 lines (106 loc) · 4.63 KB

README.md

File metadata and controls

145 lines (106 loc) · 4.63 KB

Car Market Analytics Dashboard Project for Web Development Class

Live Demo React Vite

A comprehensive web-based analytics platform for visualizing and analyzing used car market data

🔗 Live Demo: https://car-market-analytics-talarod.vercel.app/

📋 Overview

This application processes and presents market insights from a dataset of vehicles, enabling data-driven decision-making for car market trends. Built with React and modern web technologies, it provides an intuitive interface for exploring and analyzing the used car market.

✨ Key Features

  • Interactive Dashboard - Multi-view navigation with Dashboard and Highlighted sections
  • Advanced Search & Filtering - Search capabilities for brands and models with real-time results
  • Real-time Data Aggregation - Calculate total inventory and market values by brand/model
  • Data Visualization - Interactive pie charts and stacked bar charts for market distribution analysis using Chart.js
  • Responsive UI - Built with React Bootstrap for optimal experience across all devices
  • Efficient Processing - Client-side data processing handling thousands of vehicle records

🛠️ Technical Stack

Frontend

  • React 18.3.1 - Modern UI library
  • React Router 7.10.0 - SPA navigation and routing
  • React Bootstrap 2.10.10 - Responsive component library

Data Visualization

  • Chart.js 4.5.1 - Powerful charting library
  • React-ChartJS-2 5.3.1 - React wrapper for Chart.js
  • Chroma.js 3.2.0 - Color manipulation and scales

Build Tools & Development

  • Vite 5.4.1 - Fast build tool and dev server
  • ESLint - Code quality and consistency
  • pnpm - Fast, disk space efficient package manager

Styling

  • Bootstrap 5.3.8 - CSS framework
  • Custom CSS - Tailored styling and theming

🚀 Getting Started

Prerequisites

  • Node.js (v16 or higher)
  • pnpm (recommended) or npm

Installation

  1. Clone the repository
git clone https://github.com/YelLin21/Car-Market-Analytics.git
cd Car-Market-Analytics
  1. Install dependencies
pnpm install
  1. Run the development server
pnpm dev
  1. Open your browser and navigate to http://localhost:5173

Build for Production

pnpm build

Preview Production Build

pnpm preview

📂 Project Structure

Car-Market-Analytics/
├── public/              # Static assets
├── src/
│   ├── assets/         # Data files and resources
│   │   ├── taladrod-cars.json
│   │   └── taladrod-cars.min.json
│   ├── Components/     # React components
│   │   ├── Car.jsx
│   │   ├── DataTable.jsx
│   │   ├── Piechart.jsx
│   │   └── StackedbarChart2.jsx
│   ├── App.jsx         # Main application component
│   ├── main.jsx        # Application entry point
│   └── *.css           # Styling files
├── index.html
├── vite.config.js
└── package.json

🎯 Technical Highlights

  • Complex Data Aggregation - Implemented efficient algorithms for calculating brand/model statistics
  • Performance Optimization - Optimized for handling large JSON datasets with thousands of records
  • Component Architecture - Reusable and maintainable component structure
  • Modern Deployment - Deployed on Vercel for fast, reliable hosting

📊 Features in Detail

Dashboard View

  • Comprehensive data tables showing brand and model statistics
  • Search functionality for quick filtering
  • Total inventory counts and market values
  • Visual representations through charts

Highlighted View

  • Featured vehicles and market highlights
  • Curated insights for quick decision-making

Data Analytics

  • Pie Charts - Market share distribution by brand
  • Stacked Bar Charts - Multi-dimensional analysis of inventory
  • Real-time Calculations - Dynamic aggregation of market values

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

👨‍💻 Author

YelLin21

🙏 Acknowledgments

  • Data sourced from Taladrod car marketplace
  • Built with React and the amazing open-source community

Note: This is a frontend-only application with static data. For production use with real-time data, consider integrating with a backend API.