Heatgen by Team ByteBenders

---

Heatgen is a free and open-source tool designed to provide real-time heatmaps and statistical analysis for websites, empowering website owners with actionable insights into user engagement and behavior.

Features

• Real-time Heatmaps: Visualize user interaction patterns on your website instantly.

• Statistical Analysis: Gain insights into clicks, scrolls, and other user behaviors.

• Open Source: Built on open-source technologies to ensure transparency and community collaboration.

• SDK Integration: Seamless integration with websites, currently developed in React.

• Dashboard: Access a user-friendly dashboard built with Next.js to view and analyze heatmaps.

Demo

Demo Video

Installation

Install Heatgen

    git clone https://github.com/AaratBatra/Heatgen.git
    cd Heatgen

To install all frontend dependencies, backend dependencies, dashboard dependencies and concurrently. Run

npm run install-all

Install Heatgen_flask

    cd flask_backend
    pip install -r requirement.txt

Run Locally

To start flask server, Run

python app.py

To start backend, frontend and dashboard. Run

npm run dev

Tech Stack

HeatGen is built using a combination of technologies designed to deliver a robust and scalable solution for real-time heatmaps and user behavior analytics. Below is an overview of the tech stack used in the HeatGen project:

Frontend

• React: A JavaScript library for building user interfaces. React provides a component-based architecture that allows for efficient UI development and management.
• Next.js: A React framework for server-side rendering and static site generation. It helps in building SEO-friendly pages and improving performance.
• TypeScript: A superset of JavaScript that adds static types. TypeScript enhances code quality and development experience with type safety.
• Recharts: A charting library for React, used for visualizing data through charts and graphs.
• ShadCN: A design system or component library used for consistent UI elements and styling.

Backend

• Node.js: A JavaScript runtime built on Chrome's V8 JavaScript engine. It is used for building scalable network applications.
• Express.js: A minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.
• Flask: A lightweight WSGI web application framework in Python, used for generating statistical analysis and interacting with the Node.js server.
• Socket.IO: A library for real-time web applications. It enables real-time, bidirectional, and event-based communication between the client and server.

Tools and Libraries

• Heatmap.js: A JavaScript library used for generating heatmaps based on user cursor movements.

Development Environment

• Visual Studio Code: A popular code editor used for writing and managing the project's codebase.
• Postman: A tool for testing APIs and managing HTTP requests.

This tech stack ensures that HeatGen is built on a modern, efficient, and scalable foundation, allowing for real-time data processing and a smooth user experience.

Contributing

Contributions are always welcome!

See contributing.md for ways to get started.

Please adhere to this project's code of conduct.

License

MIT