DOGE Network Next.js Template

A Next.js template for creating state-specific DOGE Network websites. This template provides a modern, responsive design with built-in DOGE Network branding and easy customization for any US state or local initiative.

Table of Contents

• Quick Start
• Customization
  • Replace State Flag or Logo
  • Update Content
  • Add New Pages
  • Styling
• Data Sources
• Deployment
• File Structure
• Development
• Support
• License

Quick Start

1. Use This Template

Click the "Use this template" button on GitHub to create your own repository from this template.

2. Clone Your Repository

git clone https://github.com/YOUR_USERNAME/YOUR_REPO_NAME.git
cd YOUR_REPO_NAME

3. Install Dependencies

npm install

4. Start Development Server

npm run dev

Visit http://localhost:3000 to see your site!

Customization

Replace State Flag or Logo

1. Add your state's flag or custom logo to the /public directory
2. Update references in your components (e.g., src/app/page.tsx)
3. The DOGE Network logo in the header is located at /public/doge-network.png

Update Content

Edit these files to add your state-specific or project-specific content:

• src/app/page.tsx - Homepage content and layout
• src/components/Header.tsx - Site header and navigation
• src/components/Footer.tsx - Site footer
• package.json - Update name field to reflect your project

Customizing the Homepage

The main page content is in src/app/page.tsx. Update the title, description, and sections to match your state or initiative:

<h1 className={styles.title}>Your State Name</h1>
<p className={styles.intro}>
  Your state-specific content here...
</p>

Customizing the Header

The header includes DOGE Network branding and navigation links. Update src/components/Header.tsx to:

• Change navigation links
• Update logo or branding
• Modify mobile menu behavior

Add New Pages

Create new pages in the src/app directory following Next.js App Router conventions:

Example: Create a Savings Page

1. Create src/app/savings/page.tsx:

import styles from "../styles/Home.module.css";

export default function Savings() {
  return (
    <div className={styles.container}>
      <div className={styles.main}>
        <h1 className={styles.title}>Government Savings</h1>
        <div className={styles.content}>
          <h2>State Budget Efficiency</h2>
          <p>Your savings data here...</p>
        </div>
      </div>
    </div>
  );
}

2. Add a link to the header navigation in src/components/Header.tsx

Example: Create a Regulations Page

Create src/app/regulations/page.tsx following the same pattern.

Styling

Styles are organized in the src/styles directory:

• globals.css - Global styles and CSS variables
• Home.module.css - Homepage component styles
• Header.module.css - Header component styles
• Footer.module.css - Footer component styles

Modify these files to match your state's branding or color scheme. The template uses CSS modules for component-scoped styling.

Data Sources

• Start with DOGE Network Tables Repository
• Connect with people on community@dogenetwork.org for ideas
• State government data portals
• Federal transparency databases

Deployment

Vercel (Recommended)

Next.js is built by Vercel and works seamlessly with their platform:

1. Push your code to GitHub
2. Request to be added to the Vercel deployment through community@dogenetwork.org
3. Or deploy yourself:
   • Visit vercel.com
   • Import your GitHub repository
   • Vercel will auto-detect Next.js and configure deployment
   • Your site will be live in minutes!

Other Platforms

This Next.js template can be deployed to:

• Netlify: Connect your GitHub repo and deploy
• AWS Amplify: Use the Amplify console
• Self-hosted: Run npm run build then npm start

File Structure

├── public/                  # Static assets
│   └── doge-network.png     # DOGE Network logo
├── src/
│   ├── app/
│   │   ├── layout.tsx       # Root layout component
│   │   └── page.tsx         # Homepage (customize this!)
│   ├── components/
│   │   ├── Header.tsx       # Site header with navigation
│   │   └── Footer.tsx       # Site footer
│   └── styles/
│       ├── globals.css      # Global styles
│       ├── Home.module.css  # Homepage styles
│       ├── Header.module.css # Header styles
│       └── Footer.module.css # Footer styles
├── next.config.js           # Next.js configuration
├── package.json             # Dependencies and scripts
├── tsconfig.json            # TypeScript configuration
└── README.md                # This file

Development

Available Scripts

• npm run dev - Start development server on http://localhost:3000
• npm run build - Create production build
• npm start - Start production server
• npm run lint - Run ESLint
• npm run format - Format code with Prettier
• npm run format:check - Check code formatting
• npm run typecheck - Run TypeScript type checking
• npm run check - Run all checks (lint, format, typecheck)

Tech Stack

• Next.js 14 - React framework with App Router
• React 18 - UI library
• TypeScript - Type safety
• CSS Modules - Scoped styling
• ESLint - Code linting
• Prettier - Code formatting

Support

• DOGE Network: community@dogenetwork.org
• Documentation: dogenetwork.org/docs
• Community: Connect with other state leads and contributors

License

This template is licensed under Apache 2.0 and CC-BY. See LICENSE.md for details.

---

Built with ❤️ by the DOGE Network community