Hero Light Hero Dark

​
Setting up

Let’s go through all the steps that you need to make your boilerplate work.
  1. The first step is to download the project from Loopple by clicking on the ‘Donwload Boilerplate’ project. It will download a .zip file with all the code that you need.
  2. After yo unzip the folder you will see the .env file, that should look like this:
# Paddle plans
NEXT_PUBLIC_MONTHLY_PLAN_ID=
NEXT_PUBLIC_YEARLY_PLAN_ID=

# Paddle details
PADDLE_VENDOR_ID=
PADDLE_VENTOR_API_KEY=
PADDLE_VENDOR_AUTH_CODE=
PADDLE_SANDBOX=true
NEXT_PUBLIC_PADDLE_VENDOR_ID=
NEXT_PUBLIC_PADDLE_SANDBOX=

# Supabase details
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=

NEXT_PUBLIC_BASE_URL=http://localhost:3000
NEXT_PUBLIC_VERCEL_URL=http://localhost:3000

# OpenAI details
NEXT_PUBLIC_OPENAI_API_KEY=

Get .env variables

Read more about .env variables and where can you get them

​
Folder structure

Here is the folder structure tree: 
├── README.md
├── next-env.d.ts
├── next.config.mjs
├── package.json
├── postcss.config.mjs
├── src
│   ├── app
│   │   ├── globals.css
│   │   └── layout.js
│   ├── components
│   │   ├── Faq.js
│   │   ├── Footer.js
│   │   ├── Header.js
│   │   ├── Heading.js
│   │   ├── Navbar.js
│   │   ├── PaddleLoader.js
│   │   ├── Sidebar.js
│   │   └── layout
│   │       └── DashboardLayout.js
│   ├── pages
│   │   ├── _app.js
│   │   ├── api
│   │   │   └── translate.js
│   │   ├── dashboard
│   │   │   ├── ai-generator.js
│   │   │   └── projects.js
│   │   ├── dashboard.js
│   │   ├── index.js
│   │   ├── login.js
│   │   ├── pagenotfound.js
│   │   └── pricing.js
│   └── utils
│       ├── helpers.js
│       ├── index.js
│       └── useUser.js
├── tailwind.config.js
└── tsconfig.json
  • README.md: Contains project documentation, including setup instructions and usage guidelines.
  • next.config.mjs: Configures Next.js settings, such as webpack configuration and custom routes.
  • package.json: Contains project metadata and dependencies, including scripts for running tasks.
  • src/: Contains all the source code for the project.
    • app/: Contains global stylesheets and layout components used across the application.
      • globals.css: Global stylesheet for defining application-wide styles.
      • layout.js: Layout component used to structure the overall layout of the application.
    • components/: Contains reusable UI components used throughout the application.
    • pages/: Contains Next.js page components, defining routes and layouts for different pages.
      • _app.js: Overrides the default App component to provide global styles or layout components.
      • api/: Contains server-side API routes handling requests from the client.
      • dashboard/: Contains pages related to the application’s dashboard, such as project management and AI generation.
      • index.js: Represents the homepage of the application.
      • login.js: Represents the login page of the application.
      • pagenotfound.js: Represents the 404 error page when a requested page is not found.
      • pricing.js: Represents the pricing page of the application.
    • utils/: Contains utility functions or hooks used throughout the application.
  • tailwind.config.js: Configures Tailwind CSS settings, such as custom themes and plugins.
  • tsconfig.json: Configures TypeScript settings for the project, such as compiler options and paths.