🖥️ Task Management App

🎯 Learning, Web Developer

Archived Repo↗

🔎 Overview

Purpose

Web App for managing tasks (CRUD), User Authentication, Profile Management, and automated clean up.

Tech Stack

Next.js, TypeScript, Supabase, CSS

🤵User Authentication: sign-up, login, logout, password reset.
⌨️Task Management: CRUD Task, Soft Deletion.
🧑‍💻User Profile Management: Display Name, Email, Password, Task Stats).
🧭Navigation bar with dynamic user greetings.
🏃‍♂️‍➡️Automated soft-deleted task deletion using pg_cron.

Project Status

Partially functioning, paused due to unresolved issue (sign-up errors)

My Role

It was my personal project. I was working for all the features, and debugging.

🏗️ Main Components

🧩

Components

  • `Navbar.tsx` Dynamic Navigation
🎨

Styling

  • Responsive, self-designed UI for a cohesive look
⚡

Automation

  • `pg_cron`: Scheduled job to permanently delete soft-deleted tasks after 30 days
🗄️

Database

  • `auth.users` : Store user data
  • `profiles` : Store user `display_name`
  • `tasks` : Store Tasks
📄

Pages

  • `/sign-up` : User Registration
  • `/login` : User Login
  • `/todo` : Task management page
  • `/profile` : User Profile and stats
  • `/reset-password` : Password Resetting
📅

Development Timeline

  • Task Management Page (Create, Read, Update)
  • Task Deletion (Soft Delete and Permanent Deletion)
  • Profile Page, Navbar, Sign Up, Login, Password Reset, and `pg_cron`
  • Encountered sign-up issues, leading to project pause

⚠️ Problems and Concerns

Supabase Related Problems

Most problems occurred due to lack of understanding in utilizing Supabase and weaknesses in dealing with SQL queries.

📧

Dummy Accounts and Verification

  • Used fake emails (e.g., test5@example.com), causing verification failures and bounce backs
  • Solution: Disabled email confirmation temporarily to bypass limits
🔒

SMTP and RLS Challenges

  • Received notification: "Email sending privileges at risk due to bounce backs"
  • Struggled with Row-Level Security (RLS) and Simple Mail Transfer Protocol (SMTP) concepts
  • Attempted: Suggested Resend SMTP setup (not implemented)
⏱️

Email Rate Limits

  • Hit Supabase's ~100 emails/hour limit due to dummy accounts
  • Solution: Disabled email confirmation, but bounce backs persisted
💾

Database Error Saving New User

  • Sign-up failed with "Database error saving new user" despite using real emails
  • Attempted:
  • - Updated create_user_profile trigger to disable RLS and add error logging
  • - Enhanced signup/page.tsx error handling
  • - Tested manual auth.users insertion
  • Concern: Unresolved, likely due to trigger/RLS or SMTP issues

Lack of Preparation and Untidy Beginnings

This project was intentionally a leisure project, so the preparation, ideation, and features brainstorm was barely done. Tools, ORMs, Databases, and methods were never prepared, and as the project progressed, I was getting more overwhelmed thanks to the unknown and unresolved errors.

📚 Learning Process

⚛️

React and Next.js

  • Built dynamic pages (/profile, /signup) using hooks (useState, useEffect)
  • Learned routing (pages folder) and component structure (components folder)
  • Still exploring "use client", useEffect, and folder architecture
📘

TypeScript

  • Defined types (e.g., task stats) and handled nullable values
🛠️

Supabase

  • Implemented authentication (sign-up, login, password reset)
  • Managed database with RLS for secure access
  • Used triggers (create_user_profile) and pg_cron for automation
🌐

Web Development Concepts

  • Designed database tables (profiles, tasks) with foreign keys
  • Applied custom CSS styling
  • Handled errors with try/catch and user feedback
  • Configured environment variables (.env.local)