A mobile-first React web app that determines a user’s mood based on their recently played music on Spotify.

This past February, I built Mood Ring. It examines a user’s recently played songs on Spotify using the Spotify API and tries to guess that user’s mood.

After sharing it with some friends and posting it online and I’m happy to say it has attracted over 3000 users from 15+ countries.

Recently, I’ve been working with a client who wanted to increase the performance of their site. They are a platform for exchanging cryptocurrency and their interface was taking too long to load, creating a poor user experience.

The first time I learned Redux… I didn’t like it. My projects were getting bigger and I could see the advantage of having a place to store data globally, but setting it all up felt a bit tedious and overcomplicated.

In a large way, this was because I was using Redux the only way I had been taught, using connect and mapStateToProps. With that method, objects from the store are called in a mapStateToProps function and then added as regular props for the component. …

There are a few options for actually getting your projects online (Heroku and Netlify are two other big names) but I’ve been using Vercel for hosting all my personal projects. It’s fast, free, works great with React, and the setup just takes a second.

Step 1. Initialize a Git Repository

If you haven’t already, you’ll need to add your web app to a repository on GitHub. Vercel will communicate with that repository directly and you’ll eventually be able to:

1. Create both preview and production builds of your app
2. Push changes directly to either build automatically

Step 2. Linking With Vercel

Strava is one of the most popular social media platforms for both runners and cyclists, but the documentation for their extensive public API is a bit lacking for JavaScript developers. This is the tutorial I wish I had.

The Objective:

Create a simple React web app with a Strava login that you can use as a jumping-off point for your own project.

You’ll have a home page that can authenticate a user and a “logged-in” page where you can return information about their Strava activities.

What We’ll Use:

We’ll build this project with React, React-Router, and Redux for simple state…

Chrome extensions are a useful way to personalize your browser experience and making your own is a great weekend project for beginner and experienced programmers alike.

The Basics

In this tutorial, we’ll walk through a simple extension that will help automate a simple task on Reddit. After selecting any subreddit, our extension will give the option to launch a new tab directly to that subreddit’s Top Posts of All Time.

You’ll need an updated version of Spark AR (an augmented reality studio created by Facebook), a question picture that asks a variation of “Which ____ are you?”, and a list of pictures for the result.

My version of the project is on Github here. Borrow from it however you want.

Part One: Setup in Spark AR

Adding Textures

After opening a blank project in Spark AR, the first thing we’ll need to do is add our pictures. You will need one picture with your “Which ____ are you?” question, and then however many results you want to include.