Dad vs AI

Overview

For this project, I created Dad vs AI, an interactive web app where users guess whether a joke was written by a dad or generated by AI. The app combines playful design, frontend development using Vue.js, and backend data management with a custom-built REST API.

The project focused on delivering a smooth, animated experience with real-time feedback using GSAP and AJAX. Users can browse, and contribute jokes, all within a responsive single-page interface.

Problems

1. Dynamic Game Flow: The game needed to smoothly transition between jokes, animate each reveal, and track scoring in real time without reloading the page.

2. Asynchronous Data Handling: Fetching jokes, loading joke details, and updating the joke list on the fly - all needed to work fluidly without breaking the UI.

3. Responsive Layout: Designing an interface that worked seamlessly from mobile to desktop required thoughtful layout and interaction planning.

4. User Contributions: Implementing a joke submission system meant building forms with error handling, validation, and instant database updates via the API.

Research

I researched casual game interfaces like Sporcle to shape the interactive flow. I also reviewed joke formats and tone, comparing AI-generated humor with dad jokes to ensure the jokes felt believable and the game was challenging.

Process

1. Planning & Concept Development: I mapped out the game flow and UI components using Figma. I also set up the project structure for Vue and designed the backend database schema.

2. Frontend Development: Built the guessing game in Vue.js using the Options API. Used GSAP’s TextPlugin to animate joke delivery and transitions. Developed a responsive layout with Sass, with visual feedback for game results and scoring.

3. Backend Development: Created a custom Lumen REST API with endpoints to fetch jokes, get joke details, and submit new entries. Populated the MySQL database with a mix of dad jokes and AI-generated content.

4. AJAX & State Management: Used Fetch API to handle asynchronous data retrieval and updates. Managed component states like loading, score tracking, and modal displays for joke details.

5. Animations & Feedback: Implemented GSAP for smooth entrance/exit animations and joke reveal effects. Included loading states and error messages for better UX.

The final Dad vs AI project resulted in a playful, engaging app with these core features:

• Responsive Joke Guessing Game: Users guess the origin of jokes, get immediate feedback, and watch their scores update in real time.

• Dynamic Joke Library: Browse jokes in a responsive grid layout, with animated modals to view joke details.

• User Submission System: Visitors can add new jokes via a form that connects directly to the database.

• Custom REST API: API endpoints support dynamic content fetching and updates, enabling a seamless user experience.

• Polished Interactions: GSAP-enhanced animations bring energy to the interface and transitions.

Reflection

The Dad vs AI project was a great chance to combine my technical skills and creativity. It gave me the opportunity to work with Vue.js, build a custom API, and handle real-time data, all while making the game fun and interactive. Key takeaways:

• Gained hands-on experience with Vue.js and its reactive features

• Built a custom REST API with Lumen and MySQL

• Improved my real-time data handling with AJAX and the Fetch API

• Overcame challenges in synchronizing dynamic content and ensuring smooth gameplay

This project pushed me to apply what I’ve learned and I’m proud of the polished, fun result that blends both frontend and backend work.