My Logo

Projects

001

This Portfolio Website

In some ways, more complex than a portfolio needs to be, but this became a playground for me to experiment with new ideas and skills. Take a deeper look into what went into the making of This Portfolio Website.

    Concepts used:
  • Next.js App Router
  • React Client Components
  • TailwindCSS
  • SSR
  • Reponsive UI
  • FlexBox
  • Grid

    • 002

    React Router Blog

    Using a JSON Server, I created a basic blog that allows users to create new posts, update current ones, and search posts. Note - In production, this uses a small JSON Server database with a max character limit, so data changed will not persist.

      Concepts used:
  • React Router
  • API Fetch Requests
  • Async Functions
  • Database Actions/Mutations
  • JSON Server
  • Axios
  • Loaders

    • 003

    useRef Form

    This basic login form checks for specific validation. The form also shows error messages next to the inputs every time the form is submitted, if there are any.If the form submission is succesful, you will see an alert for success. This particular version of the form implements the useRef hook.

      Concepts used:
  • useRef Hook
  • useState Hook
  • Basic Form Validation
  • Multiple useStates
  • Event Listeners

    • 004

    useState Form

    This basic login form checks for specific validation. The form also shows error messages next to the inputs every time the form is submitted, if there are any. If the form submission is succesful, you will see an alert for success. This particular version of the form implements the useState hook.

      Concepts used:
  • useState Hook
  • useMemo Hook
  • Basic Form Validation
  • Multiple useStates
  • Event Listeners
    • Programming, Weight Lifting

    005

    Custom Hook - useLocalStorage

    My useLocalStorage hook is built using useState, useEffect, and a custom hook to save items in local storage.

      Concepts used:
  • Custom React Hook
  • Local Storage
  • useState Hook
  • useEffect Hook
    • 1, 2, 3

    006

    Custom Hook - useArray

    My useArray hook is built using a number of useCallback hooks to manipulate the state of the array.

      Concepts used:
  • Custom React Hook
  • Array Manipulation
  • useCallback Hook

    • Loading...

    007

    Custom Hook - Fetch

    Using React, I created a custom hook specifically for handling fetch requests from the JSON Placeholder API.

      Concepts used:
  • Custom React Hook
  • Fetch API
  • useEffect Hook
  • useCallback Hook
  • Loading States
  • Error States

    • User Data

    Loading user data...

    008

    Basic Fetch

    Using useEffect and the Fetch API, I created a Basic Fetch Request from the JSON Placeholder API.

      Concepts used:
  • Fetch API
  • useEffect Hook
  • JSON Placeholder
  • Loading States
  • Error States

    • 0

    My name is and I am 0 years old.

    009

    UseEffect

    In this project, multiple useEffect Hooks are used to change the text as well as the document title.Give it a try by typing in a name and you'll see it at the top.

      Concepts used:
  • useEffect on Children
  • useEffect Hook
  • Document Interaction
  • useState
  • Conditional Rendering
    • Simple Counter

    0

    Change On Input

    0

    My name is Kaleb and I am 0 years old

    Single Array State

    SamKalebAlexSean

    Mult. Array States

    A, B, C











    010

    Basic useState Projects

      Concepts used:
  • Next.Js
  • TailwindCSS
  • Dynamic Routes

    • 011

    My First React Project

    Using React and MaterialUI, I created a basic player bio page for NBA players based on JSON Data.Hooking up tables to populate with player data was a great intro to using a component library with React.

      Concepts used:
  • MaterialUI Components
  • Reusable React Components
  • Conditional Rendering
  • Filtering JSON Data

    • 012

    Date Picker

    Using the Date-FNS library, I created a date picker that allows you to change months, and displays current date.

      Concepts used:
  • Date-FNS Library
  • Date Formatting
  • Modals
  • Conditional Rendering