Malify

A modern email client built with Next.js 13, TypeScript, Tailwind CSS, and Neon Database. Features a responsive design with email management capabilities including compose, reply, search, folder organization, and real user authentication.

Features

• 🔐 Authentication: Secure user registration and login
• 📧 Email Management: View, read, star, and organize emails
• ✍️ Compose & Reply: Create new emails and reply to existing ones
• 🔍 Search: Search through emails by subject, sender, or content
• 📁 Folders: Organize emails in different folders (Inbox, Starred, Sent, etc.)
• ⭐ Star Emails: Mark important emails with stars
• 📎 Attachments: View and download email attachments (UI ready)
• 📱 Responsive: Works on desktop and mobile devices
• 🎨 Modern UI: Clean and intuitive email interface
• 🗄️ Real Database: Uses Neon PostgreSQL database for data persistence

Tech Stack

• Framework: Next.js 13 with App Router
• Language: TypeScript
• Database: Neon PostgreSQL
• ORM: Drizzle ORM
• Authentication: JWT with secure cookies
• Styling: Tailwind CSS
• Icons: Lucide React
• Date Handling: date-fns

Getting Started

Prerequisites

• Node.js 18+ installed
• A Neon database account (free tier available)

Setup Instructions

1. Clone and install dependencies:

   npm install

2. Set up your Neon database:

   • Follow the detailed guide in DATABASE_SETUP.md
   • Create a .env.local file with your database credentials

3. Generate and push database schema:

   npm run db:generate
   npm run db:push

4. Run the development server:

   npm run dev

5. Open your browser and navigate to http://localhost:3000

6. Create your account and start using Malify!

Project Structure

src/
├── app/
│   ├── api/             # API routes
│   │   ├── auth/        # Authentication endpoints
│   │   ├── emails/      # Email CRUD operations
│   │   └── folders/     # Folder management
│   ├── globals.css      # Global styles
│   ├── layout.tsx       # Root layout with AuthProvider
│   └── page.tsx         # Main page with auth handling
├── components/
│   ├── Header.tsx       # Top navigation with user menu
│   ├── Sidebar.tsx      # Left sidebar with dynamic folders
│   ├── EmailList.tsx    # Email list with loading states
│   ├── EmailDetail.tsx  # Individual email view
│   ├── ComposeModal.tsx # Compose email modal
│   ├── LoginForm.tsx    # User login form
│   ├── RegisterForm.tsx # User registration form
│   └── GmailApp.tsx     # Main app component
├── contexts/
│   └── AuthContext.tsx  # Authentication context
├── db/
│   ├── schema.ts        # Database schema definitions
│   └── index.ts         # Database connection
├── lib/
│   └── auth.ts          # Authentication utilities
└── types/
    └── email.ts         # TypeScript type definitions

Key Components

Header

• Modern header with search functionality
• Menu toggle for sidebar
• User profile section

Sidebar

• Compose button
• Folder navigation (Inbox, Starred, Sent, etc.)
• Labels section

EmailList

• List of emails with sender, subject, and preview
• Star toggle functionality
• Read/unread status indicators
• Attachment indicators

EmailDetail

• Full email view with formatted content
• Reply, Reply All, and Forward actions
• Attachment viewing
• Star toggle

ComposeModal

• Floating compose window
• To, Cc, Bcc fields
• Rich text composition
• Send functionality

Customization

Adding New Folders

Edit src/data/mockEmails.ts to add new folders:

export const folders = [
  { id: 'custom', name: 'Custom Folder', count: 0, icon: 'folder' },
  // ... other folders
];

Styling

The app uses Tailwind CSS with a modern color scheme:

• gmail-red: #ea4335
• gmail-blue: #4285f4
• gmail-green: #34a853
• gmail-yellow: #fbbc04

Database

The application uses a real Neon PostgreSQL database with:

• User authentication and management
• Email storage and retrieval
• Folder organization
• Real-time data persistence

Future Enhancements

• 🔐 Authentication system
• 🌐 Backend API integration
• 📤 Real email sending
• 🏷️ Custom labels management
• 🗂️ Advanced filtering and sorting
• 📋 Bulk actions (select all, delete multiple)
• 🌙 Dark mode support
• 🔔 Real-time notifications

Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run db:generate - Generate database migrations
• npm run db:push - Push schema to database
• npm run db:studio - Open Drizzle Studio (database GUI)

License

Malify is a modern email client that demonstrates best practices in React/Next.js development with real-world functionality.