https://github.com/jayrichh/next-temploot

A streamlined template for rapid web app development, preconfigured with TypeScript, Three.js, and Tailwind CSS.
https://github.com/jayrichh/next-temploot

chadcn framer-motion nextjs react threejs typescript

Last synced: about 1 month ago
JSON representation

A streamlined template for rapid web app development, preconfigured with TypeScript, Three.js, and Tailwind CSS.

• Host: GitHub
• URL: https://github.com/jayrichh/next-temploot
• Owner: JayRichh
• Created: 2024-11-18T15:34:31.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2024-11-21T10:01:17.000Z (about 1 month ago)
• Last Synced: 2024-11-21T11:18:00.399Z (about 1 month ago)
• Topics: chadcn, framer-motion, nextjs, react, threejs, typescript
• Language: TypeScript
• Homepage: https://next-temploot.vercel.app/
• Size: 418 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Next.js Three.js Tailwind Template

A modern, full-featured template for rapidly building web applications. Pre-configured with TypeScript, Three.js, Tailwind CSS, and more to eliminate boilerplate setup and get coding faster.

![image](https://github.com/user-attachments/assets/44ed6c39-7c06-429f-a7d5-30ff9ae525e9)

## Core Technologies

- Next.js 15.0.3 (App Router)

- TypeScript 5

- Three.js 0.170.0 + React Three Fiber 8

- Tailwind CSS 3.4.1

- Framer Motion 11

![image](https://github.com/user-attachments/assets/4e86010d-f88a-4e43-a388-ec54746f8fd0)

## Setup

```bash

git clone https://github.com/JayRichh/next-template

cd next-template

npm install

npm run dev

```

## Project Structure

```

src/

├── app/                    # Next.js app directory

│   ├── examples/          # Example implementations

│   │   ├── 3d/           # Three.js examples

│   │   ├── ui/           # UI component examples

│   │   └── theme/        # Theme examples

│   ├── three/            # Three.js setup

│   └── api/              # API routes

├── components/

│   └── ui/               # Reusable UI components

├── hooks/                # Custom React hooks

├── services/             # API services

├── types/                # TypeScript definitions

└── utils/               # Utility functions

```

![image](https://github.com/user-attachments/assets/3acd0a7e-3415-4b07-a16d-e8522874879a)

## Features

### UI Components

- Form elements with validation (react-hook-form + zod)

- Data display (Badge, Card, Tooltip)

- Layout (Accordion, Modal, Tabs)

- Feedback (Progress, Spinner, Toast)

- Effects (Gradient backgrounds, animations)

### Three.js Integration

- Scene management with React Three Fiber

- Physics integration (Rapier3D)

- Material showcases

- Interactive examples

- Morph animations

### Development Tools

- TypeScript configuration

- ESLint with strict rules

- Prettier with import sorting

- Hot module replacement

- Monaco code editor integration

![image](https://github.com/user-attachments/assets/eb1375a2-0654-4c88-bcfd-2460cdb01e56)

## Configuration

### Next.js

- Configured for Three.js integration

- App Router setup

- API routes enabled

- Strict mode enabled

- Webpack optimizations for canvas

### Tailwind CSS

- Custom color schemes with HSL variables

- Dark mode support

- Geist font integration

- Custom animations

- Gradient utilities

- Container queries

### TypeScript

- Strict type checking

- Path aliases configured

- Type definitions for Three.js

- Custom type utilities

## Available Scripts

```bash

npm run dev          # Development server

npm run build        # Production build

npm run start        # Production server

npm run lint         # ESLint

npm run format       # Prettier formatting

```

## License

MIT