ci: Add Random Quote Generator with tsParticles Background and FreeAPI Integration #294
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
✨ Random Quote Generator – Pull Request
🔗 Live Website: Random Quote Generator
🛠 Tech Stack
⚡ Vite + React – For a fast, modern frontend setup
🎨 Tailwind CSS – For effortless and responsive styling
🌌 tsParticles – For interactive background animation
🌐 FreeAPI – Fetching quotes using
getQuoteById
endpoint🌟 Features
✅ Responsive Design – Works seamlessly across all devices
🧠 Animated Abstract Background – Adds a dynamic and modern visual experience
🎯 Attractive CTA Button – Gradient styled “Get Inspired!” button to fetch quotes
📜 Clean Typography – Quotes are displayed in a legible and aesthetic format
🔄 Dynamic Quote Fetching – Utilizes async API calls with robust error handling
🖼️ Screenshots
📦 Improvements Included
Refactored the
getQuote
function for better readabilityAdded
.env
handling to abstract API URLsClean separation of logic and styling
🙌 Why This PR Should Be Merged
This PR is a complete, polished, and deploy-ready component of the application.
It demonstrates strong fundamentals of React, API integration, environment variable handling, and modern UI design with Tailwind CSS + tsParticles.