An email client built with the Next.js App Router and Postgres as the database

Next.js Email Client

This is a simple email client built with Next.js and Postgres. It’s built to show off some of the features of the App Router, which enable you to build products that:

• Navigate between routes in a column layout while maintaining scroll position (layouts support)
• Submit forms without JavaScript enabled (progressive enhancement)
• Navigate between routes extremely fast (prefetching and caching)
• Retain your UI position on reload (URL state)

The first version of the UI was built with v0.

Tech

• Next.js
• Vercel Postgres
• Tailwind CSS
• TypeScript
• React Aria Components

Known Issues

• Forward / reply / search aren’t hooked up yet
• Need to add a way to manage folders
• Need to add a way to manage users
• Fix to/from to pull sender/recipient everywhere
• Error handling for form submissions

Schema

CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    first_name VARCHAR(50),
    last_name VARCHAR(50),
    email VARCHAR(255) UNIQUE NOT NULL
);

CREATE TABLE emails (
    id SERIAL PRIMARY KEY,
    sender_id INTEGER REFERENCES users(id),
    recipient_id INTEGER REFERENCES users(id),
    subject VARCHAR(255),
    body TEXT,
    sent_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE folders (
    id SERIAL PRIMARY KEY,
    name VARCHAR(50) NOT NULL
);

CREATE TABLE user_folders (
    id SERIAL PRIMARY KEY,
    user_id INTEGER REFERENCES users(id),
    folder_id INTEGER REFERENCES folders(id)
);

CREATE TABLE email_folders (
    id SERIAL PRIMARY KEY,
    email_id INTEGER REFERENCES emails(id),
    folder_id INTEGER REFERENCES folders(id)
);

Sample Data

INSERT INTO users (first_name, last_name, email)
VALUES ('John', 'Doe', '[e-mail]'),
       ('Jane', 'Doe', '[e-mail]'),
       ('Alice', 'Smith', '[e-mail]'),
       ('Bob', 'Johnson', '[e-mail]');

INSERT INTO emails (sender_id, recipient_id, subject, body, sent_date)
VALUES (1, 2, 'Meeting Reminder', 'Don''t forget about our meeting tomorrow at 10am.', '2022-01-10 09:00:00'),
       (1, 3, 'Hello', 'Just wanted to say hello.', '2022-01-09 08:00:00'),
       (2, 1, 'Re: Meeting Reminder', 'I won''t be able to make it.', '2022-01-10 10:00:00'),
       (3, 1, 'Re: Hello', 'Hello to you too!', '2022-01-09 09:00:00'),
       (4, 1, 'Invitation', 'You are invited to my party.', '2022-01-11 07:00:00'),
       (1, 2, 'Work Project', 'Let''s discuss the new work project.', '2022-01-12 07:00:00'),
       (1, 4, 'Expenses Report', 'Please find the expenses report attached.', '2022-01-13 07:00:00'),
       (4, 1, 'Personal Note', 'Let''s catch up sometime.', '2022-01-14 07:00:00');

INSERT INTO folders (name)
VALUES ('Inbox'),
       ('Flagged'),
       ('Sent'),
       ('Work'),
       ('Expenses'),
       ('Personal');

INSERT INTO user_folders (user_id, folder_id)
VALUES (1, 1), (1, 2), (1, 3), (1, 4), (1, 5), (1, 6),
       (2, 1), (2, 2), (2, 3), (2, 4), (2, 5), (2, 6),
       (3, 1), (3, 2), (3, 3), (3, 4), (3, 5), (3, 6),
       (4, 1), (4, 2), (4, 3), (4, 4), (4, 5), (4, 6);

INSERT INTO email_folders (email_id, folder_id)
VALUES (1, 1),
       (2, 1),
       (3, 3),
       (4, 1),
       (5, 1),
       (6, 4),
       (7, 5),
       (8, 6);

Database Relationships

• Users can send and receive emails (users.id -> emails.sender_id and emails.recipient_id)
• Users can have multiple folders (users.id -> user_folders.user_id)
• Folders can contain multiple emails (folders.id -> email_folders.folder_id)
• An email can be in multiple folders (emails.id -> email_folders.email_id)

GitHub

View Github