Modern Cafe Website & Management Dashboard
OmahKopi78 is a comprehensive web application built for a modern cafe. It provides a beautiful public-facing website for customers to explore menus, facilities, and make reservations, alongside a secure administrative dashboard for staff to manage cafe operations and content dynamically.
- Dynamic Menu Showcase: Customers can browse food and beverage menus categorized logically.
- Facility & Gallery Exploration: View cafe facilities and aesthetic spots.
- Online Reservations: A seamless booking system for reserving tables.
- Blog & Contact: Keep customers updated with news and provide easy ways to reach out.
- Secure Authentication: Protected admin routes powered by Clerk.
- Menu Management: Complete CRUD operations for menu items and menu categories.
- Facility & Spot Management: Add, edit, and manage cafe facilities and gallery images.
- Reservation Handling: Manage available reservation tables and bookings.
- Media Uploads: Built-in file upload API for managing images dynamically.
The project follows an organized Astro architecture with API endpoints and React integrations:
📦 omahkopi78
┣ 📂 public/ # Static assets (images, fonts, CSS, Sass, JS)
┣ 📂 src/
┃ ┣ 📂 components/ # Astro & React UI components (Public & Admin)
┃ ┣ 📂 layouts/ # Shared layouts (BaseLayout, AdminLayout, LoginLayout)
┃ ┣ 📂 lib/ # Utility functions (MySQL DB connection setup)
┃ ┣ 📂 pages/ # Astro pages routing
┃ ┃ ┣ 📂 admin/ # Protected admin dashboard pages
┃ ┃ ┣ 📂 api/ # Backend API routes (upload, menu, facility, reservation)
┃ ┃ ┗ 📂 ... # Public pages (index, menu, facility, reservation, blog)
┃ ┗ 📜 middleware.ts # Clerk authentication middleware
┣ 📜 astro.config.mjs # Astro configuration
┣ 📜 package.json # Project dependencies
┗ 📜 .env # Environment variables
| Category | Technology |
|---|---|
| Framework | Astro |
| UI Library | React |
| Database | MySQL (via mysql2) |
| Authentication | Clerk |
| Styling | Custom CSS / Sass |
| SEO | astro-seo, @astrojs/sitemap |
Follow these instructions to set up the project locally.
- Node.js (v18 or above recommended)
- MySQL Database running locally or remotely
- npm or pnpm installed globally
-
Clone the repository:
git clone https://github.com/manry-hub/omahkopi78.git cd omahkopi78 -
Install dependencies:
npm install # or pnpm install
Create a .env file in the root of your project and configure your Database and Clerk API keys:
# Database Configuration
DB_HOST=your_db_host
DB_USER=your_db_user
DB_PASSWORD=your_db_password
DB_NAME=your_db_name
# Clerk Authentication Keys
PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_keyStart the Astro development server:
npm run dev
# or
pnpm dev- Public Site: Navigate to http://localhost:4321 (default Astro port)
- Admin Panel: Navigate to
http://localhost:4321/admin
© 2026 OmahKopi78