Menu

Local Setup Source Repository

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

Preparation

Before getting started, you need to prepare the following tools:

If you're new to VSCode or Cursor, I recommend installing some editor plugins that will help improve your programming efficiency: Cursor Extension Recommendations

Starting the Project

Step 1: Fork the Repository

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

fork
fork

Step 2: Clone the Repository

Open your GitHub account, locate the 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 repository locally.

git clone https://github.com/your-github-username/your-fork-repo-name.git
 
## or 
 
git clone https://github.com/your-github-username/your-fork-repo-name.git <new-folder-name>

Once the cloning is complete, open the project in Cursor or VSCode, and navigate to the project directory in your terminal.

cd your-fork-repo-name

Step 3: Install Dependencies

Install the project dependencies using pnpm.

pnpm install

Step 4: Configure Environment Variables

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

cp .env.example .env.local

For detailed environment variable descriptions, refer to Environment Variables

Good to know:

  • .env.local is only used for local development only. Production environments should use the .env file.

Step 5: Complete Database Integration

Completed the Database Integration.

Step 6: Start the Development Server

Run the development server using one of the following commands:

npm run dev
# or
yarn dev
# or
pnpm dev

Once the server starts successfully, open your browser and navigate to http://localhost:3000 to view the application.

Startup Success

Essential Configuration

Configure Administrator Account

Open the user table. Locate the user you want to designate as administrator and set their role to admin.

Configure Administrator Account

Now re-login with the administrator account, and you'll see the admin menus.

Administrator Directory

Update Pricing Plans

Navigate to the /dashboard/prices page to view the built-in pricing data.

Begin editing the pricing by connecting the built-in pricing data to your Stripe products. Using the Pro plan as an example:

Edit Pricing Plans

Update the Stripe Price ID with the Price ID you created in Stripe, then click the Verify & Fetch button. This will automatically retrieve product and pricing information from Stripe and save the pricing plan.

Verify Pricing Plans

Good to know:

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

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

Payment Testing

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

  • Credit card: 4242 4242 4242 4242
  • Use a 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