shmmy Freshers' Guide

Web app that renders the wiki page of a student-written freshers' guide in a modern and easily navigable UI.

I built this project as a developer in shmmy, a student community in the School of Electrical and Computer Engineering of NTUA.

shmmy hosts a MediaWiki-based wiki where students collaborate to write guides for courses, tracks, and life in university in general, a part of which is the Freshers' Guide for first-year students.

Some key features of the app are:

• The long text of the guide is split into "slides" for easy reading.
• Handy sidebar navigation.
• Intuitive keyboard navigation.
• Button to quickly edit the content.
• Instant content updates via a custom webhook installed on the wiki.

Technical overview

Backend

• Mostly written in vanilla PHP .
• Twig provides the templating engine.
• FastRoute is used as a minimal request router library.
• simplehtmldom is an HTML DOM manipulation library that is employed to parse the wiki content.
• Composer manages the package dependencies.

Frontend

• Custom theming with vanilla CSS .
• Vanilla JS is used to implement the interactive components.
• Pjax offers a snappy browsing experience by loading pages via AJAX.
• Parcel serves as the build tool.

Also, swipe-listener is used to detect swipe gestures, and a11y-dialog for creating accessible dialog windows.

Tooling

• Docker deployment is supported with a custom multi-stage Dockerfile that builds an Apache-based container.
• A Bash script is used to initialize the Docker container.