Functional Movie Search

a frontend example app built with functional principles in mind - without a framework like React & Redux.

The LIVE DEMO is hosted on Github Pages. You can search for movie titles by typing into the search bar and submitting your search.
The app will query the Open Movie Database.
Click on an image to see more information (leads to the IMDB Website).
If no image is available, you’ll see a cute kitten.

Source Code

The source code is available at Github.

Tech Stack

• ES2015+
• virtual-dom
• hyperscript-helpers
• Ramda
• minireset.css
• Tachyons
• Open Movie Database
• PlaceKitten
• Github Corners
• Webpack & webpack-dev-server

Face Recognition Brain

a Face Recognition app

Usage

Go to the LIVE DEMO and register a new user.

Sign in with your new credentials.

In the search bar enter the URL of an image with a face and click “Detect”. The app will recognize the face and paint a blue box around it (currently only recognizes one face).

The app will show a running number of your submission entries.

Motivation

The source code is available at Github: Frontend and Backend.

Tech/Frameworks Used

Built with

• React
• Tachyons
• Clarifai
• Node
• Express
• PostgreSQL

Markdown Preview

with Reagent, Shadow-cljs and Clojurescript

Go to the LIVE DEMO.

How to use

Just type text in markdown format into the textfield. The preview updates automatically.

Motivation

The source code is available at Github.

Tech/Frameworks Used

Built with

• Clojurescript
• Reagent (React Wrapper for Clojurescript)
• shadow-cljs (Clojurescript Compiler)
• react-markdown
• Tachyons

Further Reading

I wrote a blog post about this project where I explain the code.

URL Shortener React

a URL Shortener written in React that uses the Rebrandly API

You can shorten an URL by typing into an input field. Check out the LIVE DEMO.

Source Code

The source code is available at Github.

Tech/framework used

Built with

• React
• Particles.js for React
• Tachyons CSS
• Rebrandly API

The app uses Typechecking with PropTypes and the State React Hook.

Breaking Bad Quotes

With Clojurescript + Reagent

A simple web app that displays random quotes from the TV-series “Breaking Bad”. You can ask for new quotes or tweet the current quote.

You can see the LIVE DEMO here.

Source Code

The source code is available at Github.

Tech/Frameworks Used

Built with

• Clojurescript
• Reagent (React Wrapper for Clojurescript)
• shadow-cljs (Clojurescript Compiler)
• Breaking Bad Quotes API
• Wing CSS
• Foundation Icons

Tutorials

I wrote about how to build this app on my blog in two posts:

• Tutorial: Clojurescript App With Reagent For Beginners, Part 1 (local development of the app)
• Tutorial: Clojurescript App With Reagent For Beginners, Part 2 (deployment to Firebase)