Instant disposable email — no signup, no hassle.
Features • Tech Stack • Getting Started • Usage • Structure • Contributing • License
DropMail is a sleek, privacy-first disposable email web app. Generate a temporary email address instantly and receive messages in real-time — perfect for signing up to services, testing, or protecting your real inbox from spam.
No accounts. No tracking. No strings attached.
| Feature | Description |
|---|---|
| ⚡ Instant Generation | One click to create a fresh disposable email |
| 📥 Live Inbox | Auto-refreshing inbox every 30 seconds |
| 📖 Email Viewer | Read full HTML & text emails with OTP/link detection |
| 📋 One-Click Copy | Copy your temp address to clipboard instantly |
| 🗑️ Message Deletion | Delete individual messages when done |
| 🎨 Beautiful UI | Glassmorphism, gradient accents, smooth animations |
| 📱 Fully Responsive | Works flawlessly on desktop, tablet, and mobile |
| 🌗 Dark Mode Ready | Full dark theme support built-in |
- Framework: React 18 + TypeScript 5
- Build Tool: Vite 5
- Styling: Tailwind CSS 3 + custom design system
- Animations: Framer Motion 12
- Data Fetching: TanStack React Query 5
- Routing: React Router 6
- Icons: Lucide React
- UI Components: shadcn/ui (Radix primitives)
- API: Temp Mail API via RapidAPI
# Clone the repository
git clone https://github.com/aisurf3r/DropMail.git
cd DropMail
# Install dependencies
npm install
# or
bun installThe API key is configured in src/lib/tempMailApi.ts. For production, move it to an environment variable:
VITE_RAPIDAPI_KEY=your_api_key_herenpm run dev
# or
bun devOpen http://localhost:5173 in your browser.
npm run build- Open the app — a random email address is generated automatically
- Copy the address — use the Copy button to grab it
- Use it anywhere — sign up for services, newsletters, etc.
- Check your inbox — messages appear automatically (30s refresh)
- Read & delete — open messages to read, delete when done
- Generate new — hit "New" for a fresh address anytime Limited to 150 api calls/day
src/
├── components/
│ ├── ui/ # shadcn/ui base components
│ ├── EmailAddressBar.tsx # Email display + copy/generate controls
│ ├── EmailViewer.tsx # Full email reader with HTML rendering
│ ├── FloatingOrbs.tsx # Animated background decorations
│ ├── InboxList.tsx # Message list with animations
│ └── NavLink.tsx # Navigation component
├── hooks/ # Custom React hooks
├── lib/
│ ├── tempMailApi.ts # API integration layer
│ └── utils.ts # Utility functions
├── pages/
│ ├── Index.tsx # Main application page
│ └── NotFound.tsx # 404 page
├── index.css # Design system & theme tokens
├── App.tsx # Router setup
└── main.tsx # Entry point
DropMail uses a custom design system built on CSS custom properties and Tailwind:
- Typography: Space Grotesk (display) + Inter (body)
- Colors: Warm coral primary → violet accent gradient palette
- Effects: Glassmorphism, animated floating orbs, smooth transitions
- Tokens: Fully themeable via HSL CSS variables (light + dark)
Contributions are welcome! Feel free to:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is open source and available under the MIT License.
---Made with ❤️ by @aisurf3r---
Made with ❤️ by aisurf3r