https://github.com/ggalina/visualvoyage-react
Technologies: REACT, Axios, public Pixabay API, React-Toastify, React-Loader-Spinner, Styled-Components libraries, Parcel. Personal Mini Project.
https://github.com/ggalina/visualvoyage-react
axios parcel public-api react-loader-spinner react-toastify reactjs styled-components
Last synced: 5 months ago
JSON representation
Technologies: REACT, Axios, public Pixabay API, React-Toastify, React-Loader-Spinner, Styled-Components libraries, Parcel. Personal Mini Project.
- Host: GitHub
- URL: https://github.com/ggalina/visualvoyage-react
- Owner: GGalina
- Created: 2023-04-04T07:06:33.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-08T13:25:30.000Z (over 2 years ago)
- Last Synced: 2025-02-05T19:51:00.945Z (about 1 year ago)
- Topics: axios, parcel, public-api, react-loader-spinner, react-toastify, reactjs, styled-components
- Language: JavaScript
- Homepage: https://ggalina.github.io/VisualVoyage-React/
- Size: 2.76 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# VisualVoyage-React
Welcome to the VisualVoyage-React Mini Project! This web application allows users to search for images. The project was developed using React, Axios, the public Pixabay API, React-Toastify, React-Loader-Spinner, Styled-Components library, and Parcel as a build tool.
Live Demo: [VisualVoyage-React](https://ggalina.github.io/VisualVoyage-React/)
## Getting Started
To run the project on your local machine, follow these steps:
1. **Clone the Repository**:
```bash
git clone https://github.com/GGalina/VisualVoyage-React.git
2. **Navigate to the Project Directory**:
```bash
cd VisualVoyage-React
3. **Install Dependencies**:
Make sure you have Node.js and npm installed.
```bash
npm install
4. **Start the Development Server**:
To start the project, run the following command:
```bash
npm start
## Features
**React**: Used for structuring the web pages and implementing application logic.
**Styled-Components**: Used for styling the user interface.
**React-Loader-Spinner**: Used to display a loading icon while waiting for API responses.
**React-Toastify**: Used to display notifications in case no keywords were entered or no results for a keyword were found.
**Pixabay API**: Used to fetch images.
**Axios**: Utilized to make asynchronous requests to the API.
**Parcel**: Used as a build tool to bundle and compile the project.
## Usage
**Search for Images**: Enter a keyword in the search bar to find images related to the keyword.
**View Large Image**: Click on an image preview from the gallery to view a larger image.
**Load More Results**: Click the "Load more" button to load additional results.