React

Below are some projects I've written using the React library.

Most of the apps run using Babel, so you can easily view the code.

react logo

React Examples

Interactive examples of React code.
react logo

Redux Examples

Interactive examples of Redux code.
web log logo

PERN Server Log demo

Fullstack app that records your IP and User Agent and shows you the last 10 entries.

Node/Express HTTP Headers

Shows a list of various values that your browser sends to this server.

Postgres Datatypes

A full stack PERN app that demonstrates the available datatypes.

MySQL Frontend

A full stack MERN app that allows you to create and edit databases, tables, records and fields on a MySQL server.
API

Public APIs

Browse public APIs via api.publicapis.org.
color band

Color Band

Try different color band formulas.
chesskers

Chesskers

Easy, chess-like game.
arc icon

SVG Arc Generator

Manipulate an arc path in SVG.
font icon

Font Preview

Preview given text in a variety of fonts and styles.
french doors outline

French Doors Colorizer

We installed some French doors and I wanted to experiment with color combos.

Calendar Component

Click to see next or previous months.
draw svg icon

Draw SVG Paths

Draw an SVG path and copy the generated code.
resize icon

Convert & Resize SVGs

Convert SVGs to PNG and resize them for app store listings.
TicTacPawn icon

Tic Tac Pawn

Simple board game with pawns.

Big Timer

Stopwatch/timer with large SVG digits.
metric quiz

Metric Quiz

Test your ability to convert between metric and imperial measurements.
circuit

Circuits

Circuits rendered with hooks.
SVG turbulence filter

SVG Turbulence Filter Generator

Create your own SVG turbulence filter and see it in action.
SVG turbulence filter

SVG Cubic Bezier Path Generator

Create your own cubic bezier curve and see it in action.
connected graph

Connected Points

Build and manipulate a web of connected points in SVG.
helium

Atom Renderer

Render atoms with a slider.

Calculator

Small project to learn about the useReducer hook.
switches icon

Binary Switches

A demonstration of binary switches and digits written with React.
abacus

Abaci

An interactive abacus and soroban in React.
pointer events

Pointer Events

App that responds to mouse and touch events.
pointer coordinates

Pointer Coordinates

Show values returned from mousedown and mousemove events.

Colored Squares

Just some colored squares in a grid with useState hooks.

Buttons and Lights

Buttons and lights which can affect each other.

Moving Squares

Several components which react to mousedown and mousemove events with useEffect.

Moving SVGs

Move SVG elements around with a mouse.
hexapawn

Hexapawn

A 3x3 chess game invented by Martin Gardner in 1962.
knife switch

Switches

An attempt at simulating circuits in React with ref callback methods.