Random Quote Generator

A React application that fetches and displays random quotes. It includes features to filter quotes, favorite the ones you like, and download them as images.

I originally built this to practice React state management and Canvas API integration. The codebase uses standard React patterns—functional components and hooks—without over-complicating the architecture.

Features

• Generates quotes with color-coded backgrounds based on the quote text.
• Image export (using html2canvas) so you can save quotes locally.
• A favorites list to keep track of the quotes you want to revisit.
• A search bar to find specific quotes.
• A particle background effect (because plain colors are boring).

Setup

You need Node.js installed.

1. Clone the repository.
2. Run npm install.
3. Run npm start to open it in your browser.
4. Run npm run build to create a production bundle.

Technical Details

The app uses jsdom for testing, which occasionally threw errors when parsing the Canvas elements used by the particle background. I fixed this by adding null checks to the context initialization, avoiding crashes in headless environments. The image download uses a solid background instead of a transparent one to ensure it renders correctly regardless of the user's system theme.