Skip to main content

​
Welcome to Lake Ozark Christian Church

This documentation covers the Lake Ozark Christian Church website, a modern web platform built with Astro, React, and Tailwind CSS. The site serves the Lake Ozark Christian Church community in Lake Ozark, Missouri, providing worship information, community engagement tools, and digital ministry resources.
This project was built by @InactiveBen and is deployed on Vercel. Visit the live site at lakeozarkdisciples.org.

​
What is this project?

The Lake Ozark Christian Church website is a server-side rendered (SSR) web application that combines the performance of Astro with the interactivity of React components. It’s designed to serve both local and remote visitors with location-aware features, liturgical calendar integration, and comprehensive accessibility support.

​
Key features

This platform includes a rich set of features tailored for church ministry and community engagement:

Get started

Set up your development environment and run the site locally in minutes

Components

Explore reusable React and Astro components for forms, banners, calendars, and more

Pages

Learn about the page structure, routing system, and content organization

API reference

Discover the API endpoints for videos, thumbnails, and dynamic content

​
Core capabilities

Server-side rendering with Astro
  • Hybrid rendering with static and dynamic pages
  • SSR for location-based features and API routes
  • Optimized performance with minimal JavaScript
  • SEO-friendly with comprehensive meta tags and structured data
React components
  • Interactive forms (prayer requests, donations)
  • Location-aware content delivery
  • Accessibility menu with customization options
  • Animated marquee testimonials
  • Seasonal banners based on liturgical calendar
Location-based content
  • Automatic visitor location detection
  • Customized content for local vs. remote visitors
  • Privacy-first location permissions
  • Geolocation-aware service information
YouTube integration
  • Automated video fetching from church YouTube channel
  • Custom thumbnail generation and proxy
  • Video gallery with search and filtering
  • Embedded live stream functionality
Liturgical calendar
  • Dynamic seasonal colors and themes
  • Holiday countdown functionality
  • Disciples of Christ liturgical calendar support
  • Automatic seasonal banner display
Forms and engagement
  • Prayer request submission
  • Online donation processing
  • Report issue functionality
  • Newsletter signup
Accessibility features
  • WCAG 2.1 compliance
  • Customizable accessibility menu
  • Font size adjustments
  • High contrast modes
  • Keyboard navigation support
  • Skip to main content links
Blog system
  • Markdown-based blog posts
  • Automatic post listing and routing
  • Social sharing capabilities
  • Featured posts on homepage

​
Technology stack

The project leverages modern web technologies for optimal performance and developer experience: 
{
  "dependencies": {
    "astro": "^5.16.4",
    "@astrojs/react": "^4.4.2",
    "@astrojs/tailwind": "^5.1.5",
    "@astrojs/vercel": "^8.0.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "tailwindcss": "^3.4.17",
    "youtube-sr": "^4.3.12",
    "@joycostudio/marquee": "^0.0.13",
    "@sentry/astro": "^9.46.0"
  }
}
Frontend framework: Astro 5 with server-side rendering
UI library: React 18 for interactive components
Styling: Tailwind CSS with custom brand colors
Deployment: Vercel serverless functions
Monitoring: Sentry for error tracking
Fonts: Google Fonts (Albert Sans, Inter, Gochi Hand)

​
Project goals

This website is designed with several key objectives:
  1. Ministry accessibility - Make church information and resources easily accessible to both local community members and online visitors
  2. Performance - Deliver fast page loads and smooth interactions through SSR and optimized assets
  3. Engagement - Provide interactive tools for prayer requests, donations, and community connection
  4. Accessibility - Ensure all visitors can access content regardless of ability or device
  5. Maintainability - Use modern tools and clear architecture for easy updates and enhancements
This is a production website serving an active church community. Always test changes thoroughly in a development environment before deploying.

​
Next steps

Ready to start exploring? Here’s where to go next:
1

Set up your development environment

Follow the Quickstart guide to clone the repository and run the site locally
2

Understand the project structure

Review the Project structure documentation to learn how the codebase is organized
3

Explore components

Check out the Components overview to see available UI components
4

Learn about pages and routing

Read the Pages documentation to understand how routing works in this Astro project

​
Support and contribution

For issues, questions, or feedback: This documentation will help you understand, maintain, and enhance the Lake Ozark Christian Church website platform.

Build docs developers (and LLMs) love

Get started for freeTalk to us