Menu

Launching the Source Code Repository Locally

This chapter will guide you through the local configuration and launch process of the source code repository.

Tool Preparation

Before you begin, you need to prepare the following tools:

For those new to VSCode or Cursor, here are some editor extensions I recommend installing to help streamline your development workflow: Cursor Extension Recommendations

Launch Project

Step 1: Fork the Source Code

Open Nexty.dev source code repository, click the Fork button in the top right corner to fork the source code repository to your GitHub account.

fork
fork

Step 2: Clone the Source Code

Open your GitHub account, find the source code repository you just forked, click the Code button, and copy the repository URL.

clone

Open your terminal and use the git clone command to clone the source code repository.

git clone https://github.com/your-github-username/your-fork-repo-name.git

After cloning is complete, open the source code repository with Cursor or VSCode, and enter the source code repository directory in the command line.

cd your-fork-repo-name

Step 3: Install Dependencies

Install dependencies using pnpm:

pnpm install

Step 4: Configure Environment Variables

Create a .env.local file in the root directory and fill in the environment variables.

cp .env.example .env.local

Environment variable details can be found in Environment Variables.

Good to know:

  • .env.local is only used for local development environment; production environment requires using the .env file.

Step 5: Execute SQL Files

If you've already followed the steps in the Supabase Integration chapter, you don't need to repeat this step.

Open the data folder in the project root directory and execute all SQL files in Supabase's SQL Editor in order.

Execute SQL files

Step 6: Launch Project

Execute the startup command in the terminal:

npm run dev # Start with npm
or
yarn dev # Start with yarn
or
pnpm dev # Start with pnpm

After successful startup, visit http://localhost:3000 in your browser to see the project running.

Startup success

Required Settings

Configure Admin Account

Open Supabase, navigate to Table Editor and open the users table. Find the user you want to set as admin and set their role to admin.

Configure admin account

Now log in to the dashboard with the admin account to see the admin menu.

Admin menu

Update Pricing Cards

If you've completed the steps in the Supabase Integration chapter, you can now navigate to the /dashboard/prices page to see the built-in pricing cards.

Now you need to edit the Stripe-associated cards. Using the "Pro" card as an example:

Edit pricing card

Change the Stripe Price ID to the Price ID you created in Stripe, then click the "Verify & Fetch" button. The system will automatically fetch product and pricing information from Stripe, then save the pricing card.

Note:

  • If you haven't created products in your Stripe dashboard yet, please first complete the Stripe Integration chapter.
Verify pricing card

After updating, you can test the payment flow in the Pricing module on the landing page.

You have now completed the entire local configuration and startup process for the Nexty.dev source code repository.

Payment Testing

You can test the payment flow using the following information provided by Stripe:

  • Credit card: 4242 4242 4242 4242
  • Use any valid future date, such as 12/34
  • Use any three-digit CVC (four digits for American Express cards)
  • Other form fields can use any values.
Test payment