Zalo Mini App – Data Visualization and Filtering

Project Overview

This project is a Zalo Mini Application designed to visualize data through interactive charts and filters. It provides users with a seamless experience to explore, analyze, and interact with various data categories. The app integrates with Supabase for backend data storage, supports real-time updates, and leverages Zalo's developer environment for smooth integration within the Zalo ecosystem.

---

Key Features

✅ Dynamic Data Visualization: Displays data insights using Ant Design Charts (Antd Charts) with various chart types (line, bar, pie, etc.).
✅ Advanced Filtering Options: Users can filter data based on different categories and parameters to get tailored insights.
✅ Real-time Data Management: Powered by Supabase, ensuring real-time updates when data changes.
✅ Optimized UI/UX: Built with Tailwind CSS for a responsive, mobile-first, and lightweight interface.
✅ State Management with Zustand: Efficient and lightweight state handling for better performance.
✅ Zalo Developer Integration: Fully compatible with Zalo’s environment to provide a native-like experience inside the Zalo Mini App.

---

Technologies Used

Frontend:

• React (TypeScript) – Provides a modular and scalable structure.
• Tailwind CSS – For fast, responsive, and modern UI styling.
• Ant Design Charts (Antd Charts) – For professional and high-performance data visualization.
• ZMP CLI – (Zalo Mini Program CLI) to build and manage the Zalo Mini App environment.

Backend & State Management:

• Supabase – A PostgreSQL-based backend with real-time data syncing.
• Zustand – Lightweight global state management for better performance and flexibility.

Deployment & Integration:

• Zalo Developer Environment – Provides a smooth experience within the Zalo ecosystem.
• Zalo APIs – Allows the app to interact with user data and services on Zalo.

---

How It Works

1️⃣ User Opens the Mini App in Zalo → The app loads and fetches data from Supabase.
2️⃣ Data Visualization → The app renders different charts using Ant Design Charts.
3️⃣ Filtering System → Users can filter and refine data views dynamically.
4️⃣ State Management → Zustand efficiently updates and syncs UI state without unnecessary re-renders.
5️⃣ Real-Time Updates → Changes in Supabase are reflected instantly in the app.