Michael Varnell

Front End Software Developer

Because it isn't work, when it is your
PASSION.

My Projects

AI Integrated React Application

Full Stack Application

I have been working with people learning code for a couple years now, and the one complaint I get constantly is that they can't find enough practice problems that work fundamentals at a basic level, and that the sites that they try are too complicated and intimidate them. I set out to make it simpler. I also integrated a back end running on my own server to handle the API calls to prevent the risk of getting malicious code injected. This was a learning experience all the way around, and one that I can't wait to do again! Enjoy the site!

OpenAI React Vite Express tailwind css pm2 logo JavaScript HTML5 CSS3
CodeProblems Site Logo
HelpMockIt Logo

React & Express API Mocking Application

Full Stack Application

This project is truly a labor of love. After working with aspiring coders for a couple of years, I've often heard the same frustration: the difficulty of mocking API calls without incurring costs. I set out to simplify this process. By integrating a backend running on my own server, I've enabled users to dynamically add endpoints and handle API calls with ease. This journey has been a valuable learning experience, and I'm excited to apply what I've learned in future projects. Enjoy exploring the site!

This is currently offline due to VPS bandwidth.

React Website with API Database

Full Stack Application

Welcome to Help Code It—an innovative platform co-created by Matthew Cox and myself, designed to revolutionize coding education. Built with React and React Router, our user-friendly website ensures seamless navigation and responsiveness on any device. Our goal is to bridge the gaps in coding knowledge by offering a wealth of resources and an exciting interactive practice component currently in development. This feature will empower learners to apply their skills in real-time directly on our site. At Help Code It, we're not just teaching coding; we're crafting an engaging and transformative learning journey for every aspiring developer.

The repository for this site is not public.

React Vite tailwind css Express JavaScript React Router HTML 5 CSS 3
helpcodeitlogo

15th Place Townhome

Dog Park Title Pawprint

React Application

Full Stack Application

This code creates a React app with multiple components for creating and managing appointments for dog owners. The Entry component is a form where dog owners can input their name, their dog's name, and an appointment date. The Schedule component displays a table of existing appointments and allows users to edit or delete appointments. The app uses useState hooks to manage user input and display updates. There is a calendar library used to display when appointments are scheduled for and multiple alerts for various conditions base of time and appointment. The code includes functions for formatting dates and sorting appointments by time. This also connects to a PHP backend that stores the appointments in a MySQL database.

React React Router TypeScript JavaScript PHP MySQL Apache HTML5 CSS3 Bootstrap

React Application

Front End Application

This is a mock storefront created to showcase my unique style and sense of humor, as well as demonstrate a complex React application. The website offers various features such as the ability to add items to a virtual shopping cart, view previous orders made on the site, and navigate through dynamic product pages using React Router. The website was developed with the use of MockAPI.io as the backend.

React JavaScript React Router HTML 5 CSS 3 Bootstrap

Welcome to Fake Store

Front End Application

Where Everything is Fake, and Your Money isn't Any Good.

MOVIE PROJECT

React Application

Front End Application

The objective of developing this React application was to showcase the retrieval of data from distinct components and utilizing them for enabling user input and rating. Through this project, I gained significant insights into website structuring and the benefits of component reusability, which I previously underestimated.

React JavaScript HTML5 CSS3 Bootstrap

JavaScript Hangman Game

This project started as a way to entertain my son, who was eager to use my new keyboard. To give him a reason to type, I set up a quick game of hangman on a Google Doc, which he enjoyed. As I developed my skills in DOM manipulation, I decided to transform the simple JavaScript prompt-based game into a full-fledged web-based game. The result has been impressive - my coworkers, including my manager, have spent hours playing it. In the game, one player chooses a word while the other guesses. Try it out and discover why my son thinks I am awesome for creating it!

javascript logo html5 logo css3 logo bootstrap logo

Hangman

A Snowday Production

Hangman