• Stars
    star
    505
  • Rank 85,441 (Top 2 %)
  • Language
    TypeScript
  • Created 8 months ago
  • Updated 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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.

CleanShot 2023-11-04 at 21 09 49@2x

Tech

Known Issues

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

Setup

In order to run this project locally, you'll need to create a Postgres database and add the connection string to your .env.local file.

Further, you'll need to create the tables and insert some sample data.

Follow these steps to get started:

  1. Create a Postgres database
  2. Navigate to the .env.local tab in the quickstart section Postgres dashboard
  3. Copy the snippet and paste it into your .env.local file
  4. Run pnpm run setup to create the tables and insert sample data

This example uses postgres, which makes it compatible with any Postgres database. You can use DATABASE_URL or POSTGRES_URL to connect to your database.

POSTGRES_URL="postgres://user:password@host:port/database"

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', '[email protected]'),
       ('Jane', 'Doe', '[email protected]'),
       ('Alice', 'Smith', '[email protected]'),
       ('Bob', 'Johnson', '[email protected]');

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)

More Repositories

1

leerob.io

✨ My portfolio built with Next.js, Tailwind, and Vercel.
MDX
6,871
star
2

fastfeedback

Easily add user reviews, feedback, and comments to your website in one line of code.
JavaScript
592
star
3

mastering-nextjs

A free video course for building static and server-side rendered applications with Next.js and React.
JavaScript
560
star
4

youtube-to-mp3

⚡️Electron application to convert and download YouTube videos as MP3s
JavaScript
524
star
5

nextjs-aws-s3

Example Next.js app to upload photos to an S3 bucket.
359
star
6

react2025

⚛️ Build applications from the the future, today.
TypeScript
339
star
7

nextjs-vercel-firebase

Next.js App Router + Firebase
TypeScript
262
star
8

space-invaders

👾Python clone with a modern twist
Python
244
star
9

daydrink

Find the best drink deals and happy hours in your area.
JavaScript
220
star
10

nextjs-aws-dynamodb

Example Next.js app for CRUD actions in DynamoDB.
207
star
11

image-gallery-supabase-tailwind-nextjs

Tutorial for building an image gallery with Supabase (Postgres), Tailwind CSS, Next.js, and Vercel.
TypeScript
200
star
12

nextjs-multiple-domains

Example using SSR to handle multiple domains on the same project.
JavaScript
140
star
13

next-prisma

🚀 Static site with Next.js 9.4 and Prisma.
JavaScript
124
star
14

nextjs-prism-markdown

Example using Prism / Markdown with Next.js including switching syntax highlighting themes.
JavaScript
100
star
15

nextjs-gcp-storage

Example Next.js app to upload photos to a GCP storage bucket.
JavaScript
94
star
16

linktree

TypeScript
87
star
17

Guesstimator

🍻Uses Google, Yelp, and Foursquare APIs to retrieve and rank bars
Python
86
star
18

nextjs-netflix

Live stream where I built netflix.com using Next.js, Tailwind, and Next Auth.
JavaScript
83
star
19

facebook-data-analyzer

📊Python script to analyze the contents of your Facebook data export
Python
80
star
20

ncaam

Simple basketball scores and schedules.
TypeScript
76
star
21

hono-vercel-edge-functions

Vercel Edge Functions + Hono Router + Wasm + Rust
TypeScript
64
star
22

cern-next

30th anniversary of the web, but if it was Next.js + Tailwind.
JavaScript
55
star
23

esm

Learn how to use ES Modules with Next.js, including using URL imports to fetch packages from JavaScript CDNs.
JavaScript
54
star
24

notion-api-nextjs

Example of using the Notion API with Next.js.
JavaScript
51
star
25

next-static-export-example

TypeScript
49
star
26

dsmtech

🚀 The best tech companies and startups in the Greater Des Moines area.
TypeScript
40
star
27

next-prisma-starter

Starter project for Next.js + Prisma tutorial.
JavaScript
26
star
28

i18n-example

TypeScript
26
star
29

dart-react-todo

📝Building a todo list with Dart & React from start to finish
Dart
23
star
30

sveltekit-graphql

Example SvelteKit application on Vercel using the SpaceX GraphQL API.
Svelte
23
star
31

gatsby-to-nextjs

A starter blog converting Gatsby -> Next.
JavaScript
22
star
32

next-mapbox-demo

🌎 Creating a non-SSR map component inside a Next.js project.
JavaScript
21
star
33

nextjs-metamorphosis

React Summit 2023
TypeScript
20
star
34

hasura-nextjs-ssr

Next.js application using getServerSideProps with Hasura.
JavaScript
15
star
35

myspace

A nostalgic look at what my MySpace profile (probably) looked like in 2009.
JavaScript
14
star
36

mastering-nextjs-old-site

Previous site containing example MDX blog from the course.
JavaScript
11
star
37

devrel-team

JavaScript
9
star
38

sveltekit-live-stream

Building a basic application with SvelteKit.
Svelte
6
star
39

dart-create-react-app

🛠Easily create React apps with Dart!
Dart
4
star
40

TabSaver

iOS Application written using Swift
Objective-C
2
star