Rodney Jan Mandap

This is a Next.js project bootstrapped with create-next-app.

Build

Features

Getting Started

Prerequisites

Installation

  1. Clone the repository:
git clone https://github.com/rodneymandap/rodneymandap.github.io.git
cd rodneymandap.github.io
  1. Install dependencies:
npm install
# or
yarn install
  1. Set up environment variables:

Copy .env.example to .env.local and configure:

cp .env.example .env.local

Edit .env.local with your settings:

# Required: Get your API key from https://resend.com/api-keys
RESEND_API_KEY=re_your_api_key_here

# Optional: Email where contact form submissions will be sent
CONTACT_EMAIL=your-email@example.com

# Optional: The "from" email address (must be verified in Resend)
FROM_EMAIL=onboarding@resend.dev

# Optional: Enable auto-reply to form submitters
SEND_AUTO_REPLY=false

Running Development Server

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

Contact Form API

The contact form API is available at /api/contact. It accepts POST requests with the following body:

{
  "name": "John Doe",
  "email": "john@example.com",
  "projectType": "Web Development",
  "message": "Your project details here..."
}

Features:

Testing

Run the test suite:

npm test
# or
yarn test

Run specific tests:

npm run test -- __tests__/contact.test.ts

Building for Production

npm run build
# or
yarn build

This builds the app for production with support for API routes as serverless functions.

Important: This project uses Next.js API routes for the contact form. Do NOT use next export as it creates a static site without API route support, which will cause the contact form to fail with 405 errors in production.

Deployment

The easiest way to deploy is using the Vercel Platform:

  1. Push your code to GitHub
  2. Import the project on Vercel
  3. Add environment variables in Vercel dashboard:
    • RESEND_API_KEY
    • CONTACT_EMAIL
    • FROM_EMAIL (optional)
    • SEND_AUTO_REPLY (optional)
  4. Deploy - Vercel will automatically detect Next.js and deploy API routes as serverless functions

Deployment Notes:

Troubleshooting:

Check out the Next.js deployment documentation for more details.

Environment Variables Setup in Vercel

  1. Go to your project settings on Vercel
  2. Navigate to “Environment Variables”
  3. Add the following variables:
Variable Description Required
RESEND_API_KEY Your Resend API key from resend.com/api-keys Yes
CONTACT_EMAIL Email address to receive contact form submissions Yes
FROM_EMAIL Sender email address (must be verified in Resend) No (defaults to onboarding@resend.dev)
SEND_AUTO_REPLY Set to true to send auto-reply to submitters No (defaults to false)

YNAB MCP Server

The YNAB MCP endpoint is available at /api/ynab-mcp. It is designed for personal AI clients and keeps the YNAB token server-side.

Required Vercel environment variable:

Variable Description Required
YNAB_CLIENT_ID OAuth application client ID from YNAB Developer Settings Yes for multi-user OAuth
YNAB_CLIENT_SECRET OAuth application client secret from YNAB Developer Settings Yes for multi-user OAuth
YNAB_REDIRECT_URI OAuth callback URL Recommended
UPSTASH_REDIS_REST_URL Persistent OAuth token store URL Yes for production OAuth
UPSTASH_REDIS_REST_TOKEN Persistent OAuth token store token Yes for production OAuth
YNAB_ACCESS_TOKEN Owner-only fallback personal access token from YNAB Developer Settings Optional
MCP_API_KEY Owner-only fallback shared secret Optional
YNAB_API_BASE YNAB API base URL No (defaults to https://api.ynab.com/v1)

See docs/ynab-mcp.md for setup and provisioning steps.

Security Features

The contact form includes several security measures:

  1. Rate Limiting: Prevents abuse by limiting submissions to 3 per hour per IP address
  2. Honeypot Protection: Hidden field that bots typically fill out, humans don’t see
  3. Input Validation: Both client-side and server-side validation
  4. Input Sanitization: Removes HTML tags to prevent XSS attacks
  5. CORS Protection: API route only accepts POST requests

Project Structure

.
├── pages/
│   ├── api/
│   │   ├── contact.ts     # Contact form API endpoint
│   │   └── hello.ts       # Example API route
│   ├── _app.tsx           # App component with analytics
│   └── index.tsx          # Main landing page with contact form
├── components/
│   └── email-template.ts  # Email template (if needed)
├── __tests__/
│   ├── contact.test.ts    # API endpoint tests
│   └── navigation.test.jsx
├── .env.example           # Environment variables template
└── README.md

API Routes

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

License

This project is open source and available under the MIT License.