DEV Community

Cover image for React, Tremor & Tailwind - Coder Stats via GitHub API
Sm0ke
Sm0ke

Posted on โ€ข Edited on โ€ข Originally published at blog.appseed.us

React, Tremor & Tailwind - Coder Stats via GitHub API

Hello Coders!

This article mentions an open-source sample that presents the developer's stats pulled from GitHub free API and presents the information using React & Tremor Library. Thanks for reading!


Copyright Note: Project adapted for React & Tremor from Svelte Version crafted by Robert Soriano.

The flow is pretty simple: Users input their username, the information is consumed from GitHub and the charts are displayed. For newcomers, Tremor is a modern stack built on top of Tailwind and ReCharts, focusing mainly on scientists and developers that develop dashboards and analytics products.

React, Tremor & Tailwind - Open-Source Sample (animated presentation)


The product can be used by anyone that has a decent NodeJS version installed in the workstation. Once the sources are saved locally, the project can be started easily.

$ git clone https://github.com/app-generator/sample-tremor-github-charts.git
$ cd sample-tremor-github-charts
$
$ yarn       # install modules
$ yarn start # start for development 
Enter fullscreen mode Exit fullscreen mode

โœจ What is Tremor

Tremor is a low-level, opinionated UI component library to build dashboards. It offers components, such as charts, layouts, or input elements, covering the essential parts of a dashboard or analytical interface.

Their approach provides flexibility between beautiful defaults and fast customization. The best way to get started is to check out our templates, called Blocks, for getting a feeling of how components are used and combined.

Tremor - Free React Library for Dashboards


Thanks for reading! For more resources and support, please access:

  • ๐Ÿš€ Free support provided by AppSeed (email & Discord)
  • ๐Ÿ‘‰ More free apps crafted in Flask, Django, and React

Top comments (6)

Collapse
ย 
crearesite profile image
WebsiteMarket โ€ข

nice use case.

Collapse
ย 
sm0ke profile image
Sm0ke โ€ข

ty ๐Ÿš€๐Ÿš€

Collapse
ย 
uithemes profile image
ui-themes โ€ข

Tremor got some traction lately.
Thank you for this experiment

Collapse
ย 
sm0ke profile image
Sm0ke โ€ข

looks promising. ๐Ÿš€๐Ÿš€

Collapse
ย 
khalidsaifullahfuad profile image
Khalid Saifullah Fuad โ€ข

So, you're heavily inspired from octoprofile by bchiang7, Right?. You know should add credits and appreciate her work.

Collapse
ย 
sm0ke profile image
Sm0ke โ€ข

Hello @khalidsaifullahfuad

The code was adapted from a Svelte codebase, here are the credentials:

Copyright Note: Project adapted for React & Tremor from Svelte Version crafted by Robert Soriano.