TEDI Stack is an open-source, learn-in-public project that combines modern web technologies to create a powerful full-stack development environment. Built on the foundation of React Router v7 framework with Bun runtime and Hono server, this stack is designed to enable fast, efficient, and type-safe web application development.
β οΈ Experimental Notice: This project should be considered experimental as the combination of React Router v7 framework with Bun runtime and Hono server is not yet fully supported in all areas. Feel free to contribute, suggest improvements, or provide feedback!
This stack draws inspiration from several excellent projects:
-
Epic Stack by Kent C. Dodds - The primary inspiration for TEDI Stack. Initially, I tried to create an example of the Epic Stack with Hono and Bun runtime but ran into several challenges, which led to the creation of TEDI Stack.
-
Base Stack by Alem Tulzak - A great source of inspiration, particularly for the Hono server configuration and i18next integration.
Technology | Description | Link |
---|---|---|
Full-featured framework for building web applications | reactrouter.com | |
JavaScript runtime, bundler, test runner, and package manager | bun.sh | |
Fast, lightweight web framework | hono.dev | |
Utility-first CSS framework | tailwindcss.com | |
Typed JavaScript | typescriptlang.org | |
TypeScript-first schema validation | zod.dev | |
Formatter, linter, and more | biomejs.dev | |
Internationalization framework | i18next.com | |
App deployment platform | fly.io | |
Secure environment variable management | 1password.com | |
Containerization platform | docker.com | |
Version control platform | github.com | |
Error tracking | sentry.io | |
Product analytics platform | posthog.com |
- React Router v7 - Full-featured framework capabilities with SSR
- Bun Runtime - Fast JavaScript runtime with built-in bundler
- Hono Server - Lightweight and efficient server for handling requests
- TypeScript - Type-safe code development
- Tailwind CSS - Utility-first styling approach
- i18next - Internationalization support
- 1Password Integration - Secure environment variable management
- Biome - Modern formatter and linter
- GitHub Actions - CI/CD workflows for automated deployments
- Fly.io Deployment - Easy cloud deployment
TEDI Stack comes with Sentry integration for error tracking and performance monitoring. To enable Sentry:
- Create a Sentry account and project at sentry.io
- Add the following environment variables to your
.env
file:
# SENTRY
SENTRY_DSN="your-sentry-dsn"
SENTRY_AUTH_TOKEN="your-sentry-auth-token"
SENTRY_ORG="your-sentry-organization"
SENTRY_PROJECT="your-sentry-project-name"
Sentry will automatically capture errors and exceptions in both server and client environments when these environment variables are present.
TEDI Stack includes PostHog for product analytics and user behavior tracking. To enable PostHog:
- Create a PostHog account and project at posthog.com
- Add the following environment variables to your
.env
file:
# POSTHOG
POSTHOG_API_KEY="your-posthog-api-key"
POSTHOG_API_ENDPOINT="your-posthog-api-endpoint" # Usually https://app.posthog.com or your self-hosted URL
The integration includes automatic page view tracking and supports identifying users for cohort analysis.
- Bun installed
- Optional: 1Password CLI for secure environment variable management
- Optional: Docker for containerization
TEDI Stack uses 1Password CLI to securely manage environment variables. To set up:
-
Install the 1Password CLI following the official installation guide
-
Sign in to your 1Password account:
op account add
-
Create an
.env.op
file at the root of your project with references to your secrets:SENTRY_DSN=op://YourVault/SENTRY/SENTRY_DSN SENTRY_AUTH_TOKEN=op://YourVault/SENTRY/SENTRY_AUTH_TOKEN # other environment variables...
-
Use the development script that loads variables from 1Password:
bun dev:op
# Clone the repository
git clone https://github.com/koikar/tedi-stack.git
cd tedi-stack
# Install dependencies
bun install
# Start the development server
bun dev
To deploy to Fly.io:
- Install the Flyctl CLI: Installation Guide
- Log in to Fly:
fly auth login
- Deploy the app:
fly deploy
For CI/CD deployment using GitHub Actions, see the workflows defined in .github/workflows/
.
TEDI Stack follows a logical directory structure to organize code efficiently:
tedi-stack/
βββ app/ # Main application code
β βββ components/ # Reusable React components
β βββ routes/ # General routes, layouts and resource routes
β βββ utils/ # Utility functions and helpers
β βββ localization/ # Internationalization files
β βββ features/ # Feature modules
β βββ marketing/ # Marketing feature
β βββ analytics/ # Analytics feature
β βββ authentication/# Authentication feature
β βββ user/ # User management feature
β βββ components/# Feature-specific components
β βββ routes/ # Feature-specific routes
β βββ utils/ # Feature-specific utilities
β βββ constants/ # Feature-specific constants
β βββ types/ # Feature-specific types
β βββ server/ # Feature-specific server code
βββ public/ # Static files served directly
β βββ favicons/ # Various favicon formats for different devices
βββ other/ # Miscellaneous files and configurations
βββ server/ # Hono server configuration
βββ tests/ # Test files for the application
Each feature module in app/features/
follows a similar structure, promoting code organization and modularity.
Contributions to TEDI Stack are welcome! Here's how you can contribute:
- Fork the Repository: Create your own fork of the project
- Submit a Pull Request: Once you've tested your changes, submit a PR to the main repository
-
Environment Variable Problems: Ensure all required environment variables are properly set or configured in 1Password.
-
Build Failures: Make sure you're using the correct version of Bun. Check with
bun --version
and update if needed. -
1Password Integration Issues: Verify that the 1Password CLI is correctly installed and authenticated. Run
op account list
to confirm. -
Deployment Errors: When deploying to Fly.io, check that your
fly.toml
configuration is correct and you have the necessary permissions.
For more help, please open an issue on GitHub.