PinApathy

A Pinterest.com clone built with React on an Express back-end. Authentication by Passport.js using both local and 3rd party oath2, Mongoose and MondoDB as the database, hosted on Mlab.

pins in masonry style layout
The react-masonry package works to animate items efficiently into place in a way that is not possible with just css

The app replicates Pinterest’s masonry layout using react-masonry, allowing cards to create that cobblestone look, slotting into one another. Pins can be re-pined by new users, added to boards and have likes and comments posted.

The front-end was built using React-Router for pagination and to split the various aspects of functionality.

an individual pin in full-screen
An open pin with it’s source link credited and some comments underneath

The name was a joking placeholder on the observation that Pinterest’s once usable format was heavily modified and moved from it’s original format in the name of increased advertising and ‘engagement’. “Interest” meaning more click through’s instead of meaningful curation is replaced with “Apathy”.

user homepage
A user’s home page showing their boards and the three most recent pins

Straw Pole App

A relatively early project, a full MEEN stack (Mongo, Express, EJS, Node) app to allow users to post poles with simple, bold visualisations displayed to others.

list of open polls
The landing page listing active polls

The app used an Express server with Passport.js for authentication and followed strict CRUD principles in the route layouts. Pages were templated from EJS partials and bootstrapped using Semantic UI. Poll results were visualised using D3.js.

a sign in form with styling from semantic-ui
Login modal using Semantic UI for the first time

This was a good project for feeling out if a CSS framework was something I’d like to use more of going forward (nope as it turns out) and developing clean code practices.

a poll voting screen
Another, larger poll with custom option capability

For instance, at the time I didn’t use Mongoose promises and was not yet using ES6 syntax so there’s a lot of ‘pyramid code’ yet the app is still clearly readable, something to perhaps take on board given that some later projects, while far superior on a technical count, are difficult to reverse engineer.

a code snippet
An example of callback-based Mongoose leading to pyramiding; every nested callback adding to the indentation