A modern web application that delivers random jokes from multiple sources while tracking user engagement through an interactive scoring system. Built with TypeScript, Vite, and a hybrid styling approach combining Tailwind CSS with SCSS architecture.
- Multi-Source Jokes - Alternates between two public APIs to provide diverse joke content
- Interactive Scoring - Rate jokes on a three-point scale with optional voting, visual state persistence, and toggle deselection
- Live Weather Widget - Displays real-time Barcelona weather using wttr.in API
- Engagement Tracking - Automatically logs user ratings with ISO timestamps for analytics
- Responsive Design - Centered grid layout that adapts seamlessly to different screen sizes
- Comprehensive Testing - 34 tests covering API calls, DOM manipulation, business logic, and user interactions
- TypeScript - Type-safe development with strict mode enabled
- Vite - Lightning-fast build tool with Hot Module Replacement
- Tailwind CSS v4 - Utility-first CSS framework for structural layout
- SCSS - 7-1 architecture pattern for refined visual styling
- Vitest - Modern testing framework with happy-dom environment
- Testing Library - User-centric testing utilities for DOM interactions
SPRINT-4/
├── src/
│ ├── scss/
│ │ ├── abstracts/
│ │ │ ├── _index.scss
│ │ │ ├── _mixins.scss
│ │ │ └── _variables.scss
│ │ ├── base/
│ │ │ ├── _index.scss
│ │ │ ├── _reset.scss
│ │ │ └── _typography.scss
│ │ ├── components/
│ │ │ ├── _buttons.scss
│ │ │ ├── _index.scss
│ │ │ └── _weather-widget.scss
│ │ ├── layout/
│ │ │ ├── _containers.scss
│ │ │ └── _index.scss
│ │ └── main.scss
│ ├── test/
│ │ ├── api.test.ts
│ │ ├── display.test.ts
│ │ ├── helpers.ts
│ │ ├── interaction.test.ts
│ │ ├── scoring.test.ts
│ │ └── setup.ts
│ ├── main.ts
│ └── style.css
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── vitest.config.ts
- Node.js v22.20.0 or higher
- npm v11.6.2 or higher
Clone the repository and install dependencies:
git clone <repository-url>
cd SPRINT-4
npm installStart the development server with hot reload:
npm run devNavigate to http://localhost:5173 to view the application.
Run the test suite in watch mode:
npm run testLaunch the interactive test UI:
npm run test:uiGenerate coverage reports:
npm run test:coverageCreate an optimized production build:
npm run buildPreview the production build locally:
npm run previewThe project employs a hybrid approach that leverages the strengths of both Tailwind CSS and SCSS. Tailwind handles structural layout concerns like grid positioning, flexbox alignment, and responsive spacing through utility classes. SCSS manages visual refinement including colors, shadows, transitions, and component-specific styling through the 7-1 architecture pattern that organizes styles into abstracts, base, components, and layout folders.
The application maintains state through module-scoped variables that distinguish between temporary state like the current joke and score being viewed, and permanent state like the accumulated array of finalized joke reports. This separation ensures that user interactions remain fluid and modifiable until explicitly committed when advancing to the next joke.
Tests focus on four categories of functionality: asynchronous API calls that fetch data from external services, DOM manipulation functions that update the user interface, pure business logic that manages the scoring system, and user interactions that combine DOM manipulation with state management. Each test category uses appropriate helpers and mocks to create isolated, deterministic test environments that verify behavior without external dependencies.
- icanhazdadjoke.com - Primary source for jokes in plain text format
- Official Joke API - Secondary source providing setup/punchline structured jokes
- wttr.in - Weather data for Barcelona without requiring authentication
Sergio Morey
- IT Academy Barcelona Student
- Frontend Development Specialization
This project was created as part of the IT Academy Barcelona curriculum for educational purposes.
🛠️ Built using modern web technologies