Forem: Rodney Gitonga

Building a Luxury Analytics Dashboard with Next.js 16 & Tailwind v4

Rodney Gitonga — Fri, 16 Jan 2026 23:16:48 +0000

In the world of data analytics, dashboards are often purely functional—grids of numbers, standard charts, and utilitarian design. But for my latest project, LuxeMetric Dashboard, I wanted to challenge that norm. I set out to build a platform that doesn't just display data but presents it with the elegance of a high-end fashion brand.

Here is how I combined the bleeding-edge power of Next.js 16 and React 19 with the refined aesthetics of Tailwind CSS v4 to create a portfolio piece that stands out.

[Dashboard Preview]

🏗️ The Tech Stack: Bleeding Edge

To make this dashboard perform as good as it looks, I chose a stack that pushes the boundaries of modern web development:

Framework: Next.js 16 (App Router, Turbopack)
Core: React 19 (Server Actions, useActionState, useOptimistic)
Styling: Tailwind CSS v4 (Alpha/Beta)
UI Primitives: Shadcn/ui
Animations: Framer Motion (Scroll-linked & Layout animations)
Visualization: Recharts

💎 Design Philosophy: The "Luxe" Factor

The core design goal was "Luxury." I wanted to avoid the generic "SaaS Blue" or "Bootstrap Default" look.

Palette: I used a curated "Stone" & "Amber" color palette inspired by high-end editorial layouts.
Typography: Playfair Display serves as the primary serif font, adding an editorial touch to headers, while Inter maintains readability for data.
Cinema-Style Reveals: Using the new View Transitions API, toggling between light and dark themes isn't just a flash—it's a smooth, cinematic reveal that feels tailored.

⚡ Key Features & Engineering Wins

Real-Time Data with Server Actions
Gone are the days of massive useEffect chains for fetching data. I leveraged React 19 Server Actions to handle data fetching directly from the server. This keeps the client bundle small and the data fresh.
Optimistic UI
Nothing kills sophistication like a loading spinner on a simple interaction. I used the useOptimistic hook to make interactions like "Liking" a project or updating a metric feel instant. The UI updates immediately, while the server syncs in the background.
Web Workers for Heavy Lifting
To ensure the main thread stays buttery smooth (targeting a 100/100 Lighthouse score), I offloaded heavy data simulations and calculations to Web Workers. This means complex charts render without janking the scroll or navigational animations.

📊 Specialized Visualization

One of the highlights is the Seasonality Page. It uses an interactive Area Chart to visualize trends over time, allowing users to scrub through data with responsive tooltips. It’s not just about showing the number; it’s about showing the story behind the number.

🚀 Conclusion

Building LuxeMetric was a journey into the future of React. Next.js 16 and Tailwind v4 are game-changers for developer experience and performance.

If you're interested in the code or want to see how I implemented specific features like the View Transitions or Web Workers, check out the repository below!

Link to GitHub Repository

Hi, I'm Rodney Gitonga, a Data Analytics Officer & BI Specialist. Connect with me on LinkedIn.

How I Built a Daily Streak Keeper with Python & GitHub Actions

Rodney Gitonga — Fri, 16 Jan 2026 23:06:27 +0000

A guide on automating GitHub activity to keep your contribution streak alive using Python and GitHub Actions.

🚀 How I Built a Daily Streak Keeper with Python & GitHub Actions

We've all been there—staring at that one gray square in our GitHub contribution graph that broke a perfect streak. Whether you're busy, sick, or just forgot to push code, losing a streak can be demotivating.

I decided to solve this problem by automating a daily commit using Python and GitHub Actions. Here is how I built my Daily Streak Keeper.

💡 The Idea

The goal was simple:

Fetch a daily quote (to make the commit meaningful).
Update the README.md with the new quote.
Commit and push the changes automatically every day.

🛠️ The Tech Stack

Python: To fetch the quote and update the file.
GitHub Actions: To schedule the script to run daily.

💻 The Code

The Python Script (update_quote.py)

I wrote a simple Python script that fetches a random quote from an API and updates the README.md file. I used dummyjson.com for stability.

import requests
import datetime

def get_quote():
    url = "https://dummyjson.com/quotes/random"
    try:
        response = requests.get(url)
        if response.status_code == 200:
            data = response.json()
            return f"\"{data['quote']}\" — {data['author']}"
        else:
            return "Could not fetch a quote today. Keep coding!"
    except Exception as e:
        return f"Error fetching quote: {e}"

def update_readme(quote):
    date_str = datetime.datetime.now().strftime("%Y-%m-%d")

     Template for the README
    readme_content = f"""
 🚀 Daily Streak Keeper

This repository automatically updates itself every day at 12:00 PM Nairobi Time to keep my GitHub contribution streak alive.

 📅 Quote for {date_str}

> {quote}

---
Last updated automatically by GitHub Actions.
"""

    with open("README.md", "w", encoding="utf-8") as file:
        file.write(readme_content)

if __name__ == "__main__":
    quote = get_quote()
    update_readme(quote)

The Automation (daily-quote.yml)

Next, I needed this script to run automatically. GitHub Actions is perfect for this. I set up a workflow that runs every day at 12:00 PM Nairobi Time (09:00 UTC).

name: Daily Quote Update

on:
  schedule:
     09:00 UTC = 12:00 PM Nairobi Time
    - cron: '0 9   '
  workflow_dispatch:

jobs:
  update-readme:
    runs-on: ubuntu-latest
    permissions:
      contents: write

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Set up Python
        uses: actions/setup-python@v4
        with:
          python-version: '3.x'

      - name: Install dependencies
        run: |
          pip install -r requirements.txt

      - name: Run Python script
        run: |
          python update_quote.py

      - name: Commit and Push
        run: |
          git config --global user.name "Quote Bot"
          git config --global user.email "${{ github.actor }}@users.noreply.github.com"

          git add README.md
          if git diff-index --quiet HEAD; then
            echo "No changes to commit"
          else
            git commit -m "Daily Quote: Updated README with new inspiration 📜"
            git push
          fi

🎯 Conclusion

This was a fun little project to ensure my profile stays active while also giving me a nice quote to read every day. It’s a great example of how powerful and easy GitHub Actions can be for automating simple tasks.

Check out the code in the repository and feel free to fork it to create your own streak keeper! REPO

Build a Professional Real-Time Chat App with Docker, Flask, and Socket.IO

Rodney Gitonga — Sat, 10 Jan 2026 20:15:39 +0000

💬 Instant Messaging Made Simple: Meet ProChat

Building a real-time chat application is often seen as a "Right of Passage" for developers. It touches on so many critical concepts: WebSockets, asynchronous events, database persistence, and containerization.

Today, I want to share ProChat (DockerChat), a project that takes this concept to the next level. It's not just a "Hello World" chat app; it's a fully functional, professional-grade communication tool that you can spin up in seconds thanks to Docker.

![ProChat Interface]

🚀 Why This Project?

Most chat tutorials stop at "sending a message." ProChat aims to be something you'd actually want to use. We focused on:

Ease of Deployment: If you have Docker, you have the app. No requirements.txt hell, no database setup scripts.
User Experience: A modern, dark-themed UI that feels responsive and alive.
Feature Completeness: Channels, private DMs, media support, and persistent history.

✨ Key Features

Here is what makes ProChat stand out:

Real-Time Communication
Using Flask-Socket.IO, messages are delivered instantly (< 100ms latency). Whether you are in the same room or connecting over the internet, the chat flows naturally without refreshing the page.
Multi-Channel & Private Messaging
Users can hop between topic-based channels (general, tech, gaming) or slide into DMs for private 1-on-1 conversations. The UI clearly separates these contexts, keeping your conversations organized.
Rich Media Support
Text is boring! ProChat supports:
- Emojis: A built-in picker with 100+ emojis.
- Images & Videos: Drag, drop, and share media directly in the chat.
- Links: URLs are automatically detected and clickable.
Smart Persistence
We use SQLite with Docker Volumes to ensure your data is safe. Restart the container? Your messages are still there. It's the perfect balance of simplicity and reliability for a self-hosted app.

🛠️ The Tech Stack

We stuck to a robust, Python-centric stack:

Backend: Python 3.11 with Flask 2.3.3
Real-Time Engine: Socket.IO with Eventlet for high-concurrency handling.
Database: SQLAlchemy ORM with SQLite.
Frontend: Vanilla JS (ES6+), HTML5, and CSS3. No heavy frameworks, just pure performance.
DevOps: Docker & Docker Compose for orchestration.

🏁 Quick Start

Want to try it out? It's incredibly simple.

Clone the repo (or download the files)
Run with Docker Compose:

docker-compose up -d

Open your browser to http://localhost:5000.

That's it! You can open multiple tabs to simulate different users, or share your IP with a friend on the same network to chat instantly.

🐳 Why Docker?

Containerizing this application was a game-changer. It ensures that:

Expected Python versions are used.
Dependencies are isolated.
The database file is preserved in a volume, separating code from data.
User setup is reduced to a single command.

🔮 What's Next?

This project was a fantastic journey into full-stack development. Future updates might include Redis for scaling across multiple nodes or user authentication integration.

Check out the code and let me know what you think!

Happy Coding! 🚀Repo

Introducing Neon Protocol: The Cyberpunk Theme Your VS Code Needs

Rodney Gitonga — Sat, 10 Jan 2026 18:36:01 +0000

Are you tired of the same old flat, desaturated coding environments? Do you dream of electric sheep and high-tech dystopias while you debug?

Meet Neon Protocol.

What is Neon Protocol?
Neon Protocol is a cyberpunk-inspired VS Code theme designed for developers who want a visually striking and energetic coding environment. It's not just another dark theme; it's a high-octane visual upgrade for your editor.

We've combined high-saturation neon colors with deep, dark gray bases to create a theme that pops without burning your retinas. It's perfect for late-night coding sessions where you want to feel like a hacker in a sci-fi movie.

Key Features

High-Contrast Neon Colors: Vibrant syntax highlighting that makes your code easy to read and exciting to look at.
Dark Gray Background: Designed to be easy on the eyes, reducing strain during those marathon coding sessions.
Cyberpunk Aesthetic: Every color is chosen to contribute to a futuristic, techy vibe.
Comprehensive Scope Coverage: Whether you're writing JavaScript, Python, Java, C++, Rust, or Go, Neon Protocol has you covered with consistent and beautiful highlighting.
Get It Now
Ready to upgrade your protocol? You can install Neon Protocol directly from the internal marketplace or build it yourself!

Local Installation

Clone the repository.
Install dependencies: npm install
Build the package: npm run build
Package it: vsce package
Install: code --install-extension neon-protocol-0.0.1.vsix
Customization
Want to tweak the matrix? You can customize the color palette by editing
src/design-tokens.js
and rebuilding the theme. It's your environment—make it yours.

Created with ❤️ for cyberpunk enthusiasts and developers who love vibrant colors.Repo

New Year, New You Portfolio Challenge

Rodney Gitonga — Thu, 08 Jan 2026 19:12:16 +0000

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI(https://dev.to/challenges/new-year-new-you-google-ai-2025-12-31)

About Me
I am an Engineer, Analyst, and Builder working at the intersection of analytical rigor and creative engineering.

My philosophy is simple: "Data is the question. Code is the answer."

I don't just write scripts, I architect clarity. In a world drowning in noise, I build systems that filter, process, and visualize the signal. I built this portfolio to move beyond a generic resume and create a digital identity that truly reflects my "T-shaped" skillset—deep in Data/backend, but capable of beautiful, interactive Frontend work.

Portfolio

How I Built It
I wanted a site that felt fast, premium, and "alive," so I avoided heavy frameworks and stuck to high-performance Vanilla HTML/CSS/JS with a "Neo-Dark" aesthetic.

Tech Stack:

Frontend: HTML5, CSS3 (Glassmorphism), JavaScript (ES6+).
Visualization: Custom HTML5 Canvas for the hero animation and Chart.js for the skills radar.
Infrastructure: Dockerized Nginx server.
Deployment: Google Cloud Run via Cloud Build.
The Google AI Workflow: I used Gemini as my pair programmer throughout this process. It was instrumental in:
Design System: Helping me define the "Neo-Dark" color palette and glassmorphism tokens.
Complex Logic: Writing the initial math for the "Data Constellation" particle system in the hero section.
Cloud Deployment: Debugging tricky IAM permission errors (roles/cloudbuild.builds.builder) during the Google Cloud Run deployment, turning hours of troubleshooting into a 5-minute fix.
What I'm Most Proud Of:
The "Data Constellation" Hero: Instead of a static image, I built an interactive network of connecting nodes that reacts to the mouse. It perfectly symbolizes my work—connecting data points to create meaning.
The Skills Radar: I ditched the boring list of bullet points for a dynamic, data-driven Radar Chart that visualizes my balance between "Analytics," "DevOps," and "Programming."
Containerized Deployment: This isn't just a static bucket upload; it's a fully containerized Nginx application running on Google Cloud Run. It scales automatically and loads instantly.