Table of Contents

• Deutsche Internationale Schule Pretoria (Main Website)
  • Overview
  • Notable Features
    • Application Form
    • Calendar
    • Internationalisation
    • Downloads
    • Tuckshop Menu
    • Admin Section and Blogs
    • Contact Form

Deutsche Internationale Schule Pretoria (Main Website)

Overview

Deutsche Internationale Schule Pretoria main website is written in Vue.js and Tailwind CSS and hosted locally on a Linux server.

Built with a focus on performance, internationalization, ease of use, and future scalability in mind.

You can write blog posts and manage some website content through the admin section, which is secured behind Firebase authentication.

Website is integrations with Airtable, Firebase, WebUntis and Google Calendar.

The website is currently being migrated to Nuxt.js for improved performance, scalability, and most importantly, SEO.

Notable Features

Application Form

Form allows parents to apply their children to the school.

Airtable is used as a backend to store the data, once the form is submitted, an email is sent to the school administrator through Airtable automation.

Admission officer will manage the rest of the application process through Airtable.

Image from Airtable

Image from Website

Calendar

Calendar synced with WebUntis.

WebUntis is a complete school management system developed in Germany.

Image from Website

Internationalisation

Toggle allows the user to instantly switch between English or German version of the website.

No need to refresh the page, the language is switched instantly.

Image from Website

Downloads

All documents on this page are stored and managed from Firebase Storage.

School Books Orders and Stationery List section are managed from Airtable.

Image from Airtable - School Books Orders and Stationery List section

Image from Website

Tuckshop Menu

Old Tuckshop Menu was a PDF file, which was uploaded to Firebase Storage every month.

New Tuckshop Menu is managed from Airtable by the retail department, any changes to the menu will be reflected on the website instantly.

Parents access the menu through a shared Airtable link.

Image from Website - New and Old Tuckshop Menu

Image from Airtable - New Menu

Image from Airtable - New Menu Management Portal

Admin Section and Blogs

Admin section is behind Firebase authentication, once logged in, the user can write new blogs posts and manage some content stored in Firebase Storage.

Images are stored in Firebase Storage and linked to the blog post.

Editor converts rich text content to HTML and stores it in Firebase. when displaying the blog post to the user the html is styled using Tailwind CSS.

Image from Website - Sign In Page

Image from Website - Blog Create Page

Image from Website - List of Blog Posts

Image from Website - Single Blog Post

Contact Form

Submitted data is captured in Airtable and an email is sent to the school administrator through Airtable automation.

Image from Airtable

Image from Website