CarHub
Utilizing NextJS 13 with SSR, ReactJS, Typescript, and Tailwind CSS.
Utilizing NextJS 13 with SSR, ReactJS, Typescript, and Tailwind CSS.
Browser-based trivia app utilizing the Open Trivia Database. I created a custom React Hook called useTrivia in which I make a call to the Open Trivia API using the Fetch API to access the questions. useTrivia allows us to load a question accordingly to a selected category. To randomize the questions I'm using the shuffle() method from Lodash. An improvement would be utilizing local storage and sign-in to allow session tracking.
This is a simple, Browser-based Roshambo game that pits the user against the computer *cough* Math.random() *cough*. It tracks wins, losses, the user's choice, the computer's choice, and game state using the useState Hook. The game state refreshes with the useEffect Hook. I use conditional logic that uses properties of the different choices available; namely, rock, paper, and scissors.
This app uses the Unsplash API to dynamically load images. It uses a package called the react-infinite-scroll-component to continuously load images on scroll. This project was a bit of stretch for me in using the useCallback Hook for performance improvements as well as using the useEffect Hook to negotiate multiple and semi-complex state scenarios.
This app displays the power of React Props and State. I'm using useState to obtain and set the searchfield value, and, subsequently, actively find and display relevant information cards. I'm also using the fetch API within useEffect to call for data to display on the information cards. This project was a refactor of an older project. I replaced Life Cycle Methods with React Hooks.
A simple Pomodoro Timer that also tracks the number pomo sets you do. Built in ReactJS, it uses useState to adjust the timer, set counter, and the dynamic titles. It also uses useRef to make the buttons functional.
A very rudimentary Markdown note taking app built in ReactJS. It uses the react-markdown NPM Package and plugs in the useState React Hook to set the state of the textbox with what the user types in the editor.
Built in ReactJS, this is a sample of navigation tabs and a neat hover interaction. It uses react-router-dom to navigate between the different components. The hover effect is accomplished using useState to keep track of where the mouse is located when hovering over a tab.
A list of SpaceX Launches using their API to display images of launches, launch names, launch details, and links to launch videos. It's built in Angular using Typescript. It's not my forté, but it was a fun project.
If you'd like to partner with me on a project, talk about code, or talk about life, please feel free to write to me using the form below. I look forward to hearing from you. Cheers!