FeaturesTemplatesShowcaseTownie
AI
BlogDocsPricing
Log inSign up
tmcw
tmcwreactRouter7Example
Remix of stevekrouse/reactRouter7Example
Public
Like
reactRouter7Example
Home
Code
6
backend
2
frontend
3
routes
10
shared
2
README.md
TODO.md
Branches
1
Pull requests
Remixes
History
Environment variables
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in miliseconds.
Sign up now
Code
/
Code
/
Search
index.ts
https://tmcw--cd9aa32160bf40d6b55563e36ebc3a12.web.val.run
README.md

Community Message Board

A simple community message board application built with React Router 7, demonstrating a full-stack approach with server-side rendering and client-side navigation.

Features

  • Server-Side Rendering: All pages are server-rendered when accessed directly
  • Client-Side Navigation: After initial load, navigation happens client-side
  • Topic Management: Create and view discussion topics
  • Messaging System: Post messages in topics
  • Direct Message Links: Link directly to specific messages via timestamps
  • Search Functionality: Search topics and messages with URL parameters
  • Loading Indicators: Visual feedback during async operations

Project Structure

├── backend/
│   ├── database/
│   │   ├── migrations.ts    # Database schema
│   │   └── queries.ts       # Database queries
│   └── index.ts             # Server entry point
├── frontend/
│   ├── components/
│   │   ├── LoadingSpinner.tsx
│   │   ├── MessageForm.tsx
│   │   ├── MessageList.tsx
│   │   └── SearchForm.tsx
│   ├── index.html           # HTML template
│   └── index.tsx            # Client entry point
├── routes/
│   ├── App.tsx              # Main application component
│   ├── Home.tsx             # Home page component
│   ├── Home.loader.ts       # Home page data loader
│   ├── Topic.tsx            # Topic detail component
│   ├── Topic.loader.ts      # Topic data loader
│   ├── Topic.action.ts      # Topic message creation action
│   ├── TopicMessage.loader.ts # Direct message link loader
│   ├── Topics.action.ts     # Topic creation action
│   ├── Search.tsx           # Search results component
│   └── Search.loader.ts     # Search data loader
└── shared/
    ├── routes.ts            # Route definitions
    └── types.ts             # Shared TypeScript types

How It Works

Server-Side Rendering

The application uses React Router 7's createStaticHandler, createStaticRouter, and StaticRouterProvider to render pages on the server. When a user directly accesses a URL:

  1. The server receives the request
  2. It runs the appropriate loaders/actions for the matched route
  3. The page is rendered with the data and sent to the client
  4. The client hydrates the page with createBrowserRouter and RouterProvider

Client-Side Navigation

After the initial page load, navigation happens entirely on the client:

  1. React Router handles link clicks and form submissions
  2. Data is fetched asynchronously using loaders and actions
  3. A loading spinner is displayed during data fetching
  4. The UI updates without a full page reload

Data Flow

  1. Topics: Stored in SQLite with title and creation timestamp
  2. Messages: Linked to topics with content and creation timestamp
  3. Search: Queries both topics and messages, with results in the URL

URL Structure

  • / - Home page with list of topics
  • / - Create new topic
  • /topics/:topicId - View a topic and its messages
  • /topics/:topicId/messages/:messageId - Direct link to a message
  • /search?q=query - Search results

Getting Started

  1. Clone the repository
  2. Run the application with deno run -A backend/index.ts
  3. Visit http://localhost:3000 in your browser

Implementation Details

This application demonstrates a "Val Town fullstack framework" approach, combining:

  • Hono: For server-side routing and handling
  • React Router 7: For both server and client-side routing
  • SQLite: For data persistence
  • TypeScript: For type safety across the stack

The code is structured to be idiomatic and simple, serving as a reference for building full-stack applications with React Router 7. The project uses a Remix-style file naming convention with co-located components, loaders, and actions in the /routes directory.

HTTP
  • index.ts
    tmcw--cd…12.web.val.run
Code
backendfrontendroutessharedREADME.mdTODO.md
Go to top
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Product
FeaturesPricing
Developers
DocsStatusAPI ExamplesNPM Package Examples
Explore
ShowcaseTemplatesNewest ValsTrending ValsNewsletter
Company
AboutBlogCareersBrandhi@val.town
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.