<div align="center" id="top"> <h1>Logo GPT Template</h1> <p>A full stack nextjs + shadcn + supabase template</p> </div> <br/>

Table of contents

<nav> <ul style="list-style-type: none; padding: 15px; text-align: center; background-color: #282c34; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);"> <li style="display: inline; margin-right: 20px;"> <a href="#youtube-onboarding-video" style="text-decoration: none; color: #61dafb; font-weight: bold; font-size: 16px; transition: color 0.3s;">Onboarding Video</a> </li> <li style="display: inline; margin-right: 20px;"> <a href="#supabase" style="text-decoration: none; color: #61dafb; font-weight: bold; font-size: 16px; transition: color 0.3s;">Supabase Setup</a> </li> <li style="display: inline; margin-right: 20px;"> <a href="#develop" style="text-decoration: none; color: #61dafb; font-weight: bold; font-size: 16px; transition: color 0.3s;">Develop</a> </li> <li style="display: inline; margin-right: 20px;"> <a href="#customize" style="text-decoration: none; color: #61dafb; font-weight: bold; font-size: 16px; transition: color 0.3s;">Customize</a> </li> <li style="display: inline; margin-right: 20px;"> <a href="#deploy" style="text-decoration: none; color: #61dafb; font-weight: bold; font-size: 16px; transition: color 0.3s;">Deploy</a> </li> </ul> </nav> <div id="youtube-onboarding-video"> <div align="left"> <h2>YouTube Onboarding Video</h2> <h4>This video walks you through how to set up the directory app from scratch. We will:</h4> <ul style="text-align: left; display: inline-block;"> <li>Setup a new Supabase project using the CLI</li> <li>Link it to our app</li> <li>Setup environment variables</li> <li>Run the DB migrations to configure the schema</li> <li>Configure authentication</li> <li>Register a user</li> <li>Create some logos</li> </ul> <a href="https://youtu.be/b74Fu_XHtr4"> <img src="https://raw.githubusercontent.com/Jordan-Gilliam/readme-assets/master/cult-dir-youtube-preview.png" width="85%" alt="YouTube Onboarding Video" /> </a> </div> </div> <div id="getting-started">

Getting Started

Watch the Onboarding Video to spin up quickly

</div> <div id="supabase" > ## Supabase

Install the Supabase CLI

• Mac: brew install supabase/tap/supabase

• Windows:

  powershell
  DownloadCopy code
  scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
  scoop install supabase

• Linux: brew install supabase/tap/supabase

• NPM/Bun: npx supabase <command>

<br/>

Create a Supabase project

1. Create a Supabase project at Supabase Dashboard, or via the CLI:

   shell
   DownloadCopy code
   npx supabase projects create -i "your-logo-app"

   Your Org ID can be found in the URL after selecting an org.

<br/>

Link your CLI to the project

2. Link your CLI to the project:

   shell
   DownloadCopy code
   npx supabase init
   npx supabase link

   Select the project you just created.

<br/>

Store Supabase URL & public anon key in .env.local for Next.js

3. Store Supabase URL & public anon key in .env.local for Next.js:

   shell
   DownloadCopy code
   NEXT_PUBLIC_SUPABASE_URL=<api-url>
   NEXT_PUBLIC_SUPABASE_ANON_KEY=<anon-key>

   You can get the project API URL and anonymous key from the API settings page.

<br/>

Setup DB schema

4. Setup DB schema:

   This will run all of the migrations located in the supabase/migrations directory

   shell
   DownloadCopy code
   supabase db push

Ensure your .env variables are configured correctly

bash
DownloadCopy code
cp .env.local.example .env.local

bash
DownloadCopy code
# Example Supabase Config
NEXT_PUBLIC_SUPABASE_URL="https://examplesqnwerasdfaser.supabase.co"
SUPABASE_PROJECT_ID="examplesqnwerasdfaser"
NEXT_PUBLIC_SUPABASE_ANON_KEY="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.."
OPENAI_API_KEY="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

For more details on obtaining your OpenAI API key, refer to the OpenAI API documentation.

</div>

Develop

<div id="develop" >

Install dependencies and run the Next.js client

In a separate terminal, run the following commands:

shell
DownloadCopy code
pnpm i

shell
DownloadCopy code
pnpm run dev

Open http://localhost:3000 in your browser.

Adding Products to the Directory

To add new products to your directory, simply visit the submission page:

Submit Products

</div>

Congratulations!

You now have a fully seeded database with all the data you need to start building your own logo directory.

Customize

<div id="customize" />

Custom Color Theme

To give your directory a unique look, create a custom color theme:

1. Design Your Theme

   Visit the custom shadcn theme page to design your theme.

2. Apply Your Theme

   Once you have your theme, copy the relevant CSS and paste it into your app/globals.css file, replacing lines 5-67.

Deploy

<div id="deploy">

1. Create a new repository and push the project to GitHub.

2. Go to Vercel and import the GitHub repository: Deploy.

3. Set up Environment Variables in Vercel

   Go to your project settings on Vercel and set up the environment variables by copying the content from your .env.local file. Ensure the following variables are included:

   • NEXT_PUBLIC_SUPABASE_URL - Your Supabase API URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY - Your Supabase anonymous key
   • SUPABASE_PROJECT_ID - Your Supabase project ID
   • OPENAI_API_KEY - Your OpenAI API Key

   Here's an example of what your environment variables might look like:

   plaintext
   DownloadCopy code
   NEXT_PUBLIC_SUPABASE_URL="https://abcd1234.supabase.co"
   NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
   SUPABASE_PROJECT_ID="abcd1234"
   OPENAI_API_KEY="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

4. Deploy the Project

   Once your environment variables are set, you can deploy your project. Vercel will handle the build and deployment process for you.

5. Access Your Live Application

   After deployment, you can access your live application through the URL provided by Vercel. Your application should now be live and ready to use.

</div>

Conclusion

Welcome to the Logo GPT!

Follow the steps outlined in this README to deploy and customize your directory app. If you have any questions or run into issues, feel free to reach out for support on Twitter: https://x.com/nolansym

Cheers! Stoked to see what you build!

<a href="#top" style="text-decoration: none; color: #007bff; font-weight: bold;">Scroll to top</a>