Minimalist Chuck Norris Jokes Fetcher

Published on Thu Mar 20 2025

Written by Nacho Consolani

Live Demo

GitHub Repository

Project Overview

The Minimalist Chuck Norris Jokes Fetcher is a lightweight web application designed to fetch random Chuck Norris jokes from an external API. It also allows users to save their favorite jokes to a local collection using the browser’s local storage.

This project was built with a focus on simplicity, performance, and user experience. The app is hosted on Vercel and is fully responsive, ensuring a seamless experience across devices.

Key Features

• Fetch random Chuck Norris jokes with a single click.
• Save your favorite jokes to a local collection.
• View, rate, and delete jokes from your collection.
• Persistent state management using local storage.

Technical Highlights

Ad-hoc OOP-Oriented State Management

One of the core challenges of this project was implementing a state management system that leverages the browser’s local storage. To achieve this, I designed an Object-Oriented Programming (OOP) approach for managing the jokes collection. Here’s how it works:

• Encapsulation: The state management logic is encapsulated within a JokeCollection class, ensuring a clean separation of concerns.
• Persistence: The LocalStorageJokeCollection class interacts with the browser’s local storage to persist the jokes collection across sessions.
• Reactivity: The app uses React’s state and effects to synchronize the UI with the local storage state.

Example Code

export class LocalStorageJokeCollection {
  private collection: Joke[] = [];

  constructor(private storageKey: string = "jokes") {
    const storedData = localStorage.getItem(this.storageKey);
    if (storedData) {
      this.collection = JSON.parse(storedData);
    }
  }

  addJoke(joke: Joke) {
    if (!this.collection.find((j) => j.id === joke.id)) {
      this.collection.push(joke);
      this.save();
    }
  }

  removeJoke(jokeId: string) {
    this.collection = this.collection.filter((j) => j.id !== jokeId);
    this.save();
  }

  getJokes(): Joke[] {
    return [...this.collection];
  }

  private save() {
    localStorage.setItem(this.storageKey, JSON.stringify(this.collection));
  }
}

This approach ensures that the jokes collection is always in sync with the local storage while maintaining a clean and testable codebase.

Lessons Learned

• OOP for State Management: Using OOP principles for state management provided a robust and scalable solution for this project.
• Local Storage: Leveraging the browser’s local storage is a simple yet effective way to persist data in small-scale applications.
• React Integration: Combining React’s state management with local storage required careful synchronization to avoid inconsistencies.

Future Improvements

• Add user authentication to sync collections across devices.
• Implement advanced filtering and sorting options for the jokes collection.
• Enhance the UI/UX with animations and transitions.

This project was a fun and educational experience, showcasing how modern web technologies can be used to build simple yet powerful applications. Check out the live demo and feel free to explore the GitHub repository for more details.