Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ryana265/random-quotes-generator
https://github.com/ryana265/random-quotes-generator
axios-react javascript react vite
Last synced: about 17 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/ryana265/random-quotes-generator
- Owner: Ryana265
- Created: 2024-09-18T11:56:14.000Z (2 months ago)
- Default Branch: master
- Last Pushed: 2024-10-16T04:58:20.000Z (about 1 month ago)
- Last Synced: 2024-10-17T20:30:29.656Z (about 1 month ago)
- Topics: axios-react, javascript, react, vite
- Language: JavaScript
- Homepage: https://random-quotes-generator-mocha.vercel.app
- Size: 54.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Quotes App
A **Random Quote Generator** built using **React.js** and **Axios**,which fetches and displays quotes from a public API. This app allows users to view a random quote and generate a new one with the click of a button.
## Features
- Fetches random quotes from an API.
- Displays a quote and its author.
- A button to generate new random quotes.
- Minimalistic and user-friendly design.
- Responsive layout for mobile and desktop users.
## Demo
You can check the Quotes app [here](https://random-quotes-generator-mocha.vercel.app/)
## Screenshots
## Technologies Used
- **React.js** - For building the UI components.
- **Axios** - For making HTTP requests to the quotes API.
- **HTML5** and **CSS3** - For structure and styling.
- **JavaScript (ES6+)** - For handling logic and interactivity.
## Installation
Follow these steps to run the app locally:
1. **Clone the repository**:
```bash
git clone https://github.com/your-username/quotes-app.git
2. **Navigate to the project folder**:
```bash
cd quotes-app
3. **Install dependencies:**:
```bash
npm install
4. **Start the development server:**:
```bash
npm start
5. **Open your browser and visit http://localhost:3000 to view the app.**:
## Usage
Random Quote Generation: When the app loads, it automatically displays a random quote. To generate a new quote, click the "Generate New Quote" button.
## React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh