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:
Folder structure
Here is the folder structure tree:
- 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.