Skip to content

README.md

Latest commit

 

History

History
171 lines (125 loc) · 3.45 KB

README.md

File metadata and controls

171 lines (125 loc) · 3.45 KB

🎯 Random Quote Generator

A modern Random Quote Generator built with React, TypeScript, Vite, and Tailwind CSS.
The application displays randomly selected quotes with a clean, responsive, and fast user interface.

This project emphasizes clean architecture, type safety, and scalable project structure, making it suitable for learning, experimentation, and portfolio use.

🚀 Live Demo

Deploy this project to see it live!
You can deploy it using Vercel, Netlify, or any other hosting platform.

🛠️ Tech Stack

  • Framework: React
  • Language: TypeScript
  • Bundler: Vite
  • Styling: Tailwind CSS
  • Deployment: Vercel

✨ Features

  • 🎲 Generate a random quote on each button click
  • 🧠 Quotes managed in a structured, type-safe way
  • ⚡ Fast development and build times with Vite
  • 🎨 Responsive and minimal UI using Tailwind CSS
  • 🧩 Clean and scalable folder structure
  • 🔒 Full TypeScript type safety

📁 Project Structure

random-quote-generator/
│
├─ public/
│  └─ favicon.svg
│
├─ src/
│  ├─ assets/
│  │  └─ quotes.ts
│  │
│  ├─ components/
│  │  ├─ QuoteCard.tsx
│  │  └─ GenerateButton.tsx
│  │
│  ├─ hooks/
│  │  └─ useRandomQuote.ts
│  │
│  ├─ types/
│  │  └─ quote.ts
│  │
│  ├─ App.tsx
│  ├─ main.tsx
│  ├─ index.css
│  └─ vite-env.d.ts
│
├─ index.html
├─ postcss.config.js
├─ tsconfig.json
├─ package.json
└─ vercel.json

🧩 Architecture Overview

Components

Reusable UI elements such as QuoteCard and GenerateButton.

Hooks

Business logic is isolated using a custom hook (useRandomQuote).

Assets

Static quote data is stored separately and typed.

Types

Centralized TypeScript interfaces ensure consistency and safety.

This approach keeps the codebase clean, maintainable, and easy to scale.

🧪 Getting Started

1️⃣ Clone the Repository

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

2️⃣ Install Dependencies

npm install

3️⃣ Start Development Server

npm run dev

Open your browser at: http://localhost:5173

📦 Build for Production

Create an optimized production build:

npm run build

Preview the production build locally:

npm run preview

☁️ Deployment (Vercel)

This project is optimized for deployment on Vercel.

Deployment Steps

  1. Push the project to GitHub
  2. Import the repository into Vercel
  3. Configure the project:
    • Framework Preset: Vite
    • Build Command: npm run build
    • Output Directory: dist
  4. Deploy 🚀

🔮 Future Enhancements

  • 🌐 Fetch quotes from an external API
  • 🌙 Light / Dark mode toggle
  • 💾 Save favorite quotes using localStorage
  • 🐦 Share quotes on social platforms
  • ✨ Add more animations and transitions
  • ✅ Prevent repeated quotes (Already implemented!)

🎓 What This Project Demonstrates

  • Modern React + TypeScript development
  • Clean separation of concerns
  • Scalable project architecture
  • Tailwind CSS best practices
  • Mobile-responsive design
  • Production-ready build and deployment workflow

📜 License

This project is licensed under the MIT License.

⭐ Support

If you find this project useful, consider giving it a star on GitHub.