East Coast Anglers Club

🎣 East Coast Anglers Club

Comprehensive Fishing Club Website

A modern, responsive fishing club website built with Next.js, Tailwind CSS, and shadcn/ui.
Features a polished landing page, video-background login, and guide showcase.
Deployed on Cloudflare Pages for global edge delivery.

Live Demo · Documentation · Report Issues

Share Project Repository

^{🌟 Revolutionizing fishing club management for the digital age. Built for anglers, by anglers.}

Tip

This is a modern fishing club website showcasing the club's services, guides, events, and membership information with a beautiful, responsive design.

📸 Project Screenshots

Tip

Experience the beautiful, responsive interface designed for fishing enthusiasts.

Main Landing Page - Modern, Responsive Design

Dashboard Overview and Secure Login Interface

Tech Stack Badges:

Important

This project uses a modern frontend stack (Next.js + Tailwind CSS + shadcn/ui) with static export deployed on Cloudflare Pages. It is a frontend-only project with no backend or database — all pages are statically generated.

📑 Table of Contents

TOC

• 🌟 Introduction
• ✨ Key Features
• 🛠️ Tech Stack
• 🏗️ Architecture
• 🚀 Getting Started
• 🛳 Deployment
• 🤝 Contributing
• 📄 License
• 🙋‍♀️ Author

🌟 Introduction

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.

Note

• Node.js 18+ required
• Next.js 16 with App Router and TypeScript
• Tailwind CSS 4 + shadcn/ui for polished UI components
• Static export deployed on Cloudflare Pages

	Experience the live site on Cloudflare Pages!

✨ Key Features

1 Landing Page

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

2 Authentication Pages

• 🎥 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

* Design & UX

• 📱 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

🛠️ Tech Stack

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

Tip

This is a frontend-only static site. No backend server, database, or API is required.

🏗️ Architecture

System Architecture

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

Loading

Project Structure

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

Pages & Routes

Route	File	Description
/	src/app/page.tsx	Landing page with 8 sections
/login	src/app/login/page.tsx	Video background login (display only)
/register	src/app/register/page.tsx	Registration form (display only)

External Resources

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

🚀 Getting Started

Prerequisites

Important

Ensure you have the following installed:

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

Quick Installation

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.

Available Scripts

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

🛳 Deployment

Important

The project is deployed on Cloudflare Pages as a static site.

Cloudflare Pages Deployment

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

Alternative: GitHub Integration

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

🤝 Contributing

We welcome contributions from the fishing and development communities!

Development Process

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

Code Style

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

📄 License

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

🙋‍♀️ Author

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

---