---
# System prepended metadata

title: Starknet Dapp Template Tutorial

---

# Starknet Dapp Template Tutorial

## Introduction

The Starknet Dapp Template is an advanced template integrating Next.js 14+, Tailwind CSS 3, TypeScript, DaisyUI, and Starknet-React. It offers developers an outstanding development experience, combining the latest technologies and tools.

This tutorial will guide you through using this template to quickly start your Starknet Dapp.

## Preparation

Before you begin, ensure that Node.js and npm are installed on your system.

## Getting Started

### Using the GitHub Template

You can use this template directly on GitHub:

1. Visit the [Starknet Dapp Template](https://github.com/CerberusChaos/Starknet-Dapp-Template) repository.
2. Click the "Use this template" button to create a new repository.

Alternatively,

### Step 1: Clone the Template

You can also clone the Starknet Dapp Template to your local environment with the following commands:

```
git clone https://github.com/CerberusChaos/Starknet-Dapp-Template.git your-project-name
cd your-project-name
```

### Step 2: Install Dependencies

Install the necessary dependencies for the project:

```
npm install
```

### Step 3: Start the Development Server

Start the local development server:

```
npm run dev
```

Now, you can visit http://localhost:3000 in your browser to view your application.

## Video Tutorial

For more detailed information, you can watch our video tutorial: [How to Use the Starknet Dapp Template](https://www.youtube.com/watch?v=GInBDqX-BXI).

## Features and Benefits

- Powered by the latest [Next.js](https://nextjs.org) for static site generation.
- Flexible UI design with [Tailwind CSS](https://tailwindcss.com) and [DaisyUI](https://daisyui.com).
- Rapid integration of Starknet features with [Starknet-React](https://starknet-react.com).
- Type checking with [TypeScript](https://www.typescriptlang.org).
- Code linting and formatting with ESLint and [Prettier](https://prettier.io).

## Customization and Configuration

You can customize according to your needs:

- `src/styles/global.css`: Your Tailwind CSS custom stylesheet.
- `utils/AppConfig.ts`: Template configuration file.
- `src/pages/index.tsx`: Customize the homepage using the `Base` component.
- More customization options are available in the `src` folder.

## Deployment

One-click preparation for production builds:

```
npm run build
npm run start
```

## Open Source Contributions

We welcome and encourage community contributions to this project. If you encounter any issues or have suggestions, feel free to open an issue.

## Conclusion

Using the Starknet Dapp Template, you can quickly start and develop your Starknet project. We look forward to seeing your project become part of the StarkNet community!