The Giggle Garden

Giggle Garden is an application where you can see many different, funny jokes. You can filter the jokes based on the cathegories "Spooky", "Christmas" and "Programming". You can also add jokes to a personal list of favorites.
We hope you have a giggle.

Running the project

The application is visible on http://it2810-12.idi.ntnu.no/project1/ (when using NTNU-network or VPN).

If you want to install the project from your computer, clone as normal and then write the following in the terminal:

cd prosjekt1
npm install
npm run dev

If the webpage doesn't open automatically, copy the link from the terminal (starting with http://localhost:..) and paste in browser.

Technology

Technologies used are mainly TypeScript, React, CSS and HTML. Prettier and ESlint is used to maintain code quality.

REST API

The application is based on a REST API called JokeAPI, here is the documentation: https://jokeapi.dev/.

We used TanStack Query to manage the API data fetching efficiently. Using TanStack Query’s useQuery hook, we were able to cache jokes and handle loading states.

We had to make some decisions when implementing the REST API, based on two key challenges we encountered:

1. The API allows fetching a maximum of ten jokes per request. This required us to make multiple requests when fetching more than ten jokes at a time.

2. The joke IDs within the first 318 jokes are scattered and not sequential. For example, there are only ten Christmas jokes and ten Spooky jokes, with IDs distributed randomly throughout the range. This randomness meant we couldn't simply take a range of consecutive numbers to fetch ten jokes from the same category. This also meant incrementing them directly when changing slides would not work.

To address these challenges…

• we decided 30 was a good number, so we developed the fetchAllJokes(), which uses fetchJokesByCategory (category, batchSize, rangeStart, rangeEnd) to gather exactly ten jokes from each category.

• we also created a predefined list of valid joke IDs (that eventually got split into two lists: slideshowIDs and inUseIDs), so that we could use it to change slides. Since the IDs are non-sequential, incrementing them directly when changing slides would not work.

Testing

To run the tests, write npm test in terminal. You will now see all the tests passed (or failed) along with a coverage report.

We've chosen to prioritize testing on the key components, to make sure the building blocks work as intended, specifically JokeCard, FavoritePage and SlideShow. As per now, the coverage is high on these components. If given more time we would expand our testing to cover functions used in App.tsx, such as the filtering functionality.

Design choices

Since our application contains a limited number of jokes, we found it simpler to keep everything on a single page to limit unnecessary navigation. This includes the slideshow, the scrollmenu and the favorites list.

Due to the limit of number of jokes, the favorited jokes are easy find in the main joke list, so we've decided to only allow unfavoriting directly from the JokeCard itself, and not the FavoritePage