Analytics Dashboard Hackathon Project

Overview

This project is a submission for the GeePay Design and Frontend Challenge organized by Geepay Africa. The goal was to build an analytics dashboard based on the provided Figma design, utilizing Next.js, Tailwind CSS, TypeScript, React-Chartjs-2, and DaisyUI.

Features

• Next.js: A React framework for building server-side rendered and statically generated web applications.

• Tailwind CSS: A utility-first CSS framework used for styling the components, providing a modern and responsive design.

• TypeScript: A typed superset of JavaScript that enhances development with static types.

• React-Chartjs-2: A React wrapper for Chart.js, used for creating interactive and visually appealing charts in the analytics dashboard.

• DaisyUI: A UI component library for Tailwind CSS, used to enhance the design and user interface of the dashboard.

Getting Started

1. Clone the Repository:

   git clone https://github.com/ESE-MONDAY/analytics-dashboard.git
   

2. Navigate to the Project Directory:

   cd analytics-dashboard

3. Install Dependencies:

   npm install

4. Run the Development Server:

   npm run dev

   Open http://localhost:3000 in your browser.

Project Structure

• pages/: Contains the Next.js pages.
• styles/: Houses the Tailwind CSS configuration and global styles.
• components/: Holds React components used in the project.
• public/: Contains static assets.

Charts and Analytics

The analytics dashboard utilizes React-Chartjs-2 to create various charts and visualizations based on the data. Explore the different charts and features available to gain insights into your data.

Design Details

The project was developed based on the Figma design provided by [Sponsor Name 1] and [Sponsor Name 2]. The UI components from DaisyUI were integrated to enhance the overall design and user experience.

Sponsors

This project is proudly sponsored by:

• GeePay Africa

  • Website

• David Herbert

  • Website