GateArch Website (Design Document)

◴ 17 May 2023 | ☕ 13 mins

Github Source Code

🗨️ Overview

GateArch is a platform where students can register to study better in preparation for architecture-related exams. People who run the website handcraft posts, and tests to provide these to students to help them before they actually go for a real exam. This means the environment must be as similar as possible to get them familiar with this process.

Software Stack
FrontendBootstrap, Vuejs, ChartJS, jQuery
Versioning/ManagementGit and GitHub
Package ManagementComposer
Hardware Stack
Storage40 GB NVME SSD
OSUbuntu 18.04

🛡️ Why this stack?

Before I start describing the application and process, Here is the reason why all the above choices in the stack were made.

🛠️ Architectural Strategy

The entire Application was divided into 4 parts as follows

SectionFunctionWhat was used
The Front PageLanding Page anyone can see went they visit the website, this also houses the blog section which can be updated by the admin of the websiteLaravel Server Rendered and bits of javascript for interactivity
Admin PanelThe admin panel is used by Website administrators and Teachers to manage the website and manage exams etcSanjab Component Package for defining the dashboard
Student PortalThe student portal is where students can log in, read articles, purchase exams, and view exams and their results alongside ranking among the studentsBootstrap, and Laravel to render pages and javascript for bits of interactivity
Exam PortalAlthough it looks like it’s part of the student portal, it’s entirely its own Vuejs application to manage complex states during exams, a SPA-like behavior was neededLaravel to initial render and hydrating Vuejs App

📄 The Front Page

Front Page How it works

🪟 Admin Panel

Admin Panel How it works

Admin Panel Widgets How it works

🧑‍🎓 Student Portal

📝 Exam Portal

Admin Panel Widgets How it works

🚚 Deployment & Maintenance

While creating this entire project Congnimize LLC and I was in a constant feedback loop. And I always helped them to flush ideas into the website they wanted.