• Data Handling: Handled API requests using fetch and Vue Query (TanStack), with caching methods like useQuery, prefetchQuery, and invalidateQueries.
• Component Styling: Used ShadCN for Vue as the base for components, along with Tailwind CSS for simple and responsive styling.
• Loading State: Added skeleton loaders for joke cards to improve user experience during API calls or retries.
• Pagination: Added server-side pagination and connected it to the front-end.
• Favorites Management: Created and connected favorite/unfavorite endpoint.
• Sorting: Added sorting options for ascending or descending order based on joke titles.
• Error Handling: Included a toaster to show error messages when users hit API limits.

Install the required dependencies by running:

cd ui && npm install

To start the development server with hot-reload:

cd ui && npm run dev

Install the necessary dependencies by running:

cd api && npm install

Start the backend development server with automatic restarts using nodemon:

cd api && npm run dev