Skip to content

Latest commit

 

History

History
172 lines (139 loc) · 5.06 KB

README.md

File metadata and controls

172 lines (139 loc) · 5.06 KB

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.