Getting Started

Project Overview

Welcome to company pro, a Starter Kit working for companies, a seamless and scalable template built with Next.js and Tailwind CSS. Perfectly designed to jumpstart your web app projects with modern, responsive UI components and exceptional performance. Our template provides a clean, professional user interface and optimized workflows, making it easy to customize and deploy.

Key Features Next.js Framework: Experience fast, efficient server-side rendering and optimized static site generation for a blazing-fast application. Tailwind CSS: Style easily using Tailwind's utility-first approach, allowing you to build complex, responsive designs without custom CSS. Fully Responsive: Mobile-first design to ensure an outstanding experience across all devices. Highly Customizable: Easily tweak components and styles to suit your brand and product needs.

Figma

Following is the URl for design in Figma:

https://www.figma.com/design/Zb5g7OGx20XAUhtHBuaaUO/work

Prerequisites

• Node.js and yarn/bun installed

Setup

1. Clone the repository:

   git clone <repository-url>
   cd <project-directory>
   

2. Install dependencies:

   yarn
   

3. Set up environment variables: Create a .env file in the root directory with the following variables:

   SUPABASE_URL=<your-supabase-project-url>
   SUPABASE_SERVICE_KEY=<your-supabase-service-key>
   
   # If using Stripe
   STRIPE_SECRET_KEY=<your-stripe-secret-key>
   NEXT_PUBLIC_STRIPE_PRICE_ID=<your-stripe-price-id>
   
   # If using Clerk
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<your-clerk-publishable-key>
   CLERK_SECRET_KEY=<your-clerk-secret-key>
   NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
   NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
   NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
   NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
   

4. Configure features: In config.ts, set the desired features:

   const config = {
     auth: {
       enabled: true, // Set to false if not using Clerk
     },
     payments: {
       enabled: true, // Set to false if not using Stripe
     }
   };

5. Set up the database: Run Prisma migrations:

   npx prisma migrate dev
   

6. Start the development server:

   yarn dev
   

7. Open your browser and navigate to http://localhost:3000 to see your application running.

Additional Configuration

• Webhooks: Set up webhooks for Clerk (if using auth) at /api/auth/webhook and for Stripe (if using payments) at /api/payments/webhook.
• Customize the landing page, dashboard, and other components as needed.
• Modify the Prisma schema in prisma/schema.prisma if you need to change the database structure.

Important Security Notes

• Enable Row Level Security (RLS) in your Supabase project to ensure data protection at the database level.
• Always make Supabase calls on the server-side (in API routes or server components) to keep your service key secure.

Learn More

Refer to the documentation of the individual technologies used in this project for more detailed information:

• Next.js Documentation
• Tailwind CSS Documentation
• Supabase Documentation
• Prisma Documentation
• Clerk Documentation (if using auth)
• Stripe Documentation (if using payments)