# ICANCODESCHOOL.com Report

## Analysis
The website is build on top of the framework Drupal and is localized in both English and Dutch. It lacks proper link taxonomy, and does not adhere to the recommended SEO standards. The source code consists of disorganized, clumsy code - *spaghetti code* - which is expected using Drupal as it does not give full oversight nor control due to their templating system. Drupal is a great framework for large projects, however, in case of this project, most of it can be considered bloatware. It is important for a coding school to have a properly coded website. This report focuses on implementation and technicalities, not the design.

### Google PageSpeed Insights

Google PageSpeed Insights is a simple tool that allows you to see how fast your website loads, ranked on a few different categories.

#### Website

#### Mobile

You can view the report live [here](https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Ficancodeschool.com).

### W3C Validator

#### HTML
The HTML W3C Validator analysis found 14 errors and 1 warning.

#### CSS
The CSS W3C Validor analysis found 12 errors and 455 warnings.

## Assessment
Drupal is a great framework for large project, but in this case is appears to bring a huge dip in the performance and control over the source code. It would be better to use something more light-weight as a backened and see if the frontend can be split into a serverless PWA-SPA that can be hosted on Github for free.

## Design Proposal
This report proposes to move away from a full-stack Drupal setup, and split the frontend and backened by utilizing nuxt.js and Ghost respectively. This design will is laid out below.

User->Backend: add content
User->Backend: remove content
User->Backend: update content
Backend-->User: send notifications

Note left of User: admins
Note left of User: editors
Note left of User: teachers
Note left of User: students 

Backend->API: serve content
API-->Backend: request content

API->Frontend: serve content
Frontend-->API: request content
Note right of Frontend: website
Note right of Frontend: mobile app
Note right of Frontend: 3rd party app

### Backend
Ghost is a open source headless Node.js CMS that comes with a simple admin dashboard, content editor, image manager, and API too serve headless content to a serverless single page app (SPA) or progress web app (PWA) written completely in HTML, CSS and JS - giving full control over your website/app.

A benefit from seperating the backened from the frontend, is that you can use the backend as a hub to manage and import data from multiple sources. This data can than be treated and exposed with an API that any website or app can interact with.

For more information check out their [website](https://ghost.org/) and [documentation](https://ghost.org/docs/).

#### Architecture

#### Admin

#### Editor

### Frontend

The frontend will be developed using the framework [nuxt.js](https://nuxtjs.org/) - nuxt.js is a free and open source web application framework based on vue.js, node.js, webpack and babel.js. The framework is advertised as "meta-framework for universal applications", meaning that the frontend can be compiled not only into a mobile app, but also a mobile-desktop friendly website.

The framework completely consists out of HTML, CSS and JS giving full control and making it very lightweight. One of the biggest advantages of this setup is that because it only uses client-side code, it can be hosted "serverless" on GitHub absolutely for free.

## Costs
The costs to setup this proposal is relatively low. It will easy and not time consuming as the design is perfectly fine. On the backened side, what is needed is to setup a server with a ghost setup. Than, we transfer the content from Drupal to Ghost (this can be automated with a script). This is estimated to take up to 10 hours max, depending on the current server infrastructure. If from scratch, less than 3 hours.

Next, we will have to implement the current design with the nuxt.js framework in pure HTML/CSS/JS. This will be the more time-consuming part, but is estimated to not take more than 30 hours maximum - more likely 20.

Excluding the Other Recommendations (below), in total we are looking at a maximum of 40 hours of work - low balling it, 23 hours. The hourly wage would be €55 per hour meaning it would cost between €1265-2200 - a small price if you account for the fact that the frontend will be hosted for free. The backend can run on a €5-10 per month virtual server. Furthermore, your application will work both in a browser, on a phone or can even be compiled into a mobile app.

## Other Recommendations

It is recommended that ICANCODESCHOOL gets an GitHub account with the [organizational plan](https://github.com/pricing). This will allow the school to host their own code and websites, but also offer space for students to upload their code and host it (no FTP needed anymore - serverless hosting is the future).

Teaching git to the pupils is essential value. It will teach them how to work in teams and organize, push, pull, edit, view and host their code. This will also sync the code between any device, allowing students to work at home while also being able to access the code on schools laptops.

GitHub comes with a powerful interface, dashboard and tools to manage, host and review code - the last future can come in very handy - allowing teachers to review and leave comments on pupils code. Teachers can also track pupils activity and progress on GitHub.