Getting Started

Getting Started

Thank you for downloading my boilerplate! 🎉

I built this boilerplate for myself to help me quickly build and launch applications. Now I'm sharing it with you so you can do the same.

Step 1: Download an AI-Powered IDE

To get started, you'll need an IDE (code editor) that has AI built-in. This will help you understand and work with the code even if you're new to programming.

Choose one:

Download and install whichever one you prefer.

Step 2: Open the Boilerplate in Your IDE

Once your IDE is installed:

  1. Open your IDE
  2. Go to File → Open Folder (or similar)
  3. Select the boilerplate folder you downloaded

That's it! You should now see all the project files in your IDE.

Step 3: Run the Code

Now here's the magic of having an AI-powered IDE — you can just ask it!

Open the AI chat in your IDE and type:

"How do I run this project?"

The AI will guide you through it. The answer is usually just running yarn dev in the terminal, but the AI can help you if you run into any issues.

Step 4: Set Up Authentication

For user login to work, you'll need to set up a few services. Don't worry — they all have free tiers!

4a. Set Up MongoDB (Your Database)

MongoDB is where your app will store user accounts and data.

  1. Go to MongoDB Atlas (opens in a new tab) and create a free account
  2. Create a new Cluster (the free tier "M0" is perfect for starting out)
  3. Once your cluster is created, click "Connect"
  4. Choose "Connect your application"
  5. Copy the connection string — it looks like this: 
    mongodb+srv://username:<password>@cluster0.xxxxx.mongodb.net/?retryWrites=true&w=majority
  6. Replace <password> with your actual database password
  7. Add this to your .env file as MONGODB_URI

4b. Set Up SendGrid (For Email Login)

SendGrid lets your app send login emails to users.

  1. Go to SendGrid (opens in a new tab) and create a free account
  2. Once logged in, go to Settings → API Keys
  3. Click "Create API Key"
  4. Give it a name (like "My App") and select "Full Access"
  5. Copy the API key (you'll only see it once!)
  6. Add this to your .env file as SENDGRID_API_KEY

4c. Set Up Google Sign-In (Optional)

If you want users to sign in with their Google account:

  1. Go to the Google Cloud Console (opens in a new tab)
  2. Create a new project (or select an existing one)
  3. Go to APIs & Services → Credentials
  4. Click "Create Credentials" → "OAuth client ID"
  5. If prompted, configure the OAuth consent screen first:
    • Choose "External" for user type
    • Fill in the app name and your email
    • Add your domain to authorized domains (or skip for localhost testing)
  6. For Application type, select "Web application"
  7. Add these to Authorized redirect URIs: 
    http://localhost:3000/api/auth/callback/google
https://yourdomain.com/api/auth/callback/google
  8. Click "Create" and copy your Client ID and Client Secret
  9. Add these to your .env file as GOOGLE_ID and GOOGLE_SECRET

Your .env File Should Look Like This

MONGODB_URI=mongodb+srv://username:password@cluster0.xxxxx.mongodb.net/?retryWrites=true&w=majority
NEXTAUTH_SECRET=any-random-string-you-make-up
SENDGRID_API_KEY=SG.xxxxxxxxxxxxxxxxxxxx
GOOGLE_ID=xxxxx.apps.googleusercontent.com
GOOGLE_SECRET=GOCSPX-xxxxxxxxxxxx

💡 Tip: For NEXTAUTH_SECRET, just type any random string of characters. This is used to secure your login sessions.

Step 5: Build Your Application

This is where the fun begins! You can now use the AI to help you build your application on top of this boilerplate.

Open the AI chat and describe what you want to build. Here's a sample prompt to get you started:

"I want to build a simple todo app using this boilerplate. Create a landing page using the existing landing page component. The app should let users create, complete, and delete tasks. Each task should have a title and a checkbox. Set up the backend API routes and database schema to store the tasks. Please help me create the necessary pages, components, and backend."

The AI will analyze the boilerplate structure and help you implement your feature step by step.

You're All Set!

That's all you need to get started. The AI in your IDE is your coding partner — don't hesitate to ask it questions, request explanations, or get help debugging issues.

Happy building! 🚀

Auth