Project Gallery

an app designed for keeping recipes in one easy to manage place

Recipe Keeper

Jamstack: ReactJS, FaunaDB, Netlify

Styled to look like a notecard, this web-app allows the user to add new recipes and save them for quick and easy retrieval later. The recipes can be sorted by category, edited, deleted and new ones added. A loading screen may appear to allow for the promise to be fulfilled to reduce the chance of errors.

a game with purple and yellow circles to be dropped down six columns in an attempt to connect four of the same color circles in a row

Connect Four

JavaScript, SCSS, HTML

A classic game gone digital: Connect Four! This game is vanillaJS; it uses the forEach method and a While loop to check if the player has connected four of their pucks. A small checkmark moves (via a ternary operator) to let the players know whose turn it is, while a timer displays the game length.

a grey and purple memory card game that has three different selections for setting up the game, start and reset buttons, and a timer and score that both show zeros. There are five columns, four rows of purple cards waiting to be flipped.

Memory Game

Jamstack: ReactJS, FaunaDB, Netlify

A memory card game with three truly challenging decks! The challenging games don't have identically matching cards, making pairing the cards rather arduous. The colors deck is made up of pairs consisting of a color swatch, and the HEX for the color. The math deck has different equations to be matched to their answers. The coding deck has programming logos to match to the text name.

a grey background with six square, lavender notes. Each has icons in the lower right corner to edit and erase the note, and the date the note was created in the lower left corner.

Notes Keeper

Jamstack: ReactJS, FaunaDB, Netlify

This project was created to learn how to build a Jamstack web-app with ReactJS, Netlify and FaunaDB. It is a CRUD app: it makes API calls to the database to create, read, edit and delete the notes. A loading screen runs when the read function is called as to prevent load errors. The character count relies on the useState Hook to update, the icons are the react-icons package.

an app titled `race pace calculator` that is lavender and purple with various input fields

Race Pace Calculator

ReactJS (various Hooks), SCSS

This web-app allows a user to determine their pace to achieve their desired finishing time. The user enters a race distance, selects if it is kilometers or miles, and then inputs the time they want. Then the calculator displays the minute per km/mi required to achieve the goal, no math needed!

a frequently asked questions page with three questions listed, it has a white background and purple questions.

Accordion FAQ

JavaScript, HTML, SCSS

A pure JavaScript project, this is an accordion style FAQ that is responsive and accessible. It was created to strengthen my vanillaJS skills and to be the subject of a series of blog posts.

a grey, purple and yellow clone of a popular word game called Wordle.

Wordle

JavaScript, SCSS, HTML

My first attempt at cloning a popular app! This version of Wordle uses an API to get the random, five letter words the user is trying to guess. It was created following a tutorial; several changes were made including allowing for use of mouse or keyboard, and making the gameboard responsive. I also added a key so users know what the various colors indicate. Another deviation is that my version doesn't use any middleware: the API key isn't secure, but it is capped, so at most a wordle cannot be fetched.

a grey gameboard with three options for card amounts, a start and reset button, and a timer and score both showing zeros.

Simple Memory Game

ReactJS (various Hooks), SCSS

A simpler memory card game, the version that came before the more complex one. It was made with the useState, useEffect and useRef Hooks. It has a timer that starts with the game, a reset button and three different card amounts to choose from. When clicked, the user sees the cards flip over to reveal the fronts, and if they don't match, the cards return to being face-down.