paste-text-hosting

byHub Nexora99

Buatkan saya sebuah website paste text / text hosting yang konsep dan alur penggunaannya mirip seperti Pastefy.com, tetapi gunakan desain dan branding sendiri. Website harus benar-benar berfungsi, bukan hanya tampilan frontend. KONSEP UTAMA Website digunakan untuk menyimpan teks secara online. Alur utama: 1. User membuka halaman utama. 2. User melihat textarea besar untuk memasukkan text. 3. User dapat paste teks apa pun ke dalam textarea. 4. User menekan tombol Create Paste / Upload. 5. Backend menyimpan teks tersebut ke database. 6. Sistem otomatis membuat ID/slug unik. 7. User mendapatkan URL unik, contohnya: https://domain.com/p/AbC123 8. Jika orang membuka URL tersebut, website menampilkan teks yang sebelumnya disimpan. 9. Setiap paste mempunyai halaman Raw. 10. Jika user membuka: https://domain.com/p/AbC123/raw maka website hanya menampilkan isi text dalam format raw/plain text tanpa UI tambahan. --- HALAMAN HOME Buat homepage modern, clean, responsive, dan mobile-friendly. Bagian utama: - Logo / nama website - Navbar - Tombol Home - Tombol Create Paste - Tombol About - Textarea besar - Placeholder: "Paste your text here..." - Tombol: "Create Paste" Tambahkan pilihan opsional: - Paste title - Expiration - Visibility - Syntax language Contoh: Title: [ My Script ] Text: [ textarea besar ] Expiration: [ Never ▼ ] Visibility: [ Public ▼ ] [ Create Paste ] --- SISTEM CREATE PASTE Ketika user menekan Create Paste: 1. Validasi bahwa textarea tidak kosong. 2. Kirim data ke backend menggunakan API. 3. Backend membuat ID unik. 4. Simpan data ke database. 5. Kembalikan URL paste. 6. Tampilkan halaman sukses. Contoh: Paste created successfully! https://domain.com/p/AbC123 Dengan tombol: [ Copy Link ] [ Open Paste ] [ Raw ] --- HALAMAN PASTE URL: /p/:id Contoh: /p/AbC123 Halaman tersebut harus menampilkan: - Judul paste - ID paste - Waktu dibuat - Bahasa/syntax jika tersedia - Isi text - Tombol Copy - Tombol Raw - Tombol Download - Tombol Back Text harus ditampilkan menggunakan font monospace. Jangan mengubah isi text. Jika text berisi: hello world 123 <script> local test() end maka tampilkan persis seperti aslinya. Gunakan escaping yang benar agar isi paste tidak dieksekusi sebagai HTML atau JavaScript. --- # RAW MODE Buat endpoint khusus: /p/:id/raw Contoh: https://domain.com/p/AbC123/raw Endpoint tersebut harus mengembalikan: Content-Type: text/plain dan body-nya hanya isi paste. Jangan tampilkan: - Navbar - HTML UI - Button - Footer - CSS - JSON wrapper Contoh jika paste berisi: print("Hello World") maka endpoint raw harus benar-benar menghasilkan: print("Hello World") bukan: { "text": "print(\"Hello World\")" } --- # DOWNLOAD Tambahkan tombol Download pada halaman paste. Ketika ditekan, browser mengunduh isi paste sebagai file text. Nama file dapat menggunakan: paste-ID.txt atau jika user memilih language tertentu: script.lua script.js script.py script.txt --- # COPY Tambahkan tombol: Copy Ketika ditekan, isi paste langsung disalin ke clipboard. Setelah berhasil: Copied! --- # DATABASE Gunakan database untuk menyimpan paste. Struktur data minimal: Paste: - id - slug - title - content - language - visibility - created_at - expires_at Gunakan ID/slug yang sulit ditebak dan unik. Contoh: /p/a8Kx29 /p/Qm92Ld /p/Zx81Pq Jangan menggunakan ID berurutan seperti: /p/1 /p/2 /p/3 --- # API Buat REST API yang jelas. Contoh: POST /api/pastes Untuk membuat paste. Request: { "title": "My Paste", "content": "Hello World", "language": "text", "visibility": "public", "expiration": null } Response: { "success": true, "id": "AbC123", "url": "/p/AbC123", "raw_url": "/p/AbC123/raw" } --- GET /api/pastes/:id Mengambil informasi paste. GET /api/pastes/:id/raw Mengambil raw content. Response endpoint raw harus berupa: Content-Type: text/plain; charset=utf-8 --- # SECURITY Pastikan website aman. Wajib: - Escape HTML pada content. - Jangan pernah mengeksekusi JavaScript yang disimpan user. - Gunakan parameterized query. - Validasi input. - Tambahkan rate limiting pada pembuatan paste. - Batasi ukuran paste. - Jangan izinkan path traversal. - Gunakan random ID. - Lindungi API dari spam. - Jangan menyimpan password atau data sensitif secara default. - Gunakan HTTPS pada production. Content paste harus dianggap sebagai DATA, bukan kode HTML yang boleh dieksekusi. --- # EXPIRATION Berikan pilihan: Never 10 Minutes 1 Hour 1 Day 7 Days 30 Days Jika expiration sudah lewat: Paste Not Found / Paste Expired Backend harus benar-benar memeriksa expiration, bukan hanya menyembunyikannya dari frontend. --- # VISIBILITY Sediakan: Public Unlisted Public: Paste dapat ditemukan jika sistem pencarian tersedia. Unlisted: Paste tetap dapat dibuka menggunakan URL langsung tetapi tidak muncul dalam daftar/search. --- # DESIGN Gunakan desain modern seperti website developer tools. Style: - Dark mode sebagai default - Background hitam/dark gray - Card modern - Border tipis - Rounded corners - Monospace font untuk text - Syntax highlighting jika language dipilih - Animasi ringan - Responsive untuk HP - Tidak terlalu banyak efek neon - Tampilan profesional - UI tidak terlalu ramai Homepage harus terlihat seperti platform developer modern. --- # PASTE VIEWER Gunakan code viewer yang nyaman untuk membaca text panjang. Fitur: - Line numbers - Horizontal scrolling - Vertical scrolling - Copy - Raw - Download - Fullscreen - Search text Jika menggunakan syntax highlighting, jangan mengubah isi asli paste. --- # RESPONSIVE MOBILE Website harus nyaman digunakan di Android. Textarea harus memenuhi lebar layar. Button jangan terlalu kecil. Navbar harus berubah menjadi mobile menu jika layar kecil. Paste viewer harus bisa horizontal scroll. --- # ERROR HANDLING Jika ID tidak ditemukan: 404 Paste Not Found Jika paste expired: Paste Expired Jika content kosong: Please enter some text. Jika server error: Something went wrong. Please try again. --- # CUSTOM DOMAIN Pastikan sistem dapat digunakan dengan domain sendiri. Contoh: https://paste.example.com Maka URL paste: https://paste.example.com/p/AbC123 Raw: https://paste.example.com/p/AbC123/raw Jangan hardcode domain localhost. Gunakan environment variable untuk base URL. --- # BACKEND Jangan membuat website sebagai frontend-only. Website harus memiliki backend yang benar-benar menyimpan data. Pilih stack yang sederhana dan mudah di-deploy. Contoh stack: Frontend: HTML + CSS + JavaScript Backend: Node.js + Express Database: SQLite untuk versi sederhana Buat struktur folder yang jelas. Contoh: project/ ├── server.js ├── package.json ├── database/ │ └── database.sqlite ├── public/ │ ├── index.html │ ├── style.css │ └── app.js └── README.md Jika menggunakan framework lain, tetap pastikan seluruh sistem dapat dijalankan dengan mudah. --- # IMPORTANT Saya ingin website yang benar-benar berfungsi. Jangan hanya membuat mockup. Jangan menggunakan localStorage sebagai database utama. Jangan membuat link palsu. Ketika user membuat paste, data harus benar-benar tersimpan di backend dan dapat diakses kembali melalui URL. Pastikan: /p/:id dan /p/:id/raw benar-benar bekerja. Berikan seluruh source code lengkap. Berikan: 1. Struktur folder 2. package.json 3. Backend 4. Database setup 5. Frontend 6. CSS 7. JavaScript 8. API 9. Sistem raw 10. Sistem download 11. Sistem copy 12. Sistem expiration 13. Sistem visibility 14. Security dasar 15. Cara menjalankan di localhost 16. Cara deploy ke hosting 17. Cara menghubungkan custom domain Jangan memberikan potongan kode. Berikan kode lengkap yang siap di-copy dan dijalankan.