A modern, full-featured quotes application built with React and Vite. This is a personal project created to practice modern web development, explore React patterns, and build something beautiful and functional.
The hero section features a beautiful auto-scrolling grid of philosopher and author portraits with a rotating quote display in the center.
This is a personal learning project I built to:
- Practice modern React development with hooks and functional components
- Learn Vite as a build tool and development server
- Explore API integration and error handling patterns
- Practice responsive design and modern CSS techniques
- Build a complete, production-ready application from scratch
The application features a beautiful hero section with auto-scrolling philosopher portraits, dynamic quote fetching, and a fully responsive design.
- Hero Section - Full-screen hero with auto-scrolling philosopher portraits and rotating quotes
- Modern Design - Clean, minimalist aesthetic with smooth animations
- Responsive Layout - Fully responsive design that works on all devices
- Interactive Cards - Beautiful quote cards with hover effects and transitions
- Search Quotes - Real-time search by quote text or author name
- Category Filtering - Filter quotes by category (Wisdom, Success, Motivational, Life, etc.)
- Copy & Share - One-click copy to clipboard and native share functionality
- Smart Fallback - Reliable fallback system ensures quotes always display
- Pagination - Load more quotes with infinite scroll support
- API Integration - Fetches quotes from external APIs with CORS proxy support
- Error Handling - Graceful error handling with fallback quotes
- Performance - Optimized with lazy loading and efficient rendering
- Accessibility - Semantic HTML and ARIA labels for better accessibility
- Node.js (version 16 or higher)
- npm or yarn package manager
-
Clone the repository
git clone https://github.com/yourusername/quotes-project.git cd quotes-project -
Install dependencies
npm install
-
Start the development server
npm run dev
-
Open your browser Navigate to
http://localhost:3000
npm run buildThe production build will be in the dist directory.
npm run previewquotes-project/
├── public/ # Static assets
├── src/
│ ├── components/ # React components
│ │ ├── HeroSection.jsx
│ │ ├── QuoteCard.jsx
│ │ ├── CategoryFilter.jsx
│ │ └── SearchBar.jsx
│ ├── data/ # Data files
│ │ ├── fallbackQuotes.js
│ │ └── philosophers.js
│ ├── App.jsx # Main application component
│ ├── App.css # Main styles
│ ├── main.jsx # Application entry point
│ └── index.css # Global styles
├── index.html # HTML template
├── package.json # Dependencies and scripts
├── vite.config.js # Vite configuration
└── README.md # Project documentation
- React 18.2.0 - Modern UI library with hooks
- Vite 5.0.8 - Next-generation frontend tooling
- JavaScript (ES6+) - Modern JavaScript features
- CSS3 - Modern CSS with:
- Flexbox & Grid layouts
- CSS animations and transitions
- Custom properties (CSS variables)
- Responsive design patterns
- Quotable API - Primary quotes API (https://api.quotable.io) - Free, open-source API with thousands of quotes
- ZenQuotes API - Fallback quotes API (https://zenquotes.io) - Provides inspirational quotes
- Forismatic API - Fallback quotes API (https://api.forismatic.com) - Random inspirational quotes
- QuoteGarden API - Fallback quotes API (https://quotegarden.io) - Collection of famous quotes
- Fallback Quotes - 105+ local quotes for reliability when APIs are unavailable
- Lorem Picsum - Portrait images service (https://picsum.photos) - For philosopher/author portraits
- Vite - Fast build tool and dev server
- ESLint - Code linting (if configured)
- Git - Version control
This project helped me practice and learn:
- React Hooks - useState, useEffect, and custom hooks
- Component Architecture - Building reusable, modular components
- API Integration - Fetching data, error handling, and fallback strategies
- Responsive Design - Mobile-first approach with CSS Grid and Flexbox
- Performance Optimization - Lazy loading, code splitting, and efficient rendering
- Modern CSS - Animations, transitions, and advanced styling techniques
- Git Workflow - Version control and project management
- Auto-scrolling background with philosopher portraits
- Rotating inspirational quotes
- Smooth animations and transitions
- Full-screen immersive experience
- Clean, modern card design
- Copy and share functionality
- Category badges
- Hover effects
- Real-time search functionality
- Category-based filtering
- Smooth UI interactions
The project uses Vite with React plugin. Configuration can be found in vite.config.js.
The app uses a multi-API system with automatic fallback:
-
Primary API: Quotable API (https://api.quotable.io)
- Free, open-source quotations API
- No authentication required
- Supports pagination and category filtering
- Returns up to 50 quotes per request
-
Fallback APIs (tried in order if primary fails):
-
ZenQuotes API (https://zenquotes.io/api/quotes)
- Provides inspirational quotes
- No authentication required
-
Forismatic API (https://api.forismatic.com/api/1.0/)
- Random inspirational quotes
- Supports multiple languages
- No authentication required
-
QuoteGarden API (https://quotegarden.io/api/v3/quotes/random)
- Collection of famous quotes
- RESTful API
- No authentication required
-
-
Final Fallback: Local quotes database
- 105+ curated quotes across all categories
- Always available, no network dependency
- Ensures the app always displays quotes
- Lorem Picsum (https://picsum.photos) - Provides portrait-style images for philosophers and authors
- Uses seed-based URLs for consistent images
- No authentication required
- Reliable image delivery
- Add user authentication for saving favorite quotes
- Implement quote of the day feature
- Add dark mode toggle
- Create quote collections/categories
- Add social sharing with custom images
- Implement quote export functionality
- API dependency (with extensive fallback support)
- 105+ fallback quotes available locally
- No persistent storage
This project is licensed under the MIT License - feel free to use it for learning purposes!
- Quotable API (https://quotable.io) - Primary quotes API, free and open-source
- ZenQuotes API (https://zenquotes.io) - Inspirational quotes API
- Forismatic API (https://forismatic.com) - Random quotes API
- QuoteGarden API (https://quotegarden.io) - Famous quotes collection
- Lorem Picsum (https://picsum.photos) - Portrait images for philosophers and authors
- React & Vite Communities - For excellent documentation and tools
- GitHub - For hosting and version control
This project was created as part of my journey to learn modern web development. It combines several concepts I wanted to practice:
- Building complete applications from scratch
- Working with external APIs
- Creating beautiful, responsive UIs
- Implementing proper error handling
Feel free to explore the code, suggest improvements, or use it as a learning resource!
Built with ❤️ as a personal learning project
If you find this project helpful or interesting, feel free to star it or fork it for your own learning!