📱 More screenshots

Features & Membership	Registration Page	Mobile View

Tech Stack Badges:

Welcome to the East Coast Anglers Club website — a modern, beautifully designed website for freshwater fishing enthusiasts. The site showcases the club's services, introduces fishing guides, displays upcoming events, and provides an intuitive registration flow.

The project was migrated from a legacy Flask + Bootstrap stack to a modern Next.js + Tailwind CSS + shadcn/ui architecture, deployed on Cloudflare Pages for fast global delivery.

	Experience the live site on Cloudflare Pages!

A comprehensive landing page with 8 distinct sections:

• 🏠 Hero Section: Welcome banner with club branding and call-to-action
• ✉️ Registration CTA: Email subscription bar for quick sign-up
• 🃏 Feature Cards: Membership Options, Event Booking, Guide Sessions
• ℹ️ About Section: Club introduction with imagery
• 📅 Events Section: Upcoming fishing trips and workshops
• ❓ FAQ Accordion: Interactive Q&A using shadcn/ui Accordion
• 🎣 Guides Showcase: 4 professional guide profiles with photos
• 📞 Contact Section: Phone, email, and address information

• 🎥 Video Background Login: Full-viewport fishing.mp4 background with darkkhaki color overlay (mix-blend-mode: overlay), translucent form inputs
• 📝 Registration Page: Matching design with username, email, password, and confirm password fields
• 🔗 Cross-linked: Login and register pages link to each other

• 📱 Fully Responsive: Mobile, tablet, and desktop layouts
• 🎨 Modern UI: shadcn/ui components with Tailwind CSS
• 🧭 Mobile Navigation: Sheet-based mobile menu
• ⚡ Static Export: Pre-rendered HTML for instant page loads
• 🌐 Edge Delivery: Cloudflare Pages CDN for global performance

Next.js 16

TypeScript

React 19

Tailwind CSS 4

shadcn/ui

CF Pages

Frontend Stack:

• Framework: Next.js 16 (App Router, Turbopack)
• Language: TypeScript 5
• UI Library: React 19
• Styling: Tailwind CSS 4 + shadcn/ui (based on @base-ui/react)
• Icons: Lucide React + custom SVG icons
• Fonts: Geist Sans & Geist Mono (via next/font/google)

Build & Deployment:

• Output: Static export (output: 'export' in next.config.ts)
• Hosting: Cloudflare Pages (global CDN)
• CLI: Wrangler for deployment
• Build Tool: Turbopack (default in Next.js 16)

Key Dependencies:

• @base-ui/react — primitive components for shadcn/ui v4
• class-variance-authority — component variant management
• tailwind-merge — intelligent Tailwind class merging
• lucide-react — icon library
• tw-animate-css — animation utilities

graph TB
    subgraph "Frontend (Next.js App Router)"
        A[Root Layout - Navbar + Footer] --> B[Landing Page]
        A --> C[Login Page]
        A --> D[Register Page]
    end

    subgraph "Landing Page Sections"
        B --> B1[Hero Section]
        B --> B2[Registration CTA]
        B --> B3[Features Cards]
        B --> B4[About Section]
        B --> B5[Events Section]
        B --> B6[FAQ Accordion]
        B --> B7[Guides Showcase]
        B --> B8[Contact Section]
    end

    subgraph "Build & Deploy"
        E[Next.js Static Export] --> F[out/ directory]
        F --> G[Cloudflare Pages CDN]
    end

    A --> E

fishing-club-project/
├── src/
│   ├── app/
│   │   ├── layout.tsx              # Root layout (Navbar + Footer)
│   │   ├── page.tsx                # Landing page (8 sections)
│   │   ├── globals.css             # Tailwind + shadcn/ui theme
│   │   ├── favicon.ico
│   │   ├── login/
│   │   │   └── page.tsx            # Video background login
│   │   └── register/
│   │       └── page.tsx            # Registration page
│   ├── components/
│   │   ├── ui/                     # shadcn/ui components
│   │   │   ├── accordion.tsx
│   │   │   ├── button.tsx
│   │   │   ├── card.tsx
│   │   │   ├── input.tsx
│   │   │   ├── navigation-menu.tsx
│   │   │   ├── separator.tsx
│   │   │   └── sheet.tsx
│   │   ├── layout/
│   │   │   ├── navbar.tsx          # Fixed top navbar with fish SVG logo
│   │   │   └── footer.tsx          # Copyright footer
│   │   └── landing/
│   │       ├── hero-section.tsx
│   │       ├── registration-cta.tsx
│   │       ├── features-cards.tsx
│   │       ├── about-section.tsx
│   │       ├── events-section.tsx
│   │       ├── faq-accordion.tsx
│   │       ├── guides-showcase.tsx
│   │       └── contact-section.tsx
│   └── lib/
│       └── utils.ts                # cn() class merge helper
├── public/
│   ├── fishing.mp4                 # Video background (2.1MB)
│   ├── shipfishing.svg             # Club logo SVG
│   └── favicon.ico
├── flask_app/                      # Legacy Flask app (archived)
├── app.py                          # Legacy Flask entry point (archived)
├── next.config.ts                  # Next.js config (static export)
├── tailwind.config.ts              # Tailwind CSS config
├── tsconfig.json                   # TypeScript config
├── components.json                 # shadcn/ui config
├── postcss.config.mjs              # PostCSS config
├── eslint.config.mjs               # ESLint config
├── package.json                    # Node.js dependencies
├── CODE_OF_CONDUCT.md
├── LICENSE                         # MIT License
└── README.md

The landing page references external images via CDN:

• cdn.pixabay.com — Fly fishing hero image, fishing trip image, guide profile photos
• th.bing.com — About section lake image

• Node.js 18+ (Download)
• npm 9+ (included with Node.js)
• Git (Download)

1. Clone Repository

git clone https://github.com/ChanMeng666/fishing-club-project.git
cd fishing-club-project

2. Install Dependencies

npm install

3. Start Development Server

npm run dev

🎉 Success! Open http://localhost:3000 to view the application.

npm run dev      # Start development server (Turbopack)
npm run build    # Build static export to out/ directory
npm run start    # Start production server (not used for static)
npm run lint     # Run ESLint

Prerequisites:

• Cloudflare account
• Wrangler CLI (npm install -D wrangler)

Deploy Commands:

# 1. Login to Cloudflare
npx wrangler login

# 2. Build the static site
npm run build

# 3. Deploy to Cloudflare Pages
# Replace ACCOUNT_ID with your Cloudflare account ID
CLOUDFLARE_ACCOUNT_ID=your-account-id npx wrangler pages deploy out --project-name=fishing-club --commit-dirty=true

Current Deployment:

• Production URL: https://fishing-club.pages.dev
• Account: [email protected]
• Account ID: c87dca24333f7ed5d643f731f6308fec
• Project Name: fishing-club

You can also connect the repository directly to Cloudflare Pages for automatic deployments:

1. Go to Cloudflare Dashboard → Pages
2. Connect to GitHub repository
3. Set build command: npm run build
4. Set build output directory: out

We welcome contributions from the fishing and development communities!

1. Fork & Clone:

git clone https://github.com/ChanMeng666/fishing-club-project.git
cd fishing-club-project

2. Create Feature Branch:

git checkout -b feature/amazing-feature

3. Make Changes:

• Follow TypeScript best practices
• Use Tailwind CSS for styling (no inline styles)
• Create modular React components
• Ensure responsive design
• Test on multiple viewport sizes

4. Submit PR:

• Provide clear description of changes
• Include screenshots for UI modifications
• Ensure npm run build succeeds

• TypeScript strict mode enabled
• React functional components with hooks
• Tailwind CSS utility-first approach
• shadcn/ui for reusable UI components
• Lucide React for icons

This project is licensed under the MIT License - see the LICENSE file for details.

Open Source Benefits:

• ✅ Commercial use allowed
• ✅ Modification allowed
• ✅ Distribution allowed
• ✅ Private use allowed

Chan Meng

• LinkedIn: chanmeng666
• GitHub: ChanMeng666
• Email: [email protected]
• Website: chanmeng.org

🎣 Revolutionizing Fishing Club Management 🌟
Bringing fishing communities together through technology

⭐ Star us on GitHub • 📖 Read the Documentation • 🐛 Report Issues • 💡 Request Features • 🤝 Contribute

Made with ❤️ for the fishing community

Chan Meng
Need a custom app like this one? I build them — let's talk.