https://github.com/instructa/constructa-starter
https://github.com/instructa/constructa-starter
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/instructa/constructa-starter
- Owner: instructa
- License: mit
- Created: 2025-06-10T08:20:51.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-06-11T07:16:23.000Z (8 months ago)
- Last Synced: 2025-06-11T07:40:30.576Z (8 months ago)
- Language: TypeScript
- Size: 487 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🚀 TanStack Starter
A modern React starter with shadcn/ui and Tailwind CSS 4
[](https://typescriptlang.org/)
[](https://reactjs.org/)
[](https://tailwindcss.com/)
## ✨ Features
- **[TanStack Start](https://tanstack.com/start)** - Modern full-stack React framework
- **[shadcn/ui](https://ui.shadcn.com/)** - Beautiful, accessible component library
- **[Tailwind CSS v4](https://tailwindcss.com/)** - Modern utility-first CSS framework
- **[TypeScript](https://typescriptlang.org/)** - Full type safety
- **[TanStack Router](https://tanstack.com/router)** - Type-safe file-based routing
## 🚀 Quick Start
### Prerequisites
- **Node.js** 18+
- **pnpm** (recommended package manager)
### Installation
```bash
# Clone the repository
git clone
cd tanstack-starter-instructa
# Install dependencies
pnpm install
# Start development server
pnpm dev
```
### Available Scripts
```bash
# Development
pnpm dev # Start development server
pnpm build # Build for production
pnpm start # Start production server
# Code Quality
pnpm biome:check # Check code formatting and linting
pnpm biome:fix:unsafe # Fix code issues (unsafe)
```
## 📁 Project Structure
```
src/
├── app/
│ ├── routes/ # File-based routing
│ │ ├── __root.tsx # Root layout
│ │ ├── index.tsx # Home page
│ │ └── api/ # API routes
│ └── styles/ # Global styles
├── components/
│ └── ui/ # shadcn/ui components
└── utils/ # Utility functions
```
## 🎯 Core Technologies
| Technology | Purpose | Documentation |
|------------|---------|---------------|
| **TanStack Start** | Full-stack framework | [Docs](https://tanstack.com/start) |
| **shadcn/ui** | Component library | [Docs](https://ui.shadcn.com/) |
| **Tailwind CSS v4** | Styling framework | [Docs](https://tailwindcss.com/) |
| **TypeScript** | Type safety | [Docs](https://typescriptlang.org/) |
## 🔧 Configuration
### Environment Variables
Create a `.env` file in the root directory based on `.env.example`:
```bash
# Database
DATABASE_URL="postgresql://username:password@localhost:5432/constructa"
# Client-side Base URL (optional - defaults to current origin in production)
VITE_BASE_URL="http://localhost:3000"
# OAuth Providers (optional)
GITHUB_CLIENT_ID="your-github-client-id"
GITHUB_CLIENT_SECRET="your-github-client-secret"
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"
```
- `VITE_BASE_URL` is optional - in production, it will automatically use the current domain
- For local development, it defaults to `http://localhost:3000`
### Adding shadcn/ui Components
```bash
# Add new components
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add input
```
### Tailwind CSS
- Uses Tailwind CSS v4 with modern CSS-first configuration
- Configured in `app.config.ts`
- Global styles in `src/app/styles/`
### TypeScript
- **Path aliases**: `@` resolves to the root `./` directory
- **Route files**: Must use `.tsx` extension
## 🚀 Deployment
### Build for Production
```bash
pnpm build
```
### Start Production Server
```bash
pnpm start
```
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
---
Built with ❤️ using modern React tools