ZenTask App

Create, complete, and delete tasks
Google Sheets integration (add/update/delete)
Smooth UI animations
Clear All Completed
Persistent state with Google Scripts

Live View: View Demo

Code: Github [Front End] [Back End]

features

Used Google Sheets as a noSQL-style backend
Deployed a custom Web App endpoint with Apps Script
Handled CORS, async sync, and local caching

challenges solved

I plan to extend ZenTask by:

Adding Google Authentication so users can have personalized task lists
Replacing Google Sheets with MongoDB for scalable storage and better querying
Introducing a dark mode, a pastel theme, and maybe even seasonal colorways for a customizable experience
Building a mobile-first progressive web app (PWA) version for better offline support
Exploring task sorting, filtering, and possibly AI task suggestions

what's next?

Building ZenTask taught me how to create a full-stack application that integrates with external services like Google Sheets using Apps Script. I learned how to structure frontend and backend communication securely using environment variables, and how to handle real-time updates (like task status toggling) with proper API requests. On the frontend, I leveled up my UI skills using Tailwind CSS and Framer Motion for a smooth, clean user experience. Most importantly, I gained experience debugging CORS issues, handling async fetch calls, and designing a lightweight, maintainable project.

what i learned

A few early wireframes and ideas of where I wanted the app to be

early planning

UI Designer

Fullstack Developer

team

Figma

VS Code

Google Sheets

Netlify

tools

UI Designer

Fullstack Developer

role

React + Vite
Tailwind CSS
Framer Motion
Node.js + Express
Google Apps Script + Sheets

tech stack

Click Here

Link to Deployed Site

ZenTask is a calming productivity app built with React and Tailwind CSS, designed for focus and flow. It uses Google Sheets as a live database via Google Apps Script — no signup required.