Skip to content

Syntic-Ai/react-boilerplate

Repository files navigation

Syntic AI Boilerplate

AI-first app deployment boilerplate for building, extending, and shipping modern React applications with full developer control and AI assistance.

React TypeScript Vite shadcn/ui Tailwind CSS

One-Click Setup

Edit with Bolt Edit with Replit


What is this?

Syntic AI Boilerplate is a production-ready React starter designed for AI-powered app generation, deployment, and iteration.

It provides a clean, modern codebase that mirrors how AI-native platforms structure applications, while giving developers full ownership, extensibility, and transparency.

This boilerplate is ideal for:

  • AI-assisted app builders
  • Internal developer platforms
  • Rapid MVPs that scale into production systems
  • Teams that want AI speed without no-code limitations

💡 Built with Syntic AI?
This boilerplate is the foundation used by Syntic to deploy, extend, and productionize AI-generated applications.


Tech Stack

Technology Purpose Version
React UI Library 19.2.0
TypeScript Type Safety 5.9.3
Vite Build Tool 7.1.12
shadcn/ui Component Library Latest
Tailwind CSS Styling 3.4.18
React Router Navigation 7.9.5
TanStack Query Data Fetching 5.90.6
React Hook Form Form Handling 7.66.0
Zod Schema Validation 4.1.12
Supabase Backend & Database 2.80.0

Features

  • Fast iteration with Vite and React 19
  • 🎨 40+ pre-built UI components via shadcn/ui
  • 🎯 Strict type safety with modern TypeScript
  • 🗄️ Backend-ready with Supabase integration
  • 📱 Responsive by default using Tailwind CSS
  • 🔄 Efficient data fetching with TanStack Query
  • 📋 Form validation using React Hook Form + Zod
  • 🤖 AI-ready architecture with structured coding instructions

Getting Started

Prerequisites

  • Node.js 18+ or Bun
  • Git

Installation

git clone https://github.com/your-org/syntic-ai-boilerplate.git
cd syntic-ai-boilerplate

npm install
# or
bun install

cp .env.example .env

npm run dev
# or
bun dev

App runs at:

http://localhost:8080

Supabase Integration

Syntic AI Boilerplate includes Supabase pre-configured for:

    Authentication

    Database access

    Realtime subscriptions

    Row-level security

Environment Variables

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_PUBLISHABLE_KEY=your-anon-key

Example Usage

import { supabase } from "@/integrations/supabase/client";

const { data, error } = await supabase
  .from("posts")
  .select("*")
  .eq("published", true);

AI Coding Assistant Instructions

This project is designed to work seamlessly with AI coding assistants (Syntic AI, Copilot, Cursor, etc.).

All system-level guidance lives in:

.github/instructions/global.instructions.md

These instructions define:

    Design standards

    Architecture patterns

    Component usage rules

    Styling and layout systems

    Feature development workflows

AI tools can reference this file to generate consistent, production-quality code.
Project Structure

syntic-ai-boilerplate/
├── .github/
│   └── instructions/
│       └── global.instructions.md
├── src/
│   ├── components/
│   ├── hooks/
│   ├── integrations/
│   │   └── supabase/
│   ├── lib/
│   ├── pages/
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
├── supabase/
├── public/
├── .env.example
├── package.json
├── vite.config.ts
├── tailwind.config.ts
├── tsconfig.json

What Makes This Special?

    AI-first architecture designed for generation and iteration

    Developer-owned codebase with no black boxes

    Production-ready defaults

    Scales from MVP to enterprise

    Clean separation between AI logic and app logic

    Modern React best practices

License

MIT License
Free to use in commercial and private projects.
Acknowledgments

    Modern AI-native development platforms

    shadcn/ui for UI excellence

    Tailwind Labs

    Vercel and the React ecosystem

Happy building with Syntic AI 🚀

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages