Building Apps with the o1 Pro Template System

This is the repo for a free workshop on how to use OpenAI's o1-pro to build full-stack web apps with a starter template.

It is part 1 of a 2 part series. This is the beginner workshop. The advanced workshop will be released on February 24th.

Workshop Video

You can find the video for this workshop on X and YouTube.

This workshop is also available in course form on Takeoff - we will continue to add to it and keep it updated with the latest model releases over time.

Use code O1PRO for 25% off at checkout.

I get asked all the time for an example of content on Takeoff, so hopefully this workshop gives you a feel for our content and my teaching style.

About Me

My name is Mckay.

I'm currently building Takeoff - the best place on the internet to learn how to build with AI.

Follow me on X and subscribe to my YouTube for more free AI coding tutorials & guides.

Tech Stack

• AI Model: o1-pro
• IDE: Cursor
• AI Tools: RepoPrompt, V0, Perplexity
• Frontend: Next.js, Tailwind, Shadcn, Framer Motion
• Backend: PostgreSQL, Supabase, Drizzle, Server Actions
• Auth: Clerk
• Payments: Stripe

Note: While I highly recommend using o1-pro for this workflow, you can also use o3-mini, Claude 3.5 Sonnet, Gemini 2.0 Pro, and DeepSeek r1 for cheaper alternatives. However, you will run into issues with those other models in this particular workflow, so I recommend using o1-pro for this workflow if possible.

Prerequisites

You will need accounts for the following services.

They all have free plans that you can use to get started, with the exception of ChatGPT Pro (if you are using o1-pro).

• Create a Cursor account
• Create a GitHub account
• Create a Supabase account
• Create a Clerk account
• Create a Stripe account
• Create a Vercel account

You will likely not need paid plans unless you are building a business.

Guide

Clone the repo

1. Clone this repo:

git clone https://github.com/mckaywrigley/o1-pro-template-system o1-pro-project

2. Save the original remote as "upstream" before removing it:

git remote rename origin upstream

3. Create a new repository on GitHub

4. Add the new repository as "origin":

git remote add origin https://github.com/your-username/your-repo-name.git

5. Push the new repository:

git branch -M main
git push -u origin main

Run the app

1. Install dependencies:

npm install

2. Run the app:

npm run dev

3. View the app on http://localhost:3000

Follow the workshop

View the full workshop on X and YouTube.

Or sign up for Takeoff to get access to the full workshop in course form.