React Netlify App

A modern React + TypeScript application deployed on Netlify with serverless functions, edge middleware, and authentication flows. The project combines a Vite-powered frontend with a Netlify-native backend layer for API routes, sessions, and secure edge handling.

Features

• React 19 + TypeScript frontend with Vite and route-based pages
• Netlify Functions for server-side handlers such as sign-in, sign-out, OAuth callback, and user info
• Netlify Edge Functions for session handling, CSRF protection, JSON responses, and CSP headers
• Authentication flow with Google OAuth and session-backed user access
• Shared schemas and types between frontend, backend, and edge code
• Query caching and error boundaries via React Query and React Error Boundary
• Theme support with a lightweight theme provider and UI components
• Turso/libSQL database support for local development and production deployments

Tech Stack

• Frontend: React, TypeScript, Vite, Wouter, TanStack Query
• UI: Tailwind-inspired component system, shadcn-style primitives, Sonner toasts
• Backend: Netlify Functions, Netlify Edge Functions, Node.js
• Data: Turso and libSQL-compatible database access, with local SQLite fallback
• Tooling: pnpm, TypeScript project references, Vitest, Oxlint, Netlify CLI

Project Structure

• src — React app, pages, hooks, shared UI components, and auth client code
• netlify/functions — serverless API handlers
• netlify/edge-functions — edge middleware and shared helpers
• backend — auth, session, database, and service logic
• shared — cross-target types, schemas, and constants
• tests — database and test helpers

Getting Started

Prerequisites

• Node.js 22+
• pnpm
• Netlify CLI (installed automatically via the project dependencies)

Install dependencies

pnpm install

Configure environment variables

Copy the example environment file and set the required values before starting the app:

cp .env.example .env

Then edit .env and fill in the required variables such as APP_KEY, GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, and GOOGLE_REDIRECT_URI.

Set up Google OAuth (web server)

This app uses Google OAuth for authentication. For a web server setup, follow the official Google documentation:

• Google OAuth documentation for web servers: https://developers.google.com/identity/protocols/oauth2/web-server

1. Create or select a Google Cloud project.
2. Configure the OAuth consent screen and add the authorized redirect URI:

https://<your-site>.netlify.app/api/oauthcallback

3. Create OAuth 2.0 Client ID credentials and copy the client ID and client secret.
4. Add them to your local .env file or Netlify environment variables:

GOOGLE_CLIENT_ID=<your-google-client-id>
GOOGLE_CLIENT_SECRET=<your-google-client-secret>
GOOGLE_REDIRECT_URI=https://<your-site>.netlify.app/api/oauthcallback

Set up the database

pnpm db:migrate

Start the development server

pnpm dev

This runs the app through Netlify Dev with Vite integration.

Build for production

pnpm build

Run type checks

pnpm typecheck

Run tests

pnpm test

Deploy to Netlify

This project is designed to run on Netlify with the existing Vite frontend, Netlify Functions, and Edge Functions setup.

1. Connect the repository

• Create or open a site in Netlify.
• Link the GitHub repository that contains this project.
• Netlify will detect the Vite app automatically.

2. Add environment variables

Set the following environment variables in Netlify Site Settings → Build & deploy → Environment:

HOST=https://<your-site>.netlify.app
DATABASE_URL=libsql://<your-db>.turso.io
TURSO_AUTH_TOKEN=<your-auth-token>
GOOGLE_CLIENT_ID=<your-google-client-id>
GOOGLE_CLIENT_SECRET=<your-google-client-secret>
GOOGLE_REDIRECT_URI=https://<your-site>.netlify.app/api/oauthcallback
APP_KEY=<a-long-random-secret>
ENV=production

3. Deploy

Push to the connected branch and Netlify will build and deploy the app automatically.

4. Post-deploy checks

• Verify the site loads correctly.
• Confirm OAuth callback and sign-in flows work with the production redirect URI.
• Make sure the production database is reachable and the schema is applied.

Production Database Setup (Turso)

This app can use a remote libSQL-compatible database such as Turso in production.

1. Create a database in Turso (dashboard or CLI).
2. Copy the database URL and set it in your production environment:

DATABASE_URL=libsql://<your-db>.turso.io
TURSO_AUTH_TOKEN=<your-auth-token>
ENV=production

3. Apply the schema from init.sql to the new database using the Turso SQL shell or dashboard.
4. Restart your app or redeploy so the new environment variables are picked up.

If you are using the Turso CLI, the typical workflow is:

turso auth login
turso db create <your-db-name>
turso db show <your-db-name> --url

Then set the URL and token in your hosting platform's environment variables.

Development Notes

• The repo uses TypeScript project references for separate browser, backend, and edge targets.
• Local development uses Netlify Dev, so routes and function behavior are closer to production than a standalone Vite app.
• Authentication and session behavior span both edge middleware and serverless handlers, so changes there should be tested carefully.

Environment and Configuration

• netlify.toml defines redirects, edge function mappings, and headers.
• tsconfig.json and the referenced configs control the build targets for frontend, backend, and edge runtime.
• init.sql seeds the local SQLite database used by development and tests.

Contributing

1. Create a focused change.
2. Run type checks and relevant tests before submitting.
3. Keep edits consistent with the existing folder structure and runtime targets.

License

This project is licensed under the MIT License. See LICENSE for the full text.