Herman's Modern Bakery - Next.js

A modern Next.js website for Herman's Modern Bakery, featuring the latest technologies including WorkOS AuthKit, Convex, and Tailwind CSS.

Features

• 🍰 Modern Design: Beautiful, responsive design with Tailwind CSS
• 🔐 Authentication: Secure authentication with WorkOS AuthKit
• 📱 Responsive: Mobile-first design that works on all devices
• 🗺️ Interactive Map: Google Maps integration for location
• 🎠 Carousel: Interactive menu carousel with auto-slide
• 🖼️ Gallery: Photo gallery showcasing the bakery
• ⚡ Fast: Built with Next.js 15 and optimized for performance

Tech Stack

• Framework: Next.js 15 (App Router)
• Styling: Tailwind CSS
• Authentication: WorkOS AuthKit
• Database: Convex (ready for integration)
• Icons: Lucide React
• TypeScript: Full type safety

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• WorkOS account
• Convex account (optional)

Installation

1. Clone the repository

   git clone <repository-url>
   cd hermans-nextjs

2. Install dependencies

   npm install

3. Set up environment variables

   Create a .env.local file in the root directory:

   # WorkOS AuthKit Configuration
   WORKOS_API_KEY='your_workos_api_key_here'
   WORKOS_CLIENT_ID='your_workos_client_id_here'
   WORKOS_COOKIE_PASSWORD="generate_a_secure_password_here_at_least_32_characters_long"
   
   # Configured in the WorkOS dashboard
   NEXT_PUBLIC_WORKOS_REDIRECT_URI="http://localhost:3000/callback"
   
   # Convex Configuration (optional)
   # CONVEX_DEPLOY_KEY="your_convex_deploy_key_here"
   # NEXT_PUBLIC_CONVEX_URL="your_convex_url_here"

4. Set up WorkOS AuthKit

   • Sign up for a WorkOS account
   • Create a new project in the WorkOS dashboard
   • Enable AuthKit in your project
   • Configure the redirect URI: http://localhost:3000/callback
   • Copy your API key and Client ID to the environment variables

5. Generate a secure cookie password

   openssl rand -base64 32

   Copy the output to WORKOS_COOKIE_PASSWORD in your .env.local file.

6. Run the development server

   npm run dev

7. Open your browser Navigate to http://localhost:3000

Project Structure

hermans-nextjs/
├── src/
│   ├── app/
│   │   ├── callback/          # AuthKit callback route
│   │   ├── login/             # AuthKit login route
│   │   ├── globals.css        # Global styles
│   │   ├── layout.tsx         # Root layout with AuthKit provider
│   │   └── page.tsx           # Home page
│   ├── components/
│   │   ├── Navbar.tsx         # Navigation component
│   │   ├── Header.tsx         # Hero section
│   │   ├── FoodItems.tsx      # Menu section
│   │   ├── Carousel.tsx       # Menu carousel
│   │   ├── Gallery.tsx        # Photo gallery
│   │   ├── Map.tsx            # Location map
│   │   └── Footer.tsx         # Footer component
│   └── data/
│       └── cafe.json          # Menu data
├── public/
│   └── assets/                # Images and static assets
├── middleware.ts              # AuthKit middleware
└── tailwind.config.ts         # Tailwind configuration

Authentication Flow

This project uses WorkOS AuthKit for authentication:

1. Sign In: Users visit /login to be redirected to WorkOS AuthKit
2. Callback: After authentication, users are redirected to /callback
3. Session Management: AuthKit handles session management automatically
4. Protected Routes: Use the withAuth function to protect routes

Example: Protected Route

import { withAuth } from '@workos-inc/authkit-nextjs';

export default async function ProtectedPage() {
  const { user } = await withAuth({ ensureSignedIn: true });

  return (
    <div>
      <h1>Welcome, {user.firstName}!</h1>
    </div>
  );
}

Customization

Colors and Styling

The project uses a custom color palette defined in tailwind.config.ts:

• Background: #FCF4E0 (cream)
• Brand: #f11a23 (red)
• Primary: #f91944 (pink-red)

Fonts

The project uses custom fonts:

• Poppins: Main body text
• Dela Gothic One: Headings and branding
• Caveat: Decorative text

Menu Data

Update the menu items in src/data/cafe.json to customize the weekly specials.

Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add your environment variables in the Vercel dashboard
4. Deploy!

Other Platforms

The project can be deployed to any platform that supports Next.js:

• Netlify
• Railway
• DigitalOcean App Platform
• AWS Amplify

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is licensed under the MIT License.

Support

For support with:

• WorkOS AuthKit: WorkOS Documentation
• Next.js: Next.js Documentation
• Tailwind CSS: Tailwind Documentation
• Convex: Convex Documentation

---

Built with ❤️ for Herman's Modern Bakery