nhost/docs/getting-started/tutorials/react/1-introduction.mdx

---
title: Create Your Nhost Project
description: Learn how to create and set up a new Nhost project to get started building your React application
sidebarTitle: Create Project
icon: plus
---

Welcome to the **Full-Stack React Development with Nhost** series! In this comprehensive tutorial series, you'll build a complete React application with Nhost that demonstrates authentication, database operations, and file management.

## About This Tutorial Series

This tutorial series is divided into **5 parts**, each focusing on a specific aspect of building modern web applications with Nhost and React. By the end of the series, you'll have built a fully functional application featuring:

- **User Authentication** - Complete sign up, sign in, and email verification flow
- **Todo Management** - Users can create, update, delete, and mark todos as complete
- **File Uploads** - Users can upload and manage files with proper permissions
- **Protected Routes** - Secure areas that only authenticated users can access

<Info>
This is **Part 1** in the Full-Stack React Development with Nhost series. This part sets up the foundation by creating your Nhost project and understanding the series structure.
</Info>

## Full-Stack React Development with Nhost

<CardGroup cols={3}>
<Card title="1. Create Project" icon="plus" href="/getting-started/tutorials/react/1-introduction">
**Current** - Set up your Nhost project
</Card>

<Card title="2. Protected Routes" icon="lock" href="/getting-started/tutorials/react/2-protected-routes">
Route protection basics
</Card>

<Card title="3. User Authentication" icon="user" href="/getting-started/tutorials/react/3-user-authentication">
Complete auth flow
</Card>

<Card title="4. GraphQL Operations" icon="list-check" href="/getting-started/tutorials/react/4-graphql-operations">
CRUD operations with GraphQL
</Card>

<Card title="5. File Uploads" icon="upload" href="/getting-started/tutorials/react/5-file-uploads">
File upload and management
</Card>
</CardGroup>

## What You'll Learn

Throughout this series, you'll master:

- Setting up and configuring Nhost projects
- Implementing secure authentication flows
- Building protected routes with React Router
- Performing GraphQL queries and mutations
- Managing file uploads and storage
- Configuring database permissions and security
- Building responsive React interfaces

## Prerequisites

- Node.js 20+ installed on your machine
- Basic knowledge of React and JavaScript
- Understanding of modern web development concepts

Creating an Nhost project is the first step to building your application with Nhost. Let's get started by setting up your backend infrastructure.

## Step-by-Step Guide

<Steps>
<Step>

### Sign Up or Log in

If you don't have an Nhost account, sign up at [Nhost](https://app.nhost.io/). If you already have an account, log in.

![sign up/sign in](/images/tutorials/create-nhost-project/1.png)

</Step>

<Step>

### Create a New Project

Click on the "Create Project" button on your dashboard or follow the onboarding prompts if you're a new user.

![2](/images/tutorials/create-nhost-project/2.png)

</Step>

<Step>

### Take note of your project subdomain and region

Take note of your project subdomain and region. You will need this information to connect your application to the Nhost backend in upcoming tutorials.

![3](/images/tutorials/create-nhost-project/3.png)

</Step>

</Steps>

## What's Next?

With your Nhost project created, you now have access to:

- [**PostgreSQL Database**](/products/database/overview) - For storing your application data
- [**Authentication Service**](/products/auth/overview) - For managing users and sessions
- [**GraphQL API**](/products/graphql/overview) - For querying and mutating data
- [**File Storage**](/products/storage/overview) - For uploading and managing files
- [**Functions**](/products/functions/overview) - For running serverless functions

In the [next tutorial](/getting-started/tutorials/react/2-protected-routes), you'll start building your React application and learn how to protect routes based on user authentication status.

<Tip>
Keep your project subdomain and region handy - you'll need them throughout the series to connect your React application to the Nhost backend.
</Tip>