DEV Community: Ayush Jhawar

Thirsty Leaf: A Tiny Plant Reminder App That Gets You Off Your Screen 🪴

Ayush Jhawar — Sat, 10 Oct 2026 01:50:17 +0000

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass

What I Built

ThirstyLeaf is a tiny plant-watering reminder app. Add a plant, pick a date and time, and it tells you when it’s thirsty. It’s a nudge to look up from the screen, walk over to your plants, and actually touch some (potted) grass.

It’s for anyone who keeps killing houseplants because they forget, which includes me.

Quick dates: Today / Tomorrow / In 3 days / Next week chips set the date in one tap.
Repeats: daily through monthly. Marking a plant watered reschedules from now, so a late watering still gets a full interval.
Needs water: everything that’s due is collected in one place, and the count shows in the browser tab title so you can spot it from another tab.
Watered / +1 hour / +1 day: mark a plant done or snooze it. One-time reminders move to Done, where Undo brings them back.
No account, no backend: everything lives in your browser’s localStorage.

Demo

Code

Ayushjhawar8 / ThirstyLeaf

Set a reminder to water any plant on any day and time. No account, no backend — reminders are saved in your browser's `localStorage`.

🪴 Plant Reminders

Set a reminder to water any plant on any day and time. No account, no backend — reminders are saved in your browser's localStorage.

Run it

npm install
npm run dev

Then open the URL it prints (usually http://localhost:5173).

Script	What it does
`npm run dev`	Start the dev server with hot reload
`npm run build`	Typecheck and build to `dist/`
`npm run preview`	Serve the production build locally
`npm run lint`	Run oxlint

How it works

Add a reminder with a plant name, a date, a time, and an optional note Use the Today / Tomorrow / In 3 days / Next week chips to set the date fast.
Repeat turns it into a recurring reminder (daily through monthly). Marking it watered reschedules the next one from now, so a late watering still gets a full interval.
Needs water collects everything that's due…

View on GitHub

How I Built It

The app is a small React + TypeScript project built with Vite (npm run dev, npm run build, npm run lint with oxlint).

A few design choices:

Rules live in one place. lib/reminders.ts holds the repeat, water, snooze, and validation logic, so the UI components stay thin.
A ticking clock hook. useNow re-renders on an interval, so reminders turn due on their own without a refresh.
Persistence via a hook. useLocalStorage keeps state in the browser, so there’s no server to run or pay for.

Why Does Open Innovation Matter?

ThirstyLeaf's whole promise is that your data stays with you. Nothing leaves your browser. It would be odd to build that on a tool that sends my code and prompts to someone else’s servers.

Open tools made that consistent:

No lock-in and no gatekeeping. I didn’t need an API key, a billing account, or permission to start. A weekend idea stayed a weekend project.
I can see and control what I build with. Open models and tooling can be inspected, swapped, and run on my own terms. A closed API can change its pricing, behavior, or availability overnight.
The app is forkable by design. Because Rootine is open source and has no backend, anyone can take it and add what they need, like browser notifications, a PWA install, or sync, without asking me.

Small, useful, local-first tools are exactly what open innovation makes cheap to build and safe to share.

Cat-a-log 🐱- A To-Do App Built for a Cat-Loving Friend

Ayush Jhawar — Fri, 02 Oct 2026 17:45:15 +0000

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

What I Built

I built Cat-a-log, a cat-themed to-do application for a friend who absolutely loves cats. 🐱

They wanted something simple to keep track of everyday tasks, but I didn't want to build just another boring checklist.

So I thought: why not make a to-do app that actually feels like something they'd enjoy using?

That's how Cat-a-log came to life.
It lets them:

✅ Create, edit, and delete tasks
⏰ Set deadlines and track the remaining time
📊 See their progress through a visual pie chart
🌙 Switch between light and dark mode
📱 Use it across desktop and mobile
🐱 Unlock a spinning cat after completing tasks

The spinning cat started as a fun little idea, but it became the personality of the whole project. Instead of simply checking off another task, there's a tiny cat waiting as a reward for getting things done.

The goal was simple: build something useful for my friend, but make it feel like it was made specifically for them.

Demo

🎥 Live Demo:

Code

💻 GitHub:

Ayushjhawar8 / Cat-a-Log

Cat-a-Log is a dynamic and feature-rich to-do application designed to help you manage your tasks efficiently

Cat-a-Log

Cat-a-Log is not just a to-do application—it's your purr-sonal assistant for task management, now with a delightful surprise! Along with efficient task tracking, customizable themes, and visual insights, we’ve added an easter egg that’s sure to make you smile: a spinning cat inspired by the viral video Spinning Cat.

Features

Task Management: Create, edit, and delete tasks effortlessly.
Set Deadlines: Assign deadlines to tasks and track how much time remains in real time.
Dark/Light Mode: Toggle between dark and light themes to suit your preferences.
Progress Visualization: A pie chart provides an at-a-glance view of
- Completed tasks
- Remaining tasks
- Expired tasks
Responsive Design: Fully functional across devices, from desktops to mobile phones.

Technologies Used

Frontend: HTML, CSS, JavaScript
Visualization: Chart.js
Theme Toggle: CSS Variables and JavaScript

How to Use

Clone the repository:

git clone https://github.com/Ayushjhawar8/Cat-a-Log

Install the dependencies:

cd Cat-a-Log

…

View on GitHub

How I Built It

Cat-a-log is a lightweight web application built using:

HTML — application structure
CSS — styling, responsive design, and themes
JavaScript — task management and application logic
Chart.js — progress visualization

The application keeps track of tasks, deadlines, completed tasks, remaining tasks, and expired tasks, and presents that information through a simple dashboard.

I also added light/dark mode using CSS variables and JavaScript so the experience can be customized depending on the user's preference.

And, of course, there's the cat. 🐈

Complete your tasks and you get a spinning cat as a little celebration.

Why Does Open Innovation Matter?

I wanted the project to be something I could experiment with and continue extending, rather than being completely dependent on a closed system.

Using open technology gives me the freedom to experiment, modify the experience, and potentially swap or change the underlying AI components as the project evolves.

For a small personal project like Cat-a-log, that flexibility matters because the goal isn't just to ship something once. It's to be able to keep playing with the idea and make it better for the person it was built for.

Prize Categories

Best Use of GitHub Copilot, Best Use of Gemma

Why Cat-a-log?

There are plenty of to-do apps already.

But this one wasn't built because the world needed another to-do list.

It was built because a friend loves cats. 🐱

And sometimes that's enough of a reason to build something.

Integrate Daytona into Your React Project: A Step-by-Step Guide

Ayush Jhawar — Sat, 07 Dec 2024 14:08:24 +0000

Introduction

Wondering what Daytona is? In this post, I’ll break it down for you:

What Daytona is
Why it matters to you?
How it works with any project really!(But we will focus on React Projects ;) And Lastly
The impact it can have on your development process

Let’s dive in!

What Daytona is?

Daytona is a tool that helps you quickly set up and manage your development environments. It uses OCI containers to create consistent, secure, and reproducible workspaces for your projects.

With Daytona, you can skip the countless hours of figuring out the right configuration for your environment. Simply run one command, and it automatically sets everything up for you.

Woah that's crazy!! Now lets see some real advantage of using Daytona.

Why it matters to you?

Daytona works across:

Any Git Service: GitHub, GitLab, Bitbucket, etc.
Any IDE: VS Code, JetBrains, Vim, and more.
Anywhere: Whether it’s on localhost, AWS, or GCP.

Most Importantly

In seconds, Daytona sets up a pre-configured environment for you. Just run:
daytona create <REPO_URL>

Seems interesting, right? Now let’s take a look at how you can use it in your next react project.

How to use it?

Don't worry! It's super easy 🍰

Let’s take an example of my project Cropify, which I worked on using a Daytona workspace.

👉🏻 Step 1: Install Daytona

Start by installing Daytona on your system. You can follow the step-by-step instructions in the Daytona installation guide.

👉🏻 Step 2: Link Daytona to Your Git Repositories

Next, integrate Daytona with your Git provider for version control. Run the following command in your terminal:

daytona git-providers add

👉🏻 Step 3: Set Up a Cloud Provider

To manage cloud environments such as AWS, Azure, or GCP, you’ll need to install the necessary cloud provider. Run this command to set it up:

daytona provider install

👉🏻 Step 4: Select Your Development Environment

A "Target" refers to the platform where your environment will run, such as Docker (local or remote), AWS, GCP, or other cloud services. Choose your target by running this command:

daytona target set

👉🏻 Step 5: Configure Your IDE

Daytona allows seamless integration with a range of IDEs, such as VS Code, IntelliJ, and others. To set up your preferred IDE, run the following command:

daytona ide

👉🏻 Step 6: Add the `devcontainer.json` to Your Repository

Create a .devcontainer/devcontainer.json file to define the development container setup. This file configures your development environment and ensures that all required dependencies are automatically installed.

You can manually create a devcontainer.json file, or use tools like Devcontainer AI to generate one for you. Below is the devcontainer.json I used for Cropify:

{
    "name": "Cropify Development Environment",
    "image": "mcr.microsoft.com/devcontainers/javascript-node:18",
    "forwardPorts": [
      3000
    ],
    "customizations": {
      "vscode": {
        "settings": {
          "javascript.validate.enable": true,
          "editor.formatOnSave": true
        },
        "extensions": [
          "esbenp.prettier-vscode",
          "dbaeumer.vscode-eslint"
        ]
      }
    },
    "postCreateCommand": "npm install"
  }

👉🏻 Step 7: Create Your Workspace and Project

To initialize your project and set up the development environment, simply run the following command:

daytona create <REPO_URL>

👉🏻 You're All Set!

Your environment is now ready to go! To start your development process, just run:

npm run dev

The impact it can have on your development process

Daytona can really change the way you work by making your development process faster and smoother. Here’s how:

Quick Onboarding: New team members can get started in minutes with pre-configured environments—no need to waste time setting things up.
Consistent Environments: You’ll never hear "it works on my machine" again, as Daytona ensures everyone’s working with the same setup.
Focus on Coding: Spend less time dealing with environment issues and more time building features that matter.
Better Collaboration: Whether you're working solo or in a team, Daytona makes sure everyone has the same setup, making collaboration a breeze.

In short, Daytona takes the headache out of environment setup so you can focus on what really matters—coding!

My Final Thoughts 💡

Honestly, Daytona has been a game-changer for me, and I’m sure it will be for you too! It takes away the frustration of environment setup and lets you focus on what really matters—coding and building amazing projects. If you're starting a new project or just tired of wasting time on configuration, Daytona is definitely worth a try.

Now enough reading .. Go use it now!!

Good luck with your projects, and happy coding! 🚀

daytonaio / daytona

The Open Source Dev Environment Manager.

The Open Source Development Environment Manager

Set up a development environment on any infrastructure, with a single command

Documentation · Report Bug · Request Feature · Join Our Slack · Twitter

Features

Single Command: Activate a fully configured development environment with a single command.
Runs everywhere: spin up your development environment on any machine — whether it's local, remote, cloud-based, physical server, or a VM & any architecture x86 or ARM.
Configuration File Support: Initially support for dev container, ability to expand to DevFile, Nix & Flox (Contributions welcome here!).
Prebuilds System: Drastically improve environment setup times (Contributions welcome here!).
IDE Support : Seamlessly supports VS Code & JetBrains locally, ready to use without configuration. Includes a built-in Web IDE for added convenience.
Git Provider Integration: GitHub, GitLab, Bitbucket, Bitbucket Server, Gitea, Gitness, Azure DevOps, AWS CodeCommit, Gogs & Gitee can be connected, allowing…

View on GitHub

DEV Community: Ayush Jhawar

Thirsty Leaf: A Tiny Plant Reminder App That Gets You Off Your Screen 🪴

What I Built

Demo

Code

Ayushjhawar8 / ThirstyLeaf

Set a reminder to water any plant on any day and time. No account, no backend — reminders are saved in your browser's `localStorage`.

🪴 Plant Reminders

Run it

How it works

How I Built It

Why Does Open Innovation Matter?

Cat-a-log 🐱- A To-Do App Built for a Cat-Loving Friend

What I Built

Demo

Code

Ayushjhawar8 / Cat-a-Log

Cat-a-Log is a dynamic and feature-rich to-do application designed to help you manage your tasks efficiently

Cat-a-Log

Features

Technologies Used

How to Use

How I Built It

Why Does Open Innovation Matter?

Prize Categories

Why Cat-a-log?

Integrate Daytona into Your React Project: A Step-by-Step Guide

Introduction

What Daytona is?

Why it matters to you?

Most Importantly

How to use it?

👉🏻 Step 1: Install Daytona

👉🏻 Step 2: Link Daytona to Your Git Repositories

👉🏻 Step 3: Set Up a Cloud Provider

👉🏻 Step 4: Select Your Development Environment

👉🏻 Step 5: Configure Your IDE

👉🏻 Step 6: Add the devcontainer.json to Your Repository

👉🏻 Step 7: Create Your Workspace and Project

👉🏻 You're All Set!

The impact it can have on your development process

My Final Thoughts 💡

daytonaio / daytona

The Open Source Dev Environment Manager.

The Open Source Development Environment Manager

Features

👉🏻 Step 6: Add the `devcontainer.json` to Your Repository