feedbacky

Node.js, Express.js and React.js app that allows you to send out emails to collect feedback

You can see the LIVE DEMO here.

Source Code

The source code is available at Github.

Tech Stack

Built with

• Node.js with Express layer
• React.js & React Redux
• Redux Form
• Ramda.js
• MongoDB with MongoDB Atlas
• authentication with Google Auth 2.0
• Materialize CSS
• Stripe
• SendGrid
• Heroku

Features

This is a toy app that allows you to make fake payments with Stripe and send out simple email surveys with SendGrid.

The app was coded with the help of Stephen Grider’s Udemy course Node with React: FullStack Web Development.

Differences/enhancements over the course:

• uses Passport-Next fork and Passport-Next Google OAuth 2.0 Strategy instead of the stale upstream repositories (and deprecated G+ auth)
• additional error handling with try/catch for Redux actions
• conditional rendering on the homepage depending on authentication
• protected routes if user is not authenticated
• credits validation (checks if user has credits in their account before showing a new survey form)
• 404 page and client-side “catch-all” routing
• ability to delete surveys
• Metro UI color scheme
• uses Ramda.js instead of Lodash.js

How to Use

Navigate to https://feed-backy.herokuapp.com/ and log in with your Google Account.

You can add credits via Stripe with fake credentials. Click on the blue “ADD CREDITS” button and fill in the pop-up window. Insert a dummy email. The card number is:

4242 4242 4242 4242

Month/Year and CVS: add dummy numbers. Then “pay” \$5.

On the main page of the app, click on “Collect now” and create a fake survey.

The survey will be send via SendGrid and users can click on “yes” or “no”. You can see these in your dashboard.

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

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.

Reason Form

a HTML form with ReasonReact and React hooks

This app displays forms to register or login and validates the input with a custom React hook.

You can see the LIVE DEMO here.

Source Code

The source code is available at Github.

Tech/Frameworks Used

Built with

• ReasonML
• ReasonReact
• Bulma

Tutorials

This repository follows my process of learning ReasonReact:

• Learning ReasonReact Step by Step Part: 0
• Learning ReasonReact Step by Step Part: 1
• Learning ReasonReact Step by Step Part: 2
• Learning ReasonReact Step by Step Part: 3
• Learning ReasonReact Step by Step Part: 4
• Learning ReasonReact Step by Step Part: 5
• Learning ReasonReact Step by Step Part: 6
• Learning ReasonReact Step by Step Part: 7
• Learning ReasonReact Step by Step Part: 8
• Learning ReasonReact Step by Step Part: 9
• Learning ReasonReact Step by Step Part: 10

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)

Reason Music Player

a browser-based music player written in ReasonReact with the useContext hook

A music-player in the browser that allows you to play music tracks.

You can see the LIVE DEMO here.

Source Code

The source code is available at Github.

Tech/Frameworks Used

Built with

• ReasonML
• ReasonReact
• Bulma

Tutorials

I wrote about how to build this app:

• How To Create a Music Player in Reason With The useContext Hook Part 1
• How To Create a Music Player in Reason With The useContext Hook Part 2
• How To Create a Music Player in Reason With The useContext Hook Part 3
• How To Create a Music Player in Reason With The useContext Hook Part 4