slabmail

Features

• Fetch emails from Gmail
• Display emails in a list
• Display labels in a sidebar
• Display email content
• Star/unstar emails
• Backend tracing with zipkin
• Frontend tracing with zipkin
• Search emails
• Filter emails

Note

This depends on a Google Cloud project with the Gmail API enabled and the necessary credentials.

Usage

With run

This project uses run to manage the dev environment. The tasks.toml file contains tasks for running the dev environment.

run dev

Without run

Run zipkin to enable tracing.

docker compose up -d zipkin

Run the server

cd server
npm install
npx ts-node src/server.ts

Run the client

cd client
npm install
npm start

Access the app at http://localhost:3001

Project Structure

/server

The backend is a simple Node.js server that uses the Gmail API to fetch emails.

Directory Structure

/server
├── /src
│   ├── /routes       # api routes
│   ├── /services     # api services
│   ├── auth.ts       # gmail api auth
│   ├── server.ts     # server entry point
│   ├── otel.ts       # opentelemetry setup
├── tasks.toml        # run tasks

/client

The frontend is a React app that displays a list of emails fetched from the server.

Directory Structure

/client
├── /public # static files
├── /src
│   ├── /components  # dumb presentational components
│   ├── /contexts    # contexts for state management
│   ├── /hooks       # custom hooks
│   ├── /pages       # pages/routes
│   ├── /services    # api clients
│   ├── /styles      # global styles
│   ├── /types       # typescript types
│   ├── /utils       # misc utilities
│   ├── otel.ts      # opentelemetry setup
│   └── App.tsx      # main app component
└── package.json

/docker-compose.yml

A docker compose file for running supporting services (zipkin).

Observability

Backend

Uses OpenTelemetry for tracing. The server/src/otel.ts file contains the setup for the tracer. The data is sent to a zipkin instance running on localhost:9411.