Skip to content


Repository files navigation


  • Next.js – React framework for building performant apps with the best developer experience
  • NextAuth.js – Authentication library for Next.js applications


  • Vercel – Easily preview & deploy changes with git
  • PlanetScale – The world’s most advanced MySQL platform


  • Tailwind CSS – Utility-first CSS framework for rapid UI development
  • Radix – Primitives like modal, popover, etc. to build a stellar user experience
  • Framer Motion – Motion library for React to animate components with ease
  • Lucide – Beautifully simple, pixel-perfect icons
  • next/font – Optimize custom fonts and remove external network requests for improved performance
  • ImageResponse – Generate dynamic Open Graph images at the edge

Hooks and Utilities

  • useIntersectionObserver – React hook to observe when an element enters or leaves the viewport
  • useLocalStorage – Persist data in the browser's local storage
  • useScroll – React hook to observe scroll position (example)
  • nFormatter – Format numbers with suffixes like 1.2k or 1.2M
  • capitalize – Capitalize the first letter of a string
  • truncate – Truncate a string to a specified length
  • use-debounce – Debounce a function call / state update
  • SendGrid – Email delivery platform for sending transactional and marketing emails
  • Cloudinary – Media management platform for images and videos
  • Notion – Collaboration platform for organizing and managing documents, databases, and tasks

Code Quality

  • TypeScript – Static type checker for end-to-end typesafety
  • Prettier – Opinionated code formatter for consistent code style
  • ESLint – Pluggable linter for Next.js and TypeScript

Code Quality

  • TypeScript – Static type checker for end-to-end typesafety
  • Prettier – Opinionated code formatter for consistent code style
  • ESLint – Pluggable linter for Next.js and TypeScript

Getting Started

Follow these steps to create a new project using this template:

  1. Create a New Repository:

    ◦ Click the "Use this template" button on the template repository page.

    ◦ Enter a name for your new repository based on the template.

  2. Clone the Repository: ◦ Clone the newly created repository to your local machine:

    git clone

  3. Installation: ◦ Navigate to the project folder:

    cd <your-new-repo-name>

    ◦ Install dependencies:

     npm install
  4. Configuration:

    1. Configure any project-specific settings, such as environment variables or API keys, in the appropriate configuration files.

    2. add Planetscale database url

      DATABASE_URL_MAIN=mysql://<username>:<password><Database_Name>?sslaccept=strict ensure prisma schema has provider as 'mysql':

      datasource db {
          provider= "mysql"
          url= env("DATABASE_URL_MAIN")
          relationMode= "prisma"

      use prisma db push to push the schema to database

    3. add sendgrid keys

      ## sengrid credentials for contact forms
      ## list name to add contact to
      # recieves contact form messages

      Use a email with inbox you have access to for CONTACT_EMAIL as you will receive email here

      create List in Sendgrid Contact list with unquie name and use this for SENDGRID_LIST

    4. Create Notion table for storing contact information in a database

      create table withe the following Columns: 1. Name 2. Email Address 3. Message 4. Referral

      add the follwoing env variables :

    5. Add the follwoing env variables to use cloudinary function to upload files to cdn :

    6. Use Stripe CheckOut form : add the folwwoing env variables to use Stripe CheckOut with Buy-now pay-later:


      create a payment intent with api POST request to /api/stripe/client-secret with body with type definition {price :number, currency: string, description :string, metadata: Record<string, string>}

      price will be number for example for $ 10 {price: 1000, currency:'usd'}

      this secret can be pass to the paymentModal/CheckoutForm Component


  1. Development: ◦ Start the development server:

     npm run dev
  2. Production Build: ◦ Create a production-ready build:

    npm run build

  3. Testing: ◦ Run tests (if applicable):

    npm test

  4. Deployment: ◦ Deploy your project to the desired hosting platform (e.g., Vercel, Netlify, etc.).

    Example Vercel:
    1. Sign Up for Vercel: If you don't have a Vercel account, sign up for one at

    2. Connect Your Next.js App to Vercel: Import your Git repository to Vercel. Once you're signed up, import your repository on Vercel. You can do so from here: You'll need to install Vercel for GitHub and give it access to All Repositories.

    3. Configure Project Settings: Leave the default values for the settings, as Vercel automatically detects that you have a Next.js app and chooses optimal build settings for you

    4. Deploy Your Next.js App: Choose the branch you want to deploy (e.g., “main” for production). Vercel will build your app, run tests, and deploy it globally


  1. Adding Components: ◦ Add custom components or modify existing ones in the src/components directory.
  2. Styling: ◦ Customize the styles using the provided CSS framework (e.g., Tailwind CSS).
  3. Data Management: ◦ Implement data management solutions like Prisma for your specific needs.


  1. Fork the repository.
  2. Create a new branch for your feature or bug fix: git checkout -b feature-name.
  3. Make your changes and commit them.
  4. Push to your fork and submit a pull request.


This template is open-source and available under the MIT License.



No description, website, or topics provided.







No packages published