https://github.com/arnobt78/quotes-generator--react
Quotes App is a React-Vite Random Quotes Generator project, using TheQuote API, display the random quotes by famous Authors, Philosphers, Artists, or Movies, and save it in a List as Favorite with delete options and deploy on Vercel.
https://github.com/arnobt78/quotes-generator--react
favorite-quotes quotes quotes-api quotes-app quotes-application quotes-generator react react-vite reactjs vercel-deployment
Last synced: 10 months ago
JSON representation
Quotes App is a React-Vite Random Quotes Generator project, using TheQuote API, display the random quotes by famous Authors, Philosphers, Artists, or Movies, and save it in a List as Favorite with delete options and deploy on Vercel.
- Host: GitHub
- URL: https://github.com/arnobt78/quotes-generator--react
- Owner: arnobt78
- Created: 2024-09-27T14:10:43.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-30T23:50:59.000Z (10 months ago)
- Last Synced: 2025-07-01T00:37:25.217Z (10 months ago)
- Topics: favorite-quotes, quotes, quotes-api, quotes-app, quotes-application, quotes-generator, react, react-vite, reactjs, vercel-deployment
- Language: JavaScript
- Homepage: https://quotes-arnob.vercel.app/
- Size: 41 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Quotes Generator – ReactVite Web Application
 
---
## Project Summary
**Quotes-Generator--React** is a modern, interactive web application built with React and Vite. The app fetches random quotes from the [TheQuote API](https://thequoteapi.com/), displaying them with author details. Users can generate new quotes, mark favorites, and manage their favorite list. The project is designed as a learning tool for React, Vite, API integration, and environmental configuration, with clean code and clear separation of concerns.
- **Live-Demo:** [https://quotes-arnob.vercel.app/](https://quotes-arnob.vercel.app/)
---
## Table of Contents
1. [Project Summary](#project-summary)
2. [Features](#features)
3. [Live Demo](#live-demo)
4. [Technology Stack](#technology-stack)
5. [Project Structure](#project-structure)
6. [Setup & Installation](#setup--installation)
7. [Environment Variables](#environment-variables)
8. [API Usage](#api-usage)
9. [Functionality & Walkthrough](#functionality--walkthrough)
10. [Component Overview](#component-overview)
11. [Example Code Scripts](#example-code-scripts)
12. [Keywords](#keywords)
13. [Learning & Teaching](#learning--teaching)
14. [Conclusion](#conclusion)
---
## Features
- Fetches random quotes from an external API
- Displays the quote content and its author
- Allows users to add quotes to a list of favorites
- Remove quotes from the favorites list
- Responsive and minimal UI
- Easy to extend with additional features (e.g., search, filters)
---
## Technology Stack
- **React**: Frontend UI library for building user interfaces using components
- **Vite**: Fast build tool and development server for React projects
- **JavaScript (ES6+)**
- **CSS**: For styling components
- **TheQuote API**: Provides random quotes via HTTP request
- **dotenv**: For managing sensitive configuration (API keys)
---
## Project Structure
```
Quotes-Generator--React/
│
├── .eslintrc.cjs # Linting configuration
├── .gitignore # Git ignore rules
├── index.html # Main HTML entry point
├── package.json # Project manifest and dependencies
├── package-lock.json # Dependency lock file
├── vite.config.js # Vite configuration
├── README.md # Project documentation
└── src/ # Source code
├── components/ # React components (QuoteCard, FavoritesList, etc.)
├── App.jsx # Main application component
├── main.jsx # React entry point
└── styles/ # CSS or SCSS files
```
*Note: The actual file structure may contain further subdirectories for better organization.*
---
## Setup & Installation
### 1. Prerequisites
- **Node.js**: Download and install from [nodejs.org](https://nodejs.org/en/)
- **npm** (comes with Node.js)
### 2. Clone the Repository
```bash
git clone https://github.com/arnobt78/Quotes-Generator--React.git
cd Quotes-Generator--React
```
### 3. Install Dependencies
```bash
npm install
```
### 4. Start the Development Server
```bash
npm run dev
```
- Visit `http://localhost:5173/` in your web browser.
---
## Environment Variables
Create a `.env` file in your project root to store sensitive data (like your API key):
```
VITE_QUOTE_API_KEY=your_api_key_here
```
You can obtain your API key from [TheQuote API](https://thequoteapi.com/) by submitting your email.
---
## API Usage
This project uses [TheQuote API](https://thequoteapi.com/) to fetch random quotes.
- **Sign up** to get your API key.
- Store the key in `.env` as described above.
- The API endpoint is accessed from within your React components using `fetch()` or `axios`.
---
## Functionality & Walkthrough
### How It Works
1. **On Load:** The app fetches a random quote from TheQuote API.
2. **Display:** The quote and author are displayed on the main card.
3. **Generate New Quote:** Clicking the "New Quote" button fetches a new random quote.
4. **Add to Favorites:** The "Add to Favorites" button saves the current quote to your local favorites list.
5. **View Favorites:** Favorites are listed in a separate section, allowing easy access.
6. **Remove from Favorites:** Each favorite can be removed from the list.
#### Example User Flow
- Open the app and see a motivational quote.
- Click “New Quote” to refresh the quote.
- If you like the quote, click “Add to Favorites.”
- Visit the Favorites tab to see all saved quotes.
- Remove a quote if you change your mind.
---
## Component Overview
*Typical components in the project (assuming best practices):*
- **App.jsx**: Main component managing state and routing.
- **QuoteCard.jsx**: Displays the current quote.
- **FavoritesList.jsx**: Shows user's favorite quotes.
- **QuoteService.js**: Handles API calls to fetch quotes.
- **Button.jsx**: Reusable button component.
- **Loader.jsx**: Shows loading animation during API requests.
```jsx
// Example: Fetching a random quote
const fetchQuote = async () => {
const res = await fetch(`https://thequoteapi.com/api/random?api_key=${process.env.VITE_QUOTE_API_KEY}`);
const data = await res.json();
setQuote(data);
};
```
---
## Example Code Scripts
### Fetching and Displaying a Quote
```jsx
import React, { useState, useEffect } from 'react';
function QuoteCard() {
const [quote, setQuote] = useState(null);
useEffect(() => {
fetchRandomQuote();
}, []);
async function fetchRandomQuote() {
const res = await fetch('https://thequoteapi.com/api/random?api_key=' + import.meta.env.VITE_QUOTE_API_KEY);
const data = await res.json();
setQuote(data);
}
return (
{quote?.content}
- {quote?.author}
New Quote
);
}
export default QuoteCard;
```
### Adding to Favorites (Sample Logic)
```jsx
const [favorites, setFavorites] = useState([]);
function addToFavorites(quote) {
setFavorites([...favorites, quote]);
}
```
---
## Keywords
- React
- Vite
- JavaScript
- API integration
- Quotes Generator
- TheQuote API
- .env configuration
- Favorite quotes
- React components
- State management
- Hooks
- Learning project
---
## Learning & Teaching
This project is ideal for:
- **Beginners**: Learn how to manage state, use effects, interact with APIs, and organize React projects.
- **Intermediate Developers**: Practice project structure, code reusability, and environmental configuration.
- **Teaching**: Each component is simple and focused, making it easy to demonstrate React patterns and best practices.
- **Extending**: Try adding authentication, search/filter features, or theme toggling as exercises.
---
## Conclusion
The Quotes Generator React project is a practical example of modern frontend development using React and Vite. It demonstrates API integration, component-based architecture, and local state management. Use this project to learn, teach, or expand your web development skills!
---
**Happy Coding!** 🚀
Thank you for exploring and contributing to this project.