Mega Prompt That Creates A SaaS App In Next.JS

Stephen G. Pope

👑

Jul 14 • 💬 Discussion

Create a complete Next.js 14+ SaaS framework foundation with the following specifications:

## Project Initialization

Initialize a new Next.js project with:

- npx create-next-app@latest saas-framework --typescript --tailwind --eslint --app --src-dir --import-alias

- Use App Router (not Pages Router)

- TypeScript for all files

- Tailwind CSS with custom configuration

## shadcn/ui Integration

1. Initialize shadcn/ui with proper configuration

2. Install these essential components: button, card, input, label, form, dropdown-menu, navigation-menu, sheet, dialog, avatar

3. Configure the components.json file for consistent theming

4. Set up proper import aliases for components

## Project Structure

Create this exact folder structure:

src/

├── app/

│ ├── globals.css

│ ├── layout.tsx

│ ├── page.tsx

│ └── (auth)/ # Route groups for future auth pages

├── components/

│ ├── ui/ # shadcn components (auto-generated)

│ ├── layout/

│ │ ├── header.tsx

│ │ ├── footer.tsx

│ │ └── navigation.tsx

│ ├── features/

│ │ └── landing/

│ │ ├── hero-section.tsx

│ │ ├── features-section.tsx

│ │ └── pricing-preview.tsx

│ └── common/

│ ├── loading-spinner.tsx

│ └── theme-toggle.tsx

├── lib/

│ ├── utils.ts # cn() utility and helpers

│ ├── constants.ts # App constants

│ └── types.ts # Shared TypeScript types

├── styles/

│ └── globals.css # Additional custom styles

└── types/

├── auth.ts # Auth-related types (for future)

└── subscription.ts # Subscription types (for future)

## Configuration Files

1. **tailwind.config.ts**: Extend with custom colors for SaaS branding (primary, secondary, accent colors)

2. **prettier.config.js**: Include tailwindcss plugin for class sorting

3. **next.config.js**: Optimize for production with proper headers and redirects setup

4. **.env.local.example**: Template for environment variables (include placeholders for SUPABASE_URL, etc.)

## Core Components to Build

1. **Layout Components:**

- Header with logo, navigation, and auth button placeholders

- Footer with company links and social media

- Responsive navigation with mobile menu using shadcn Sheet

2. **Landing Page Sections:**

- Hero section with value proposition and CTA

- Features section showcasing 3-4 key SaaS features

- Pricing preview (3 tiers: Free, Pro, Enterprise)

- Simple contact/demo section

3. **UI Utilities:**

- Loading spinner component

- Theme toggle (light/dark mode) using next-themes

- Reusable button variants following shadcn patterns

## Styling & Theming

- Configure dark mode support with next-themes

- Create custom CSS variables for brand colors

- Set up responsive breakpoints following mobile-first approach

- Use proper semantic HTML and ARIA attributes for accessibility

## TypeScript Setup

Define these essential types in lib/types.ts:

- User interface (id, email, name, avatar_url)

- SubscriptionTier enum (free, pro, enterprise)

- Feature interface (name, description, tier_required)

- Basic API response types

## Development Setup

1. Configure package.json scripts for development workflow

2. Set up ESLint rules for consistent code style

3. Add Prettier configuration with Tailwind class sorting

4. Include basic GitHub Actions workflow file for CI/CD

## Sample Content

Create realistic placeholder content for:

- Company name: "SaaSify"

- Hero headline about building SaaS applications faster

- 4 key features (Authentication, Payments, Analytics, API Management)

- Pricing tiers with feature comparisons

- Professional color scheme (blues/purples for tech SaaS feel)

## Testing & Validation

- Ensure all components render without errors

- Verify responsive design on mobile/tablet/desktop

- Test dark/light mode switching

- Validate TypeScript compilation with no errors

- Check Tailwind classes are properly applied

## Git Setup

- Initialize git repository

- Create comprehensive .gitignore

- Set up initial commit with proper commit message

- Include README.md with setup instructions and project overview

Focus on clean, production-ready code with proper TypeScript typing, responsive design, and modern React patterns. All components should use shadcn/ui styling and follow consistent naming conventions. Include helpful comments explaining architectural decisions and future extension points.

9 comments