Joke Collection App

A Vue 3 app that lets users fetch, view, and manage their favorite jokes — with category switching, localStorage persistence, star ratings, filtering, sorting, and discreet punchline effects.

Live Demo

👉 Joke Collection App

Features

• Fetch random or programming jokes via API
• Reveal/hide punchlines
• Add/remove jokes from favorites
• localStorage persistence for favorites
• Star rating system (1–5 ⭐)
• Search through favorites
• Filter favorites by rating
• Sort favorites alphabetically or by rating
• Display statistics (total + average rating)
• Fully responsive UI (TailwindCSS)
• Hover-to-reveal punchlines in favorites

Tech Stack

• Vue 3
• Vite
• TailwindCSS

API

This project uses the Official Joke API by 15Dkatz.

Setup Instructions

1. Clone the repo:

git clone https://github.com/Raulanthropos/vue-jokes-app.git
cd vue-jokes-app

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

4. Open in browser:
   http://localhost:5173

Folder Structure

├── src/
│   ├── components/
│   │   ├── JokeCard.vue
│   │   └── FavoritesList.vue
│   ├── composables/
│   │   └── useJokes.js
│   ├── App.vue
│   └── main.js
├── tailwind.config.js
└── index.html

Notes

• All joke data is fetched from Official Joke API.
• This project is built using the Composition API.
• localStorage is used to persist your favorites even after a refresh or revisit.
• Although I’m familiar with TypeScript, I chose not to use it in this project as I haven’t worked with it recently.