Skip to main content

​
Installation

This guide covers the complete installation and setup process for the Product Builders landing page.

​
System requirements

Ensure your system meets these requirements before proceeding:
  • Node.js 20.0.0 or higher
  • npm 10.0.0 or higher (or yarn/pnpm equivalent)
  • Git for version control
  • Modern web browser (Chrome, Firefox, Safari, or Edge)

​
Clone the repository

First, clone the repository to your local machine: 
git clone https://github.com/alvapr0g/landing.git
cd landing

​
Install dependencies

The project uses several key dependencies. Install them using your preferred package manager: 
npm install

​
Core dependencies

The landing page includes these core dependencies:

​
Framework and UI

  • next 15.5.9 - React framework with App Router
  • react 19.2.1 - UI library
  • react-dom 19.2.1 - React DOM renderer
  • typescript ^5 - Type-safe JavaScript

​
Styling

  • tailwindcss ^3.4.1 - Utility-first CSS framework
  • tailwindcss-animate ^1.0.7 - Animation utilities
  • tailwind-merge ^3.0.1 - Merge Tailwind classes
  • class-variance-authority ^0.7.1 - Component variants

​
UI components (shadcn/ui)

  • @radix-ui/react-accordion ^1.2.3
  • @radix-ui/react-dialog ^1.1.6
  • @radix-ui/react-dropdown-menu ^2.1.6
  • @radix-ui/react-select ^2.1.6
  • @radix-ui/react-toast ^1.2.6
  • lucide-react ^0.475.0 - Icon library

​
Form handling

  • react-hook-form ^7.54.2 - Form state management
  • @hookform/resolvers ^4.1.3 - Form validation resolvers
  • zod ^3.24.2 - Schema validation

​
Email integration

  • resend ^3.5.0 - Email API client

​
Other utilities

  • firebase ^11.9.1 - Firebase SDK
  • date-fns ^3.6.0 - Date utilities
  • embla-carousel-react ^8.6.0 - Carousel component

​
Development dependencies

  • @types/node ^20 - Node.js type definitions
  • @types/react ^19.2.1 - React type definitions
  • @types/react-dom ^19.2.1 - React DOM type definitions
  • @netlify/plugin-nextjs ^5.5.0 - Netlify deployment plugin
  • postcss ^8 - CSS processor

​
Environment setup

1

Create environment file

Create a .env.local file in the project root:
touch .env.local
2

Add Resend API key

Sign up for a free Resend account at resend.com and get your API key.Add it to .env.local:
.env.local
RESEND_API_KEY=re_your_api_key_here
The API key must start with re_ to be valid. The contact form validates this prefix.
3

Verify environment variables

The contact form in src/app/actions.ts validates the API key:
src/app/actions.ts
if (!resendApiKey.startsWith("re_")) {
  return {
    message: "Configuration error: The Resend API key is invalid.",
    success: false,
  };
}

​
Verify installation

Run these commands to verify everything is installed correctly:

​
Check TypeScript

npm run typecheck
This runs tsc --noEmit to check for type errors without building.

​
Check linting

npm run lint
Runs ESLint to check code quality.

​
Start development server

npm run dev
Starts the Next.js development server with Turbopack on port 9002: 
▲ Next.js 15.5.9
- Local:        http://localhost:9002
- Turbopack:    enabled

✓ Starting...
✓ Ready in 1.2s
The development server uses Turbopack (--turbopack flag) for faster builds compared to Webpack.

​
Build for production

To create a production build: 
npm run build
This runs NODE_ENV=production next build and outputs: 
✓ Creating an optimized production build
✓ Compiled successfully
✓ Linting and checking validity of types
✓ Collecting page data
✓ Generating static pages
✓ Finalizing page optimization

Route (app)                              Size     First Load JS
┌ ○ /                                    5.2 kB         95.1 kB
└ ○ /[lang]                              1.8 kB         91.7 kB

​
Project configuration files

The installation includes these configuration files:

​
next.config.ts

Configures Next.js with TypeScript and image optimization:
next.config.ts
const nextConfig: NextConfig = {
  typescript: {
    ignoreBuildErrors: true,
  },
  eslint: {
    ignoreDuringBuilds: true,
  },
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'placehold.co' },
      { protocol: 'https', hostname: 'images.unsplash.com' },
      { protocol: 'https', hostname: 'picsum.photos' },
    ],
  },
};

​
tailwind.config.ts

Configures Tailwind CSS with custom colors and animations. See Theming for details.

​
tsconfig.json

TypeScript configuration with path aliases:
tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

​
components.json

Shadcn/ui configuration:
components.json
{
  "style": "new-york",
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/app/globals.css"
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

​
Troubleshooting

​
Port already in use

If port 9002 is already in use, modify package.json:
package.json
{
  "scripts": {
    "dev": "next dev --turbopack -p 3000"
  }
}

​
Module not found errors

Delete node_modules and reinstall: 
rm -rf node_modules package-lock.json
npm install

​
TypeScript errors

The project ignores TypeScript errors during builds. To see all errors: 
npm run typecheck

​
Image loading issues

Ensure remote image hostnames are configured in next.config.ts under images.remotePatterns.

​
Next steps

Quickstart guide

Follow the quickstart to run the landing page

Customize theming

Modify colors and styling

Configure i18n

Set up translations

Deploy

Deploy to production

Build docs developers (and LLMs) love

Get started for freeTalk to us