Back

AnonSender - Platform Pesan Anonim

AnonSender adalah platform web yang memungkinkan pengguna untuk mengirim dan menerima pesan anonim dengan aman.

Tech Stack :
Source Code
AnonSender - Platform Pesan Anonim preview 1
  

🎭 AnonSender - Platform Pesan Anonim

AnonSender adalah platform web yang memungkinkan pengguna untuk mengirim dan menerima pesan anonim dengan aman. Dibangun dengan Next.js dan menggunakan Firebase untuk autentikasi dan penyimpanan data.

✨ Fitur Utama

  • 📨 Kirim Pesan Anonim - Kirim pesan tanpa mengungkapkan identitas Anda
  • 👤 Profil Personal - Setiap user memiliki link unik untuk menerima pesan
  • 🔐 Autentikasi Aman - Login/Register dengan NextAuth & Firebase
  • 💾 Simpan Pesan - Simpan pesan favorit ke koleksi pribadi
  • 📱 Responsive Design - Tampilan optimal di berbagai perangkat
  • 🎨 UI Modern - Interface cantik dengan animasi dan efek visual
  • 🔔 Notifikasi Real-time - Dapatkan notifikasi ketika ada pesan baru
  • 🌙 Dark Mode Ready - Dukungan tema gelap/terang

🛠️ Tech Stack

Frontend

  • Next.js 14.2.6 - React Framework untuk production
  • React 18 - Library UI
  • TailwindCSS - Styling utility-first
  • Framer Motion - Animasi smooth
  • Radix UI - Component library untuk accessibility

Backend & Database

  • Firebase - Authentication & Database
  • NextAuth - Authentication framework
  • API Routes - Next.js built-in API

UI Components & Libraries

  • shadcn/ui - Reusable components
  • MagicUI - Komponen animasi modern
  • Lucide React - Icon library
  • Sonner - Toast notifications
  • React Hook Form - Form management
  • Axios - HTTP client

📁 Struktur Proyek

🚀 Getting Started

Prerequisites

Pastikan Anda telah menginstal:
  • Node.js 16.x atau lebih tinggi
  • npm, yarn, pnpm, atau bun

Instalasi

  1. Clone repository
  1. Install dependencies
  1. Setup environment variables
Buat file .env.local di root directory dan tambahkan:
  1. Jalankan development server
  1. Buka browser di http://localhost:3000

📖 Cara Penggunaan

Untuk Pengirim Pesan

  1. Kunjungi link profil user (misalnya: localhost:3000/username)
  2. Tulis pesan anonim di form yang tersedia
  3. Klik kirim - pesan akan dikirim tanpa menampilkan identitas Anda

Untuk Penerima Pesan

  1. Register/Login ke akun Anda
  2. Bagikan link profil Anda ke teman-teman
  3. Buka dashboard untuk melihat pesan yang masuk
  4. Simpan pesan favorit atau hapus pesan yang tidak diinginkan

🎯 Fitur Dashboard

  • Messages - Lihat semua pesan masuk dengan pagination
  • Saved Messages - Koleksi pesan yang telah disimpan
  • Profile - Kelola profil dan link personal
  • Settings - Pengaturan akun dan preferensi

🎨 Komponen UI Custom

Proyek ini menggunakan berbagai komponen UI custom:
  • Wobble Cards - Kartu dengan efek hover menarik
  • Shiny Button - Tombol dengan efek kilau
  • Pulsating Button - Tombol dengan animasi pulse
  • Background Beams - Efek background dengan sinar
  • Shooting Stars - Animasi bintang jatuh
  • Blurry Blob - Background dengan efek blur

📜 API Endpoints

Messages API

  • GET /api/messages - Ambil daftar pesan
  • POST /api/messages - Kirim pesan baru
  • DELETE /api/messages/:id - Hapus pesan
  • PUT /api/messages/:id - Update status pesan (save/unsave)

Users API

  • GET /api/users - Ambil data user
  • POST /api/users - Buat user baru
  • PUT /api/users/:id - Update data user

🔧 Scripts Available

🌐 Deployment

Deploy ke Vercel (Recommended)

  1. Push code ke GitHub repository
  2. Import project di Vercel
  3. Tambahkan environment variables
  4. Deploy!

Deploy Manual

🤝 Contributing

Kontribusi selalu diterima! Silakan:
  1. Fork repository
  2. Buat branch fitur (git checkout -b feature/AmazingFeature)
  3. Commit perubahan (git commit -m 'Add some AmazingFeature')
  4. Push ke branch (git push origin feature/AmazingFeature)
  5. Buat Pull Request

📝 License

Project ini dibuat untuk tujuan pembelajaran dan pengembangan.

📧 Kontak

Untuk pertanyaan atau saran, silakan buat issue di repository ini.

🙏 Acknowledgments

Dibuat dengan ❤️ menggunakan Next.js