Get Started
Introduction
Welcome to the documentation of Loopple Boilerplate
Setting up
Let’s go through all the steps that you need to make your boilerplate work.
- 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.
- 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=
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.
- app/: Contains global stylesheets and layout components used across 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.