Down to Earth Farmstead Website Development

Development guide for the Down to Earth Farmstead marketing website - a Next.js 15 site for an Iowa farm business specializing in farm-fresh products and food preservation services.

Project Context

**Business Focus:**

**Tech Stack:**

**Repository:** https://github.com/jakedx6/down-to-earth-website

Project Structure

```

src/

├── app/ # Next.js app router pages

├── components/ # Reusable React components

├── lib/ # Utility functions (markdown processing)

├── content/

│ └── articles/ # Markdown blog posts

└── assets/ # Images, logos, photos

```

Design Guidelines

Component Development Rules

1. **ALWAYS check shadcn/ui first** before creating new components

2. Available components: Button, Card, Badge, Input, Textarea, Select, Form, Label

3. Install new shadcn components: `npx shadcn@latest add [component-name]`

Visual Design Principles

**Flat Design Philosophy:**

- Modals and dialogs

- Dropdown menus

- Clearly elevated elements (popovers)

**Brand Colors (Tailwind Config):**

```css

primary: oklch(0.32 0.09 165.8) /* #205248 forest green */

secondary: oklch(0.85 0.14 125.6) /* #b1e565 light green */

contrast-high-light: #111827 /* For headings on light bg */

contrast-medium-light: #374151 /* For body text on light bg */

```

Development Workflow

Initial Setup

```bash

Clone repository

git clone https://github.com/jakedx6/down-to-earth-website.git

cd down-to-earth-website

Install dependencies

npm install

Start development server

npm run dev

```

Available Commands

```bash

npm run dev # Start development server (with hot-reload fix for WSL)

npm run build # Build for production

npm run start # Start production server

npm run lint # Run ESLint

```

Hot Reload Fix (WSL)

Git Workflow

Branching Strategy

Standard Workflow

```bash

Start new work

git checkout main && git pull origin main

git checkout -b feature/your-feature-name

During development

git add . && git commit -m "Clear description of changes"

git push -u origin feature/your-feature-name

Complete work

git checkout main && git pull origin main

git checkout feature/your-feature-name && git merge main

npm run lint && npm run build # Quality checks

git checkout main && git merge feature/your-feature-name

git push origin main

git branch -d feature/your-feature-name

```

Commit Message Format

```

[type]: Brief description

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

```

Content Management

Page Structure

Markdown Articles

Deployment

Netlify Configuration

Pre-Deployment Checklist

1. Test build locally: `npm run build`

2. Run linting: `npm run lint`

3. Verify responsive design on mobile

4. Check all links and images

5. Test markdown content rendering

Development Best Practices

1. **Component Reuse:** Always use shadcn/ui components when available

2. **Design Consistency:** Follow flat design principles (no unnecessary shadows)

3. **Accessibility:** Use semantic HTML and ARIA labels

4. **Performance:** Optimize images and leverage static generation

5. **SEO:** Include proper meta tags and structured data

6. **Testing:** Build locally before pushing to ensure no build errors

7. **Mobile First:** Design for mobile responsiveness from the start

Common Tasks

Adding a New shadcn Component

```bash

npx shadcn@latest add [component-name]

```

Creating a New Blog Post

1. Create markdown file in `src/content/articles/`

2. Add frontmatter (title, date, excerpt, etc.)

3. Write content in markdown

4. Build and verify rendering

Updating Brand Colors

Edit Tailwind config in `tailwind.config.ts` - use OKLCH color space for consistent brand colors

Troubleshooting Build Issues

1. Clear `.next` folder

2. Delete `node_modules` and `package-lock.json`

3. Run `npm install`

4. Try `npm run build` again

Key Features