🚀 Bulk Email Sender - SvelteKit Frontend Migration Project

📋 Project Overview

This is a Bulk Email Sender web application currently built with Hono (backend) and vanilla HTML/CSS/JavaScript (frontend). Your assignment is to migrate the frontend to SvelteKit while maintaining the existing Hono backend functionality.

Current Tech Stack

• Backend: Hono (Bun runtime)
• Frontend: Vanilla HTML/CSS/JS with Bootstrap 5, Quill Editor
• Database: SQLite (via Bun:sqlite)
• Authentication: Argon2 password hashing with session tokens
• Email: Nodemailer with SMTP

Target Tech Stack

• Backend: Hono (keep as-is, migrate to Node.js/Deno with npm/pnpm/yarn)
• Frontend: SvelteKit (modern, enhanced version)
• Database: SQLite (maintain existing schema)
• State Management: TanStack Query (optional)
• Authentication: Same logic, adapted for SvelteKit

🎯 Assignment Objectives

1. Implement SvelteKit Frontend

• ✅ Create a modern, clean UI using SvelteKit
• ✅ Implement all existing features with enhanced UX
• ✅ Add client-side validation and error handling
• ✅ Implement responsive design (mobile-friendly)

2. Remove Old Frontend

• ✅ Delete public/ folder (HTML, CSS, JS files)
• ✅ Remove static file serving routes from backend (except API endpoints)
• ✅ Ensure no dependencies on old frontend code

3. Update Documentation

• ✅ Update README.md with new architecture
• ✅ Document setup instructions for both backend and frontend
• ✅ Add API documentation
• ✅ Include screenshots/demos of new UI

🎨 UI/UX Requirements

Design Principles

• Clean and modern design (avoid cluttered UI)
• Intuitive navigation (clear tabs/sections)
• Responsive layout (mobile, tablet, desktop)
• Accessible (ARIA labels, keyboard navigation)
• Fast and performant (lazy loading, optimistic updates)

💡 Pro Tips

1. Use TypeScript strictly - Helps catch errors early
2. Component first - Build reusable components
3. API client abstraction - Centralize API calls
4. Form validation - Use Zod or similar library
5. Loading states everywhere - Better UX
6. Error boundaries - Graceful error handling
7. Optimistic updates - Instant feedback
8. Debounce searches - Reduce API calls
9. Lazy load routes - Faster initial load
10. Test on mobile - Responsive design matters

📞 Questions?

If you have questions during implementation:

1. Check existing backend code for API behavior
2. Review types.ts for data structures
3. Test API endpoints with Postman/Thunder Client
4. Read SvelteKit docs for routing/forms
5. Use browser DevTools for debugging

Good luck! 🚀 Build something amazing!