{"id":29245780,"url":"https://github.com/arnobt78/quotes-generator--react","last_synced_at":"2025-07-03T22:38:15.874Z","repository":{"id":302172849,"uuid":"864111879","full_name":"arnobt78/Quotes-Generator--React","owner":"arnobt78","description":"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.","archived":false,"fork":false,"pushed_at":"2025-06-30T23:50:59.000Z","size":42,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-01T00:37:25.217Z","etag":null,"topics":["favorite-quotes","quotes","quotes-api","quotes-app","quotes-application","quotes-generator","react","react-vite","reactjs","vercel-deployment"],"latest_commit_sha":null,"homepage":"https://quotes-arnob.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arnobt78.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-09-27T14:10:43.000Z","updated_at":"2025-06-30T23:51:02.000Z","dependencies_parsed_at":"2025-07-01T00:37:27.547Z","dependency_job_id":"147a4fe9-5494-48e2-8402-38d09ce5f662","html_url":"https://github.com/arnobt78/Quotes-Generator--React","commit_stats":null,"previous_names":["arnobt78/quotes-generator--react"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/arnobt78/Quotes-Generator--React","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FQuotes-Generator--React","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FQuotes-Generator--React/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FQuotes-Generator--React/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FQuotes-Generator--React/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnobt78","download_url":"https://codeload.github.com/arnobt78/Quotes-Generator--React/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FQuotes-Generator--React/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263415911,"owners_count":23463109,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["favorite-quotes","quotes","quotes-api","quotes-app","quotes-application","quotes-generator","react","react-vite","reactjs","vercel-deployment"],"created_at":"2025-07-03T22:38:14.133Z","updated_at":"2025-07-03T22:38:15.845Z","avatar_url":"https://github.com/arnobt78.png","language":"JavaScript","readme":"# Quotes Generator – ReactVite Web Application\n\n![Screenshot 2024-09-27 at 16 11 17](https://github.com/user-attachments/assets/c7a80594-06b6-4ecf-9525-309facd20151) ![Screenshot 2024-09-27 at 16 11 30](https://github.com/user-attachments/assets/b73ddaf7-7850-4df5-91b7-a55c20430beb)\n\n---\n\n## Project Summary\n\n**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.\n\n- **Live-Demo:** [https://quotes-arnob.vercel.app/](https://quotes-arnob.vercel.app/)\n\n---\n\n## Table of Contents\n\n1. [Project Summary](#project-summary)\n2. [Features](#features)\n3. [Live Demo](#live-demo)\n4. [Technology Stack](#technology-stack)\n5. [Project Structure](#project-structure)\n6. [Setup \u0026 Installation](#setup--installation)\n7. [Environment Variables](#environment-variables)\n8. [API Usage](#api-usage)\n9. [Functionality \u0026 Walkthrough](#functionality--walkthrough)\n10. [Component Overview](#component-overview)\n11. [Example Code Scripts](#example-code-scripts)\n12. [Keywords](#keywords)\n13. [Learning \u0026 Teaching](#learning--teaching)\n14. [Conclusion](#conclusion)\n\n---\n\n## Features\n\n- Fetches random quotes from an external API\n- Displays the quote content and its author\n- Allows users to add quotes to a list of favorites\n- Remove quotes from the favorites list\n- Responsive and minimal UI\n- Easy to extend with additional features (e.g., search, filters)\n\n---\n\n## Technology Stack\n\n- **React**: Frontend UI library for building user interfaces using components\n- **Vite**: Fast build tool and development server for React projects\n- **JavaScript (ES6+)**\n- **CSS**: For styling components\n- **TheQuote API**: Provides random quotes via HTTP request\n- **dotenv**: For managing sensitive configuration (API keys)\n\n---\n\n## Project Structure\n\n```\nQuotes-Generator--React/\n│\n├── .eslintrc.cjs        # Linting configuration\n├── .gitignore           # Git ignore rules\n├── index.html           # Main HTML entry point\n├── package.json         # Project manifest and dependencies\n├── package-lock.json    # Dependency lock file\n├── vite.config.js       # Vite configuration\n├── README.md            # Project documentation\n└── src/                 # Source code\n    ├── components/      # React components (QuoteCard, FavoritesList, etc.)\n    ├── App.jsx          # Main application component\n    ├── main.jsx         # React entry point\n    └── styles/          # CSS or SCSS files\n```\n\n*Note: The actual file structure may contain further subdirectories for better organization.*\n\n---\n\n## Setup \u0026 Installation\n\n### 1. Prerequisites\n\n- **Node.js**: Download and install from [nodejs.org](https://nodejs.org/en/)\n- **npm** (comes with Node.js)\n\n### 2. Clone the Repository\n\n```bash\ngit clone https://github.com/arnobt78/Quotes-Generator--React.git\ncd Quotes-Generator--React\n```\n\n### 3. Install Dependencies\n\n```bash\nnpm install\n```\n\n### 4. Start the Development Server\n\n```bash\nnpm run dev\n```\n\n- Visit `http://localhost:5173/` in your web browser.\n\n---\n\n## Environment Variables\n\nCreate a `.env` file in your project root to store sensitive data (like your API key):\n\n```\nVITE_QUOTE_API_KEY=your_api_key_here\n```\n\nYou can obtain your API key from [TheQuote API](https://thequoteapi.com/) by submitting your email.\n\n---\n## API Usage\n\nThis project uses [TheQuote API](https://thequoteapi.com/) to fetch random quotes.\n\n- **Sign up** to get your API key.\n- Store the key in `.env` as described above.\n- The API endpoint is accessed from within your React components using `fetch()` or `axios`.\n\n---\n\n## Functionality \u0026 Walkthrough\n\n### How It Works\n\n1. **On Load:** The app fetches a random quote from TheQuote API.\n2. **Display:** The quote and author are displayed on the main card.\n3. **Generate New Quote:** Clicking the \"New Quote\" button fetches a new random quote.\n4. **Add to Favorites:** The \"Add to Favorites\" button saves the current quote to your local favorites list.\n5. **View Favorites:** Favorites are listed in a separate section, allowing easy access.\n6. **Remove from Favorites:** Each favorite can be removed from the list.\n\n#### Example User Flow\n\n- Open the app and see a motivational quote.\n- Click “New Quote” to refresh the quote.\n- If you like the quote, click “Add to Favorites.”\n- Visit the Favorites tab to see all saved quotes.\n- Remove a quote if you change your mind.\n\n---\n\n## Component Overview\n\n*Typical components in the project (assuming best practices):*\n\n- **App.jsx**: Main component managing state and routing.\n- **QuoteCard.jsx**: Displays the current quote.\n- **FavoritesList.jsx**: Shows user's favorite quotes.\n- **QuoteService.js**: Handles API calls to fetch quotes.\n- **Button.jsx**: Reusable button component.\n- **Loader.jsx**: Shows loading animation during API requests.\n\n```jsx\n// Example: Fetching a random quote\nconst fetchQuote = async () =\u003e {\n  const res = await fetch(`https://thequoteapi.com/api/random?api_key=${process.env.VITE_QUOTE_API_KEY}`);\n  const data = await res.json();\n  setQuote(data);\n};\n```\n\n---\n\n## Example Code Scripts\n\n### Fetching and Displaying a Quote\n\n```jsx\nimport React, { useState, useEffect } from 'react';\n\nfunction QuoteCard() {\n  const [quote, setQuote] = useState(null);\n\n  useEffect(() =\u003e {\n    fetchRandomQuote();\n  }, []);\n\n  async function fetchRandomQuote() {\n    const res = await fetch('https://thequoteapi.com/api/random?api_key=' + import.meta.env.VITE_QUOTE_API_KEY);\n    const data = await res.json();\n    setQuote(data);\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003ch2\u003e{quote?.content}\u003c/h2\u003e\n      \u003cp\u003e- {quote?.author}\u003c/p\u003e\n      \u003cbutton onClick={fetchRandomQuote}\u003eNew Quote\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default QuoteCard;\n```\n\n### Adding to Favorites (Sample Logic)\n\n```jsx\nconst [favorites, setFavorites] = useState([]);\n\nfunction addToFavorites(quote) {\n  setFavorites([...favorites, quote]);\n}\n```\n\n---\n\n## Keywords\n\n- React\n- Vite\n- JavaScript\n- API integration\n- Quotes Generator\n- TheQuote API\n- .env configuration\n- Favorite quotes\n- React components\n- State management\n- Hooks\n- Learning project\n\n---\n\n## Learning \u0026 Teaching\n\nThis project is ideal for:\n\n- **Beginners**: Learn how to manage state, use effects, interact with APIs, and organize React projects.\n- **Intermediate Developers**: Practice project structure, code reusability, and environmental configuration.\n- **Teaching**: Each component is simple and focused, making it easy to demonstrate React patterns and best practices.\n- **Extending**: Try adding authentication, search/filter features, or theme toggling as exercises.\n\n---\n\n## Conclusion\n\nThe 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!\n\n---\n\n**Happy Coding!** 🚀\n\nThank you for exploring and contributing to this project.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Fquotes-generator--react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnobt78%2Fquotes-generator--react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Fquotes-generator--react/lists"}