Skip to content

risudev/DM-DELAY-React-Project-1

Repository files navigation

React + TypeScript + Vite

🔥 DM Delay Button App

A sleek messaging interface built with React + TypeScript that delays sending messages, allowing users a chance to cancel before the message is sent — simulating "Undo Send" logic similar to Gmail or Twitter.


🚀 Features

✅ Delay messages with a countdown timer
✅ Cancel a message before it's sent
✅ Custom delay input (10s / 30s / 60s)
✅ Toast notification when message is sent
✅ Optional message preview
✅ Clean, responsive UI with TailwindCSS + ShadCN


🧠 What You'll Learn

  • setTimeout() and clearTimeout() for async logic
  • React useState for managing message, timer, delay
  • Conditional rendering (Send vs Cancel state)
  • UI structure using TailwindCSS + ShadCN
  • Folder organization: components/, pages/, hooks/
  • Real-world application of message buffers and undo logic

🛠 Tech Stack

Tech Purpose
React + Vite Frontend App Setup (Fast & Modern)
TypeScript Static Typing
Tailwind CSS Utility-first Styling
ShadCN UI Accessible and beautiful UI Components

📃 License MIT © Riswan

About

This app delays your message with a timer before sending — giving you a chance to cancel it.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published