> ## Documentation Index
> Fetch the complete documentation index at: https://codinitdev-mintlify-update-changelog-codinit-dev-90028.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Project Templates

> Quickly start new projects with CodinIT pre-built templates and AI-powered scaffolding

CodinIT makes it easy to start new projects with pre-configured templates and AI-powered scaffolding. Whether you're building a web app, mobile application, or full-stack project, CodinIT provides intelligent starting points that follow best practices.

## Creating a New Project from Template

1. **Launch CodinIT** and click "New Project" or use `Ctrl/Cmd + N`
2. **Select a template** from the available options
3. **Configure your project** settings (name, location, dependencies)
4. **Let AI scaffold** your project structure automatically

<Info>
  CodinIT's AI analyzes your template choice and automatically sets up the optimal file structure, dependencies, and configuration files.
</Info>

## Web Development Templates

<CardGroup cols={2}>
  <Card title="React" icon="https://mintcdn.com/codinitdev/liNhdvOQJu4vOSbz/assets/frameworks/icons/react.svg?fit=max&auto=format&n=liNhdvOQJu4vOSbz&q=85&s=d5f4b707ab9c0d39a1caf7b4e6e305e7" width="28" height="28" data-path="assets/frameworks/icons/react.svg">
    Modern React app with TypeScript, Vite, and best practices
  </Card>

  <Card title="Next.js" icon="https://mintcdn.com/codinitdev/liNhdvOQJu4vOSbz/assets/frameworks/icons/nextjs.svg?fit=max&auto=format&n=liNhdvOQJu4vOSbz&q=85&s=76a767e42e42188a06d55254241fd94f" width="29" height="28" data-path="assets/frameworks/icons/nextjs.svg">
    Full-stack Next.js with App Router, TypeScript, and API routes
  </Card>

  <Card title="Vue.js" icon="https://mintcdn.com/codinitdev/liNhdvOQJu4vOSbz/assets/frameworks/icons/vue.svg?fit=max&auto=format&n=liNhdvOQJu4vOSbz&q=85&s=12b01ecf63d1dac077d59f1de70e44d1" width="28" height="28" data-path="assets/frameworks/icons/vue.svg">
    Vue 3 with Composition API, TypeScript, and Vite
  </Card>

  <Card title="Angular" icon="https://mintcdn.com/codinitdev/liNhdvOQJu4vOSbz/assets/frameworks/icons/angular.svg?fit=max&auto=format&n=liNhdvOQJu4vOSbz&q=85&s=13c2cb22d590f41fcaf06a5e4c9eb12f" width="27" height="28" data-path="assets/frameworks/icons/angular.svg">
    Angular with TypeScript, standalone components, and signals
  </Card>
</CardGroup>

### Backend & API

<CardGroup cols={2}>
  <Card title="TypeScript" icon="https://mintcdn.com/codinitdev/liNhdvOQJu4vOSbz/assets/frameworks/icons/typescript.svg?fit=max&auto=format&n=liNhdvOQJu4vOSbz&q=85&s=cc821fa1c4cb2d61545131c2fab94432" width="29" height="29" data-path="assets/frameworks/icons/typescript.svg">
    Express/Fastify REST API with TypeScript
  </Card>

  <Card title="Vite Project" icon="https://mintcdn.com/codinitdev/liNhdvOQJu4vOSbz/assets/frameworks/icons/vite.svg?fit=max&auto=format&n=liNhdvOQJu4vOSbz&q=85&s=cc66df32e7fb7d6e1130a608af680e92" width="28" height="28" data-path="assets/frameworks/icons/vite.svg">
    Lightning-fast build tool and dev server
  </Card>
</CardGroup>

### Specialized Projects

<CardGroup cols={2}>
  <Card title="Remotion" icon="https://mintcdn.com/codinitdev/liNhdvOQJu4vOSbz/assets/frameworks/icons/remotion.svg?fit=max&auto=format&n=liNhdvOQJu4vOSbz&q=85&s=147f4026b3fb8fb45b3edbbae8ecb63a" width="28" height="28" data-path="assets/frameworks/icons/remotion.svg">
    Programmatic video creation with React
  </Card>

  <Card title="SolidJS" icon="https://mintcdn.com/codinitdev/NU0f94GmbRUSPIZu/assets/frameworks/icons/solidjs.svg?fit=max&auto=format&n=NU0f94GmbRUSPIZu&q=85&s=ac06014845a7c331f051667e5fe8696b" width="166" height="155" data-path="assets/frameworks/icons/solidjs.svg">
    Fine-grained reactive UI framework
  </Card>
</CardGroup>

### Mobile Development

<CardGroup cols={2}>
  <Card title="React-Native" icon="https://mintcdn.com/codinitdev/liNhdvOQJu4vOSbz/assets/frameworks/icons/expo.svg?fit=max&auto=format&n=liNhdvOQJu4vOSbz&q=85&s=dbadcaec33548f1293fcdab419b2513a" width="800" height="800" data-path="assets/frameworks/icons/expo.svg">
    Cross-platform mobile app with Expo
  </Card>

  <Card title="NativeScript" icon="https://mintcdn.com/codinitdev/liNhdvOQJu4vOSbz/assets/frameworks/icons/nativescript.svg?fit=max&auto=format&n=liNhdvOQJu4vOSbz&q=85&s=e67df09e31e6a4be5f50934deb450b06" width="29" height="28" data-path="assets/frameworks/icons/nativescript.svg">
    Native mobile apps with JavaScript/TypeScript
  </Card>
</CardGroup>

### Meta-Frameworks & Tools

<CardGroup cols={2}>
  <Card title="Remix" icon="https://mintcdn.com/codinitdev/liNhdvOQJu4vOSbz/assets/frameworks/icons/remix.svg?fit=max&auto=format&n=liNhdvOQJu4vOSbz&q=85&s=05e55026825c0e8b5a4f0bc3ba41021e" width="28" height="28" data-path="assets/frameworks/icons/remix.svg">
    Full-stack web framework with nested routing
  </Card>

  <Card title="Nuxt.js" icon="https://mintcdn.com/codinitdev/liNhdvOQJu4vOSbz/assets/frameworks/icons/nuxt.svg?fit=max&auto=format&n=liNhdvOQJu4vOSbz&q=85&s=4b60f0b368082badc4775cf97d9f8832" width="28" height="28" data-path="assets/frameworks/icons/nuxt.svg">
    Vue meta-framework with SSR and static generation
  </Card>

  <Card title="Astro" icon="https://mintcdn.com/codinitdev/NU0f94GmbRUSPIZu/assets/frameworks/icons/astro.svg?fit=max&auto=format&n=NU0f94GmbRUSPIZu&q=85&s=9f2044a081c48b4c14b4d80b1854978c" width="28" height="28" data-path="assets/frameworks/icons/astro.svg">
    Content-focused sites with islands architecture
  </Card>

  <Card title="SvelteKit" icon="https://mintcdn.com/codinitdev/liNhdvOQJu4vOSbz/assets/frameworks/icons/svelte.svg?fit=max&auto=format&n=liNhdvOQJu4vOSbz&q=85&s=71a25060e1a9eb22e968f9e7f7b0cb36" width="28" height="28" data-path="assets/frameworks/icons/svelte.svg">
    Fast, lightweight full-stack Svelte framework
  </Card>
</CardGroup>

## AI-Powered Scaffolding

CodinIT's AI can generate entire project structures based on natural language descriptions:

<Steps>
  <Step title="Describe Your Project">
    Tell CodinIT what you want to build in natural language

    ```
    "Create a blog application with user authentication,
    post creation, and commenting system"
    ```
  </Step>

  <Step title="AI Analyzes Requirements">
    CodinIT's AI understands your requirements and suggests:

    * Optimal tech stack
    * Database schema
    * Project structure
    * Required dependencies
  </Step>

  <Step title="Generate & Customize">
    Review the suggested structure and make adjustments before generation
  </Step>

  <Step title="Start Coding">
    Your project is ready with all boilerplate code, configurations, and best practices in place
  </Step>
</Steps>

## Custom Templates

You can save your project structures as custom templates for reuse:

1. **Open Project Settings** in an existing project
2. **Select "Save as Template"**
3. **Configure template metadata**:
   * Template name
   * Description
   * Category
   * Required dependencies
4. **Share with your team** or keep it private

<Tip>
  Custom templates are perfect for maintaining consistency across projects in your organization.
</Tip>

## Template Features

> All CodinIT templates come with:

* **Best Practice Structure**: Industry-standard file organization
* **TypeScript Support**: Type safety out of the box (when applicable)
* **Linting & Formatting**: ESLint, Prettier pre-configured
* **Git Integration**: .gitignore and initial commit ready
* **Environment Configuration**: .env templates and examples
* **Testing Setup**: Jest, Vitest, or framework-specific test runners
* **Build Optimization**: Production-ready build configurations
* **Docker Support**: Dockerfile and docker-compose when relevant

## Popular Starter Configurations

```
MongoDB + Express + React + Node.js
├── client/          # React frontend (Vite + TypeScript)
├── server/          # Express backend (TypeScript)
├── shared/          # Shared types and utilities
├── docker-compose.yml
└── package.json     # Root workspace configuration
```

### Serverless Application

```
AWS Lambda + API Gateway + DynamoDB
├── functions/       # Lambda function handlers
├── lib/            # Shared utilities
├── infrastructure/ # IaC (Terraform/CDK)
├── tests/          # Unit and integration tests
└── serverless.yml  # Serverless Framework config
```

### Monorepo Setup

```
Turborepo or Nx Monorepo
├── apps/
│   ├── web/        # Next.js web app
│   ├── mobile/     # React Native app
│   └── api/        # Backend API
├── packages/
│   ├── ui/         # Shared UI components
│   ├── config/     # Shared configurations
│   └── database/   # Database schema & migrations
└── turbo.json      # Monorepo configuration
```

### Next.js Templates

* **Marketing Site**: SEO-optimized with static generation
* **SaaS Application**: Authentication, payments, dashboard
* **E-commerce**: Product catalog, cart, checkout flow
* **Blog**: MDX blog with sitemap and RSS

### React Templates

* **Admin Dashboard**: Charts, tables, forms, authentication
* **Landing Page**: Marketing page with animations
* **PWA**: Progressive web app with offline support
* **Component Library**: Reusable component showcase

## Best Practices

<AccordionGroup>
  <Accordion title="Choose the Right Template">
    Select templates that match your project's scale and requirements. Don't over-engineer for simple projects or under-provision for complex ones.
  </Accordion>

  <Accordion title="Customize Before Starting">
    Review and adjust the generated structure before writing code. Remove unnecessary features to keep your codebase lean.
  </Accordion>

  <Accordion title="Keep Dependencies Updated">
    Templates include the latest versions at creation time. Check for updates before deploying to production.
  </Accordion>

  <Accordion title="Follow the Established Patterns">
    Templates are structured with best practices. Maintain consistency by following the established patterns.
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="AI Chat & Commands" icon="message-circle" href="/essentials/ai-chat-commands">
    Learn how to use AI to generate and modify code
  </Card>

  <Card title="Customization" icon="sliders" href="/essentials/customization">
    Customize CodinIT to match your workflow
  </Card>

  <Card title="Integrations" icon="plug" href="/integrations/git">
    Connect Git, Supabase, and deployment platforms
  </Card>

  <Card title="Deployment" icon="rocket" href="/integrations/deployments">
    Deploy your project to production
  </Card>
</CardGroup>