Cult-SEO

Welcome to the Cult-SEO repository! This template aims to provide a comprehensive set of tools to parse other URLs, interact with them, and leverage AI for analysis. This project is designed to help you enhance your website's SEO effortlessly, providing you with insights and recommendations based on real data.

Prerequisites

Before you begin, ensure you have the following installed on your machine:

• Node.js (v20.x or later)
• npm (v6.x or later) or pnpm (v7.x or later)

Installation

1. Clone the repository:

   bash
   DownloadCopy code
   git clone https://github.com/yourusername/cult-seo.git
   cd cult-seo

2. Install dependencies: Using npm:

   bash
   DownloadCopy code
   npm install

   Or using pnpm:

   bash
   DownloadCopy code
   pnpm install

   <br/>

Setting up API Keys

To use various APIs, you need to obtain and set up the necessary API keys. Follow these steps to obtain and set up the keys:

Google Cloud CrUX API Key

1. Go to the Google Cloud Console:

   • Navigate to the Google Cloud Console.

2. Create a new project:

   • Click on the project dropdown at the top of the page.
   • Select "New Project" and give your project a name.
   • Click "Create".

3. Enable the CrUX API:

   • In the Google Cloud Console, go to the APIs & Services section.
   • Click on "Enable APIs and Services".
   • Search for "Chrome User Experience Report API" and enable it for your project.

4. Create API Credentials:

   • Go to the Credentials section in the APIs & Services section.
   • Click on "Create Credentials" and choose "API Key".
   • Copy the generated API key.

5. Set up the API key in your project:

   • Create a .env.local file in the root of your project.
   • Add the following line to the .env.local file, replacing YOUR_API_KEY with the API key you copied:

     plaintext
     DownloadCopy code
     GOOGLE_CLOUD_CRUX_KEY=YOUR_API_KEY

Anthropic API Key

You only need to set up either the Anthropic API key or the OpenAI API key, not both.

1. Sign up for Anthropic:

   • Go to the Anthropic website and sign up for an account.

2. Generate an API Key:

   • Once you have an account, navigate to the API keys section in your account settings.
   • Generate a new API key and copy it.

3. Set up the API key in your project:

   • Add the following line to the .env.local file, replacing YOUR_ANTHROPIC_API_KEY with the API key you copied:

     plaintext
     DownloadCopy code
     ANTHROPIC_API_KEY=YOUR_ANTHROPIC_API_KEY

OpenAI API Key

You only need to set up either the Anthropic API key or the OpenAI API key, not both.

1. Sign up for OpenAI:

   • Go to the OpenAI website and sign up for an account.

2. Generate an API Key:

   • Once you have an account, navigate to the API keys section in your account settings.
   • Generate a new API key and copy it.

3. Set up the API key in your project:

   • Add the following line to the .env.local file, replacing YOUR_OPENAI_API_KEY with the API key you copied:

     plaintext
     DownloadCopy code
     OPENAI_API_KEY=YOUR_OPENAI_API_KEY

Upstash Redis API Key

Setting up an Upstash Redis API key is optional and can be used for storing and managing data in a Redis database.

1. Sign up for Upstash:

   • Go to the Upstash website and sign up for an account.

2. Create a new Redis database:

   • In your Upstash dashboard, create a new Redis database and copy the REST URL and the API key.

3. Set up the API key in your project:

   • Add the following lines to the .env.local file, replacing YOUR_UPSTASH_REDIS_REST_URL and YOUR_UPSTASH_REDIS_API_KEY with the values you copied:

     plaintext
     DownloadCopy code
     KV_REST_API_URL=YOUR_UPSTASH_REDIS_REST_URL
     KV_REST_API_TOKEN=YOUR_UPSTASH_REDIS_API_KEY

Your .env.local file should look like this:

plaintext
DownloadCopy code
GOOGLE_CLOUD_CRUX_KEY=YOUR_GOOGLE_CLOUD_CRUX_KEY
ANTHROPIC_API_KEY=YOUR_ANTHROPIC_API_KEY
OPENAI_API_KEY=YOUR_OPENAI_API_KEY
KV_REST_API_URL=YOUR_UPSTASH_REDIS_REST_URL
KV_REST_API_TOKEN=YOUR_UPSTASH_REDIS_API_KEY

Database Configuration

If you have set up the Upstash Redis API key, you can configure the database settings in your project. Ensure that the .env.local file contains the following entries:

plaintext
DownloadCopy code
KV_REST_API_URL=YOUR_UPSTASH_REDIS_REST_URL
KV_REST_API_TOKEN=YOUR_UPSTASH_REDIS_API_KEY

These values will be used to connect to your Redis database and manage data efficiently.

Running the Development Server

To start the development server, run:

bash
DownloadCopy code
npm run dev

Or if you are using pnpm:

bash
DownloadCopy code
pnpm dev

Open your browser and navigate to http://localhost:3000 to see the application in action.

Building for Production

To create a production build, run:

bash
DownloadCopy code
npm run build

Or if you are using pnpm:

bash
DownloadCopy code
pnpm build

After the build is complete, you can start the production server with:

bash
DownloadCopy code
npm start

Or if you are using pnpm:

bash
DownloadCopy code
pnpm start

Linting

To check your code for linting errors, run:

bash
DownloadCopy code
npm run lint

Or if you are using pnpm:

bash
DownloadCopy code
pnpm lint

Project Structure

Here is a detailed overview of the project structure:

cult-seo/
├── app/                    # Application files
│   ├── api/                # API routes
│   │   ├── ai-analyze/     # AI analyze related files
│   │   │   ├── prompt.ts   # Contains prompt configurations and utilities
│   │   │   ├── route.ts    # Handles the routing for the AI analyze endpoint
│   │   │   └── actions.ts  # Defines actions and operations for the AI analyze endpoint
│   ├── globals.css         # Global CSS styles applied throughout the app
│   ├── icon.ico            # Favicon for the application
│   ├── opengraph-image.png # Open Graph image used for social media previews
│   ├── layout.tsx          # Main layout file that wraps around all pages
│   ├── page.tsx            # Main page component, entry point of the app
│   └── providers.tsx       # Providers for context, state management, and other utilities
├── components/             # React components
│   ├── sections/           # Page sections, organized for better structure
│   │   ├── _layout.tsx             # Layout for sections
│   │   ├── analyze-with-ai.tsx     # Component for analyzing with AI
│   │   ├── og-images.tsx           # Component for managing Open Graph images
│   │   ├── seo-score.tsx           # Component for displaying SEO score
│   │   ├── web-vitals.tsx          # Component for displaying web vitals
│   │   └── website-form.tsx        # Component for the website form
│   ├── ui/                 # UI components for reusable elements
│   │   ├── animated-number.tsx     # Animated number display
│   │   ├── badge.tsx               # Badge component
│   │   ├── button.tsx              # Button component
│   │   ├── card.tsx                # Card component
│   │   ├── gauge.tsx               # Gauge component
│   │   ├── icons.tsx               # Icon components
│   │   ├── input.tsx               # Input field component
│   │   ├── label.tsx               # Label component
│   │   ├── loading-button.tsx      # Button with loading indicator
│   │   ├── loading-spinner.tsx     # Loading spinner component
│   │   ├── logo.tsx                # Logo component
│   │   ├── og-social-cards.tsx     # Open Graph social cards component
│   │   ├── progress.tsx            # Progress bar component
│   │   ├── scroll-area.tsx         # Scroll area component
│   │   ├── skeleton.tsx            # Skeleton loading component
│   │   ├── sonner.tsx              # Sonner notification component
│   │   ├── switch.tsx              # Switch component
│   │   ├── table.tsx               # Table component
│   │   ├── tabs.tsx                # Tabs component
│   │   └── tooltip.tsx             # Tooltip component
├── lib/                    # Library files for business logic
│   ├── crawl.ts            # Functions for web crawling
│   ├── seo.ts              # SEO-related utilities and functions
│   ├── types.ts            # TypeScript type definitions
│   ├── utils.ts            # General utility functions
│   └── web-vitals.ts       # Functions for measuring web vitals
├── .env.local              # Environment variables (local)
├── .env.local.example      # Example environment variables file
├── .gitignore              # Git ignore file
├── components.json         # Components configuration
├── next-env.d.ts           # Next.js TypeScript environment declaration
├── next.config.js          # Next.js configuration
├── package.json            # Project metadata and dependencies
├── pnpm-lock.yaml          # pnpm lock file
├── postcss.config.js       # PostCSS configuration
├── README.md               # README file
├── tailwind.config.ts      # TailwindCSS configuration
└── tsconfig.json           # TypeScript configuration