JokeFetch

JokeFetch is a full-stack React and Node.js application that fetches and displays random jokes from an external API. It features a clean UI built with shadcn/ui and a resilient Express.js backend that acts as an API proxy.

🚀 Features

• Random Jokes: Fetches and displays random two-part jokes via a GET /api/joke endpoint.
• Resilient API: Includes a hard-coded fallback joke in case the external v2.jokeapi.dev fails, ensuring the app always has content.
• Modern UI: Clean, modern, and responsive interface built with shadcn/ui and Tailwind CSS.
• Fast Development: Integrates Vite's development server directly into the Express app for a seamless Hot Module Replacement (HMR) experience.
• Client-Side Caching: Uses TanStack Query (React Query) to efficiently cache API responses.
• API Logging: Custom middleware logs API requests, responses, and performance.

🛠️ Tech Stack

Frontend

• Framework: React 18 with TypeScript
• Build Tool: Vite
• Server State: TanStack Query (React Query)
• Routing: Wouter
• UI: shadcn/ui & Radix UI
• Styling: Tailwind CSS

Backend

• Runtime: Node.js
• Server: Express.js
• Schema Validation: Zod
• Data Source: v2.jokeapi.dev (External API)

🏗️ How It Works

This application runs as a single, unified Node.js server.

1. Backend API: The Express server defines a GET /api/joke endpoint. When called, it fetches a joke from the external v2.jokeapi.dev API, validates the response with Zod, and sends it to the client.
2. Frontend Serving:
   • In Development: The Express server uses Vite as middleware to serve the React app, enabling Hot Module Replacement.
   • In Production: The Express server serves the pre-built, static files from the server/public directory.
3. Stateless Design: The application is stateless and does not require a database. All content is proxied from the external API.

🏃 Getting Started

Prerequisites

• Node.js (v18 or later)
• npm or yarn

Installation & Running

1. Clone the repository:

   git clone [https://github.com/your-username/jokefetch.git](https://github.com/your-username/jokefetch.git)
   cd jokefetch

2. Install dependencies:

   npm install

3. Run in Development mode:

   • This will start the server with Vite HMR.

   npm run dev

4. View the app:

   • Open your browser to http://localhost:5000.

Building for Production

1. Build the client:

   npm run build

   (This script should run Vite to build your client app into the server/public directory.)

2. Run in Production mode:

   • This will serve the static files and API.

   npm start

⚙️ Configuration

The server port is configured using an environment variable. Create a .env file in the root of the project:

# The port the server will listen on.
# Defaults to 5000 if not specified.
PORT=5000