DEV Community

Kaku-g
Kaku-g

Posted on

5 3 3 3 3

React-Analytics

What I built

I built a library that tracks the analytics of your react-website. Easy to use with a single line of code. Dashboard is built using Refinedev and supabase as data provider. Library is hosted in the npm registry.

Category Submission:

  • Best Overall Project
  • Most Visually Pleasing
  • Most Technical Impressive
  • Best Project built using Supabase as the main data provider for the refine app.

App Link

Visit the live app here Website

Screenshots

Image description

Image description

Image description

Image description

Description

I built a library that tracks the analytics of your react-website. Easy to use with a single line of code.
I have been building apps using react , but was unable to find free and simple analytics tool for the website. So tried using building a library of my own. Just install the library signin to the app get your unique id and start using it in your react app.

Link to Source Code

The app is open sourced on github View code

Permissive License

The app is opensourced under Apache license.

Background

I have been building apps using react , but was unable to find free and simple analytics tool for the website. So tried using building a library of my own.

How I built it (How did you utilize refine? Did you learn something new along the way? Pick up a new skill?)

I used React+typescript ,refine and supabase as a data provider.
I came across refine and supabase during this hackathon and for the first time I learned them by building this app. Also used Vite in this app which was also new for me. Learned a lot of things.It was challenging yet exciting journey.

Additional Resources/Info

Refine
Supabase
npm library:View

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (2)

Collapse
 
elliot_brenya profile image
Elliot Brenya sarfo β€’

Thanks for the walkthrough and detailed explanation 🫢🏽

Collapse
 
kakug profile image
Kaku-g β€’

Thanks man;)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay