DEV Community: Pankaj Maity

Blockday - A Simple To-Do List Built with GitHub Copilot

Pankaj Maity — Fri, 16 Oct 2026 03:36:59 +0000

Blockday - A Simple To-Do List Built with GitHub Copilot

I built Blockday, a responsive To-Do List application with a block-style, Minecraft-inspired design.

The idea was simple: create a lightweight task manager that makes everyday task planning a little more engaging while keeping the interface clean and easy to use.

Features

Add tasks with Normal, High, or Low priority
Assign a due date to tasks
Automatically identify overdue tasks
Optional reminders for tasks due today
Browser notifications when permission is granted
In-app reminders when browser notifications are unavailable
Mark tasks as completed
Search tasks by title
Filter tasks by All, Active, or Done
Delete tasks
Track completion progress
Daily streak and best streak tracking
Automatically save tasks using browser localStorage
Responsive design for desktop and mobile
Works without a backend or database

Technologies Used

HTML
CSS
Vanilla JavaScript
Browser localStorage
Browser Notifications API
GitHub Codespaces
GitHub Copilot
Render

No React, Node.js, database, or external backend is required.

Built with GitHub Copilot

One of the main reasons I built this project was to explore how GitHub Copilot can assist throughout the development process.

I used GitHub Copilot inside GitHub Codespaces to help build and improve the application, including:

Structuring the application
Implementing task management functionality
Adding due dates
Implementing reminders
Fixing UI layout issues
Improving responsive behavior
Creating project documentation

The process wasn't simply about asking Copilot to build an application. I provided requirements, reviewed the generated code, tested the application, identified issues, and then used specific prompts to improve the implementation.

Due Dates and Reminders

Users can assign a due date when creating a task or add/change it later.

Tasks are organized into:

Overdue
Due Today
Upcoming
No Due Date
Completed

The application also provides optional reminders for incomplete tasks that are due today.

When reminders are enabled, the application can use browser notifications if permission is granted. If notifications are unavailable or blocked, an in-app reminder is used instead.

The current implementation checks reminders while the application is open, so it does not guarantee notifications when the website is completely closed.

Data Storage

Tasks are stored locally in the browser using localStorage.

This means:

Tasks remain after refreshing the page.
Tasks normally remain after restarting the browser.
Tasks are not uploaded to a server.
Tasks are not synchronized between different devices or browsers.

Live Demo

Try it yourself: https://blockday-todo.onrender.com/

Create your own tasks and explore the different features.

GitHub Repository

https://github.com/pnkj006/ToDoList-Using_Copilot

What I Learned

This project helped me understand how AI coding tools can fit into a real development workflow.

The important part wasn't simply generating code with Copilot. I had to:

Define the requirements clearly.
Review the generated code.
Test the application.
Identify UI and functionality issues.
Give Copilot specific prompts to fix them.
Document the project.
Deploy the final version.

It was a useful hands-on experience with AI-assisted development, GitHub Codespaces, Git, browser APIs, and deployment.

What's Next?

Some improvements I would like to explore in the future:

User authentication
Cloud-based task synchronization
Database storage
More advanced reminder scheduling
Reliable background push notifications
Task categories and tags
Drag-and-drop task organization

For now, Blockday is a simple and lightweight project that helps you plan your day, one block at a time.

GitHub #GitHubCopilot #Codespaces #JavaScript #WebDevelopment #HTML #CSS #OpenSource

EcoQues-turn Screen Time Into Outside Time

Pankaj Maity — Wed, 07 Oct 2026 11:39:50 +0000

EcoQuest — Turn Screen Time Into Outside Time

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

What I Built

EcoQuest is an AI-powered outdoor habit-building web app designed to help people turn screen time into real-world exploration.

Instead of simply telling people to "spend less time on their phones," EcoQuest gives them something specific to do outside.

Users choose:

How much time they have
Their environment
Their mood
Their difficulty level

EcoQuest then uses Google Gemma 4 to generate a personalized outdoor quest.

For example, a user might choose:

20 minutes · Park · Curious · Easy

and receive a quest such as The Tree Detective, with simple observation and exploration steps they can complete outdoors.

The experience then continues with:

Choose → Generate → Explore → Complete → Earn XP → Build a Streak → Journal

The app tracks outdoor minutes, completed quests, XP, nature streaks, and personal field notes locally in the browser.

EcoQuest is built around a simple idea:

The goal isn't to spend more time on another app. It's to spend less time on screens and more time in the real world.

Demo

Live Demo: https://ecoquest-txcy.onrender.com/
The live application demonstrates the complete experience:

Choose quest preferences
Generate a personalized quest with Gemma 4
Start the outdoor quest
Complete the timed experience
Earn XP and increase outdoor time
Build a nature streak
Automatically create a journal entry

Code

GitHub: https://github.com/pnkj006/EcoQuest

The project is built as a small, focused MVP with the AI generation layer separated from the frontend.

How I Built It

EcoQuest is built with:

React
Vite
JavaScript
Google Gemma 4
Gemini API
Node.js
localStorage
CSS

The core architecture is:

React Frontend
      ↓
/api/generate-quest
      ↓
Node.js Server
      ↓
Gemma 4
      ↓
Structured Quest JSON
      ↓
Personalized Outdoor Quest

The user preferences are sent to a server-side API endpoint. The server asks Gemma 4 to generate a structured quest containing the title, duration, environment, difficulty, description, steps, and optional bonus challenge.

I used Gemma 4 (gemma-4-26b-a4b-it) because the quest-generation task is short, structured, and highly adaptable to user preferences.

The model is instructed to create realistic and safe outdoor activities without requiring special equipment. It also avoids dangerous activities, unsafe road crossings, approaching wildlife, disturbing plants or animals, and entering restricted/private areas.

The rest of the application is intentionally lightweight. User progress is stored locally using localStorage, so the MVP does not require authentication or a database.

Why Does Open Innovation Matter?

For EcoQuest, the AI model isn't just an additional feature. It is the component responsible for turning a user's mood, available time, and surroundings into an actionable outdoor experience.

Using an open-weight model such as Gemma gives the project a path beyond a single closed AI provider.

Because Gemma is an open-weight model, the quest-generation layer can potentially be adapted, fine-tuned, evaluated, or eventually self-hosted as the project grows.

That matters for a project like EcoQuest because the goal is not simply to generate text. The long-term goal is to create an AI system that understands different environments and creates useful, safe, context-aware experiences while keeping the underlying technology more open and adaptable.

For this MVP, Gemma made it possible to experiment with that idea without building a large recommendation system or manually creating hundreds of quests.

My Agent Session

I built EcoQuest with an AI-assisted development workflow and used Antigravity throughout the project for implementation, testing, debugging, and iteration.

The development process included:

Building the initial React/Vite application
Designing the editorial outdoor-focused interface
Integrating Gemma 4
Building the quest timer and completion flow
Implementing XP and streak tracking
Adding automatic journal entries
Adding journal deletion
Testing localStorage persistence
Fixing calendar/timezone issues in streak calculation
Testing responsive behavior
Preparing the project for deployment

Prize Categories

Best Use of Gemma

EcoQuest is entering the Best Use of Gemma category.

Gemma 4 is used as the core AI engine for personalized outdoor quest generation. The model directly transforms the user's selected time, environment, mood, and difficulty into structured quests that drive the main product experience.

What's Next

EcoQuest is currently an MVP, but there are several directions I would like to explore:

Weather-aware quests
More environment-specific challenges
Richer quest history and analytics
Optional location-aware exploration
More advanced personalization
Optional cloud synchronization
Exploring local or self-hosted Gemma inference

For now, the most important thing is simple:

Close the laptop. Go outside. Complete a quest.

new to community

Pankaj Maity — Mon, 05 Oct 2026 08:45:36 +0000

hello everyone