Skip to content
RUNNERS.BD Site
← All projects
webdevelopment2026

RUNNERS.BD Site

Bangladesh's running community platform — discover events, share gear reviews, write training plans, connect with fellow runners, and stay up to date with the latest running news.

Live site ↗

Overview

RUNNERS.BD is a full-stack web application built for the running community in Bangladesh. It provides a central hub for runners to:

  • Discover local races and community events

  • Read and write gear reviews

  • Create and share training plans

  • Publish blog posts and running stories

  • Stay up to date with curated running news

  • Find and connect with other runners

  • Receive community newsletters

The platform uses a four-tier role system (User, Contributor, Moderator, Admin) so that content quality is maintained while the community can grow organically.

Features

Public Pages

Home Page

  • Hero section with smooth auto-cycling background image slideshow (5-second intervals, 1.5s crossfade, 50% opacity) loaded from Supabase Storage

  • Headline: "More Than Running — It's a Community." with Bangla tagline "বাংলার পথে, আমাদের দৌড়"

  • Next 3 upcoming events sorted by date (regardless of featured status)

  • Featured blog posts grid

  • Latest Highlights strip — three-column section showing the most recent event, most recent blog post, and most recent news article

  • Latest News section — displays up to 3 most recent published news articles with "All News" link

Events

  • Upcoming running races and community events across Bangladesh

  • Event cards with cover images, dates, locations, distances, and organizer info

  • Event detail pages with full descriptions and registration links

  • Cover image drag-to-reposition — focal point saved as CSS object-position and applied on the detail page

Running News

  • Admin-curated news articles about the running community in Bangladesh

  • Cover image with drag-to-reposition focal point control

  • Tags, excerpt, and view count on each article

  • Article detail pages with social share buttons (Facebook, X, WhatsApp, copy link)

  • Public listing at /news; latest article featured in the home page highlights strip

Blog

  • Community-authored articles, race reports, and running stories

  • Full Unicode / Bangla language support — titles, content, and tags

  • Tag-based filtering

  • Author profiles shown on each post

  • Rich text content with images and YouTube video embeds (Tiptap editor)

  • Inline image upload directly from local device (max 5 images per post, auto-resized to ≤1MB and ≤800px)

  • Cover image drag-to-reposition — focal point saved per post and applied on detail pages

  • Social share buttons: Facebook, X (Twitter), WhatsApp, and copy link

  • Email notifications: post authors receive an email when someone comments on or karma-rates their post

Gear Reviews

  • Reviews of running shoes, apparel, gadgets, nutrition, and accessories

  • 1–5 star ratings with structured pros and cons

  • Category filtering

  • Buy links for reviewed products

  • Email notifications: review authors receive an email when someone karma-rates their content

Training Plans

  • Community-shared training programs for all distances (5K → Ultra)

  • Difficulty levels: Beginner, Intermediate, Advanced

  • Filter by difficulty level and target distance

  • Visual week-by-week schedule builder

  • Per-day breakdown: run type, distance, and notes

  • Follow Plans — logged-in users can follow any plan created by another runner

Contact

  • Contact form at /contact — name, email, subject, message

  • Sends enquiry to info@runners.bd with the sender's email as Reply-To

  • Auto-reply confirmation email sent to the submitter

  • Link in Footer under Quick Links

Patron / Support System

  • Public support page at /support with community-driven copy, monthly progress bar, and tier cards

  • Four contribution tiers: Supporter (৳100), Patron (৳300), Champion (৳1,000), Legend (৳5,000)

  • Custom amount donation via /donate

  • Secure payment via SSLCommerz (bKash, Nagad, Rocket, VISA/Mastercard)

  • Server-side IPN validation — payment is only confirmed after SSLCommerz server-to-server callback

  • Patron badge displayed on runner profiles and dashboard

  • Anonymous donation option for donor wall

  • Thank-you page with badge reveal after successful payment

  • Confirmation email to donor + admin notification via Amazon SES

Runner Directory

  • Browse the full community of registered runners

  • Filter by name or username

  • Profile pages with bio, city, weekly mileage, favorite distance, and social links (Strava, Instagram)

Dashboard (Authenticated Users)

  • Overview — personal stats (posts, reviews, plans, profile views), recent activity feed

  • Profile Editor — edit name, bio, avatar, city, running history, weekly km, social links; avatar is resized client-side to a maximum of 400px on the longest side (JPEG, 0.88 quality) before upload

  • Personal Bests — record your best times for 5K, 10K, 21.1K, Marathon, and Ultra; one PB per category; edit at any time; displayed on your public runner profile

  • My Posts — manage your blog posts (draft/published)

  • My Reviews — manage your gear reviews

  • My Training Plans — manage your own created training plans (edit, delete, toggle public/private)

  • Plans I Follow — separate section listing all training plans you follow from other creators, with one-click unfollow

  • Contributor Application — regular users can apply for Contributor access with a written reason; shows pending/denied status

  • Settings — manage account preferences including newsletter subscription opt-in/out

Admin Panel

Accessible to Admin and Moderator roles (with scope restrictions detailed in the roles section below). Includes a responsive mobile slide-in drawer navigation on small screens.

  • Dashboard — site-wide stats: total users, posts, upcoming events, gear reviews; recent signups; unpublished content queue (Admin only)

  • Events — create, edit, and delete running events; set cover images with drag-to-reposition focal point; set featured status (Admin and Moderator)

  • News — create, edit, delete, and publish/draft running news articles; cover image upload with drag-to-reposition; tag management; rich text editor with YouTube embed support (Admin only)

  • Patrons — view all donations with status, amount, payment method, and transaction ID; monthly progress vs goal; all-time total (Admin only)

  • Users — browse all registered users; change any user's role (User / Contributor / Moderator / Admin) via dropdown (Admin only)

  • Contributor Applications — review pending applications with approve/deny actions; tabs for pending, approved, and denied (Admin only)

  • Content Moderation — publish or unpublish posts and gear reviews (Admin only)

  • Hero Images — upload and delete hero section background images; maximum 5 images enforced (oldest auto-deleted on new upload) (Admin only)

  • Hero Content — edit all hero section text fields (badge, headline, accent, subtitle, tagline, CTA buttons) without touching code (Admin only)

  • Newsletter — compose and send newsletters to all subscribed users; toggle sections (blog posts, news, reviews, training plans); stats panel showing subscriber count, total sends, and last send date; full send history log (Admin only)

Newsletter System

  • Users opt in via Dashboard → Settings (explicit opt-in, GDPR-friendly default off)

  • Every registered user gets a permanent unsubscribe token on account creation

  • Each newsletter email contains a one-click unsubscribe link (/unsubscribe?token=...) — no login required

  • Admin composes newsletters from Admin → Newsletter:

    • Subject line and optional preview text (shown in inbox before opening)

    • Toggles for which sections to include: Latest Blog Posts, Running News, Gear Reviews, Training Plans

    • Pulls the 3 most recent published items per selected section automatically

    • Sends from newsletter@runners.bd via Amazon SES

    • Rate-limited batch delivery (10 per batch, 200ms delay) to stay within SES limits

    • Records each send with subject, recipient count, included sections, and timestamp

  • Email design: branded 600px template with dark #1A1A2E header, orange gradient subject banner, card-based content sections, and a branded footer with unsubscribe and manage-preferences links

Rich Text Editor (Tiptap v2)

Used in blog post creation and news article creation. Toolbar features:

  • Bold, Italic

  • Headings (H1, H2, H3)

  • Blockquote, Code block

  • Hyperlinks

  • Insert image from URL

  • Upload image from device (auto-resized, max 5 per post)

  • Embed YouTube video — paste any YouTube URL; renders as a responsive 16:9 iframe in both the editor and published content

  • Bullet list, Ordered list, Horizontal rule

  • Undo / Redo