Random Quote Generator

Overview

A sleek and interactive Random Quote Generator built using React.js, Tailwind CSS, and Framer Motion. It dynamically fetches quotes and displays them with vibrant colors, smooth animations, and easy sharing options.

Key Features

• Dynamic background and text color on each quote
• Randomly fetched quotes
• Fully responsive design (mobile + desktop)
• Smooth animations using Framer Motion
• Share quotes via Twitter/X, WhatsApp or copy it in your clipboard to use elsewhere
• Built-in Speech Synthesis using Web Speech API's SpeechSynthesisUtterance for reading quotes aloud
• Graceful error handling

Tech Stack

• React.js - component-based UI
• Hosting: Vercel
• Tailwind CSS - utility-first styling
• Framer Motion - animations and transitions
• FontAwesome + Lordicon - icons

Getting Started

To view or modify this project locally, follow these steps:

Prerequisites

Ensure you have the following:

• A modern web browser
• A text editor (e.g., VS Code)
• Git installed on your system

Setup Instructions

1. Clone the repository:

   git clone https://github.com/AyushShuklaIIIT/random-quote-generator.git

2. Install dependencies:

   npm install

3. Start the development server

   npm run dev

Live Demo

Experience the live version of the website: (https://random-quote-generator-chi-ruby.vercel.app/)

Learning Goals

This project helped me understand:

• Working with APIs in React
• Managing color schemes dynamically
• Handling asynchronous state and loading
• Creating responsive and animated UI components

Contributing

Have suggestions or want to improve something? Feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License.

Contact

For questions or feedback, feel free to reach out:

• Ayush Shukla: [email protected]
• GitHub: AyushShuklaIIIT