Pandora

Published on the

Pandora was a virtual learning environment, that I built during years 10 and 11. It was one of the first big projects, I programmed, and in the course of building it, I learned a great deal about server-side programming, HTTP, databases, templating languages, deployment, data serialisation and version control. I wrote numerous versions of the project.

The most recent version of Pandora, a virtual learning environment I made.
The most recent version of Pandora, a virtual learning environment I made.

The client-side was naturally written in HTML, CSS and JavaScript. In the early verisons, there was very little client-side JavaScript, as the server would generate the HTML. In later versions I tried out a new architecture, wherein the server would provide an API to return JSON data, and the client which sent AJAX requests to fetch data and generate HTML. Although this relied heavily on client-side JavaScript, I found that this made development quicker. This was because: - There was a separation of concerns. The server could focus solely as acting as a buffer between the database and the client, with its main priority as security, and client could focus solely on the user interface. - It was easier to create complex user interfaces. An example of this was the form to create quizzes, because all the templates were stored on the client-side, if the user clicked on the new question button, another question subform could be added to the quiz form instantly.

I tended to use Bootstrap as the CSS framework, although in later versions I used SASS as a CSS pre-processor. I began using grunt to compile SASS to CSS, minify JavaScript and compile templates, among other tasks, although later switched to gulp.

On the server-side, I used Node.js, which is a server-side JavaScript environment. Although at the time, I thought the dynamically-typed “loose” nature of JavaScript made development quicker, today I would probably use a typed language. I generally used the express web framework. In my final version, I experimented with Meteor, a JavaScript full-stack web framework, however I grew to dislike its monolithic nature. As I said, in earlier versions, the server generated the HTML and to do this I played around with templating languages such as Jade, EJS, Mustache and Handlebars.

For the database, I used MongoDB, which is a NoSQL database. In some versions, I also used Redis to store data about sessions.

Pandora included features such as quizzes, vocabulary quizzes, blog posts, YouTube integration and rich-text editing. Although the primary objective of creating it was as a learning experience and to experiment, Pandora was used in various classes at school, to test its functionality.

Demonstration of some of the quiz functionality.
Demonstration of some of the quiz functionality.
Demonstration of the quiz results bar chart.
Demonstration of the quiz results bar chart.
Year 10 Summer Holidays version.
Year 10 Summer Holidays version.
Another screenshot from that version.
Another screenshot from that version.
Early Year 10 version.
Early Year 10 version.