Back
A website for a modern canteen or cafe

A website for a modern canteen or cafe

Project Overview

A website for a modern canteen or cafe, built on a contemporary technology stack. The project combines high performance, ease of content management, and an attractive custom design focused on the end-user.

Tech Stack: Frontend

  • Framework: Next.js 15+ using the App Router
  • Programming Language: TypeScript for type safety
  • Styling: Custom design implemented with CSS Modules (or Tailwind CSS / Styled Components)
  • Rendering: Server-Side Rendering (SSR) and Static Generation (SSG) for key pages
  • Analytics: Yandex.Metrica integration for visitor data collection and analysis

Tech Stack: Backend & Admin Panel

  • CMS/Backend: Strapi 5 (headless CMS with REST/GraphQL API)
  • Database: SQLite for storing content, users, and applications
  • Control Panel: Built-in Strapi admin panel with configured collections and access rights
  • Authentication: JWT tokens for API security

Key User Functionality

  • Home Page: Unique design with key information about the establishment
  • Menu Section:
    • Dynamic display of dishes from the Strapi database
    • Filter for dishes by categories (categories managed via the admin panel)
    • Responsive dish cards with images, descriptions, and prices
  • Blog Section:
    • Server-side rendered articles for SEO
    • Display of article lists and individual entries
    • Clean and semantic URLs (SLUGs)
  • Contact Form:
    • Form for submitting applications (table reservation, callback, question)
    • Data validation on the client and server side
    • Instant notification to Telegram via a bot

Integrations and API

  • Internal API: Creation of endpoints in Strapi for form processing
  • External API: Integration with the Telegram Bot API for sending messages
  • Interaction: The form on Next.js sends data to the Strapi API, which in turn sends a notification to Telegram

Deployment and Server

  • Runtime Environment: The project is deployed on a virtual private server (VPS)
  • Web Server: Configured Nginx as a reverse proxy for Next.js and Strapi
  • Process Management: Process management via PM2
  • Environment: Configuration of environment variables for secure storage of keys and settings
  • Domains: Configuration of domain names and SSL certificates (HTTPS)

Admin Panel (Strapi)

  • Content Management: CRUD operations for menus, categories, blog posts
  • Media Management: Built-in media library for uploading images of dishes and articles
  • Application Management: Viewing applications received from the website in the admin panel
  • Roles & Permissions: Configuring access rights for administrators and content managers
A website for a modern canteen or cafe, built on a contemporary technology stack
Project link
AvatarWebHill