Angular 4 Single Page App demo
Technologies used:
- Angular 4
- Webpack
- SCSS
- Google Books API
A Single Page Application for searching Google Books API written in Angular 4. There are separate environments for testing, development, and production. The goal is to showcase as many of Angular's features as possible, for example routing, animations, feature modules, lazy loading and AoT (Ahead of Time) compilation.
Angular 1 Single Page App Demo
Technologies used:
- Angular 1
- Mongo
- Express JS
An SPA written with Angular 1 taking the theme of an ecommerce site for buying soul records. The user is able to register on the site, sign in, upload an avatar, add products to a cart, and check out (although not actually buy anything!)
WYSIWYG HTML editor
Technologies used:
- Service Workers
- IndexedDB Database
A GUI consisting of an editor pane and a display pane side by side. A user can type html into the editor pane and see the rendered result in the display pane. For images, the user can select an image from the file system to be displayed even without the image existing on a server! This could be useful in a content management system where you want to provide a preview of the users content but you don't want to have to upload an image to a server before the user has confirmed that they want to save their edit.
This works through the magic of service workers. Service workers have the power to act like a proxy server sitting on the browser, able to intercept http requests and serve up whatever response the developer wishes. When the user selects an image from a file picker widget, the image is stored in an IndexedDB database. The editor automatically creates the mark up for the image from user supplied parameters. When the browser then requests the image from the server, the service worker fetches it from the database and returns it.
UML diagram editor
Technologies used:
- SVG (Raphael JS Library)
A browser application for creating and editing UML class diagrams. The GUI features a canvas on which the diagram is displayed, and a menu for selecting different UML elements to add to the diagram, e.g. arrows and class boxes. These elements can be edited within the diagram by clicking and typing, or by dragging.
React SPA
Technologies used:
- React
- ExpressJS
- Webpack
This is a demo single page app for filtering a list of Roman Emperors. It is written in React using Webpack for bundling and transpilation.
Vanilla Javascript
Technologies used:
- HTML/JS/CSS
- ExpressJS
This is the same app as above, but written in purely vanilla Javascript. It features a router and dependency injection system custom written for this project.
Ticket stub
Technologies used:
- HTML/JS/CSS
- SVG
I challenged myself to recreate graphical items using just SVG and CSS. This is a "trompe-l'oeil" image of an old ticket stub. All dimensions are in ems allowing for the object to be scaled by simply setting the font size on the root element. The outline of the card was created with an SVG path. I used a library I created for transforming absolute coordinates into relative ones which allows the path to be scalable.
Custom select box
<p>Native select boxes provide limited hooks for custom styling so I created a custom one. I used this in the Vanilla Javascript SPA discussed above.</p>
Menu bar
<p>A menu bar with nested sub menus which appear on hover. Built with accessibility in mind it uses aria roles and attributes for screen readers and can be accessed using only the keyboard</p>