A modern, production-ready template for building full-stack React applications with TanStack Start and AWS Amplify Gen 2.

• AWS Cognito User Pools with email/password
• Amplify UI components for sign-in/sign-up
• Email confirmation and password reset
• Protected routes with automatic redirects
• Session management with JWT tokens

• AWS Amplify Gen 2 GraphQL API & Cognito Auth

• TanStack Start for full-stack React
• TanStack Router for type-safe routing
• TypeScript throughout the entire stack
• Tailwind CSS for styling

Click the "Use this template" button above or:

gh repo create my-awesome-app --template jayarerita/tanstack-start-amplify-template
cd my-awesome-app

npm install

npm run amplify:sandbox

This will:

• Deploy your backend to AWS
• Generate amplify_outputs.json configuration
• Set up Cognito User Pool and AppSync API

npm run dev

Navigate to http://localhost:3000 and start building! 🎉

├── amplify/                    # AWS Amplify backend
│   ├── auth/resource.ts       # Cognito configuration
│   ├── data/resource.ts       # GraphQL schema & DynamoDB
│   └── backend.ts             # Main backend setup
├── src/
│   ├── components/            # React components
│   │   ├── AuthenticatorWrapper.tsx
│   │   └── Login.tsx
│   ├── hooks/                 # Custom React hooks
│   │   └── useAuth.ts
│   ├── lib/                   # Utilities & configuration
│   │   ├── amplify.ts
│   │   ├── data.ts
│   │   └── amplify-ui-theme.ts
│   ├── routes/                # TanStack Router routes
│   │   ├── __root.tsx         # Root layout
│   │   ├── index.tsx          # Home page
│   │   ├── login.tsx          # Authentication
│   │   └── _authed/           # Protected routes
│   └── styles/
│       └── app.css            # Global styles
└── README.md

Customize the authentication experience in src/components/AuthenticatorWrapper.tsx:

<Authenticator
  signUpAttributes={['email']}
  socialProviders={['google', 'facebook']} // Add social providers
  components={{
    Header() {
      return <YourCustomHeader />
    }
  }}
>

Add new data models in amplify/data/resource.ts:

const schema = a.schema({
  Post: a.model({
    title: a.string().required(),
    content: a.string().required(),
    // Add your fields here
  }).authorization((allow) => [
    allow.authenticated()
  ])
})

• Global styles: src/styles/app.css
• Amplify UI theme: src/lib/amplify-ui-theme.ts
• Tailwind configuration: tailwind.config.mjs

# Development
npm run amplify:sandbox

# Production
npm run amplify:deploy

Deploy to any static hosting service:

• AWS Amplify Hosting (recommended)
• Vercel
• Netlify
• AWS S3 + CloudFront

• 📖 Detailed Setup Guide
• 🔐 Authentication Guide
• 🤝 Contributing Guidelines
• 🔒 Security Policy
• 📝 Template Documentation

• TanStack Start Documentation
• AWS Amplify Gen 2 Documentation
• Amplify UI Documentation
• TanStack Router Documentation

We welcome contributions! Please see our Contributing Guidelines for details.

This project is licensed under the MIT License - see the LICENSE file for details.

• 📖 Check the setup guide
• 🐛 Report bugs
• 💡 Request features
• 💬 Start a discussion

If this template helped you, please give it a star! ⭐

Built with ❤️ using TanStack Start and AWS Amplify