https://github.com/aayush259/advice-generator-app

This is a simple advice generator app built with React. It fetches random advice from the Advice Slip JSON API and displays it on the screen.
https://github.com/aayush259/advice-generator-app

Last synced: 9 days ago
JSON representation

This is a simple advice generator app built with React. It fetches random advice from the Advice Slip JSON API and displays it on the screen.

• Host: GitHub
• URL: https://github.com/aayush259/advice-generator-app
• Owner: Aayush259
• Created: 2024-05-09T15:41:34.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-05-09T20:50:36.000Z (6 months ago)
• Last Synced: 2024-05-10T17:37:09.471Z (6 months ago)
• Language: JavaScript
• Homepage: https://random-advice-generatorr.netlify.app/
• Size: 48.8 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Advice Generator App

This is a simple advice generator app built with React. It fetches random advice from the Advice Slip JSON API and displays it on the screen. The user can generate new advice by clicking a button.

This is a solution to the [Calculator app challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/calculator-app-9lteq5N29). Frontend Mentor challenges help you improve your coding skills by building realistic projects.

## Project Structure

The project is structured into several React components:

- `Main.jsx`: This is the entry point of the app. It renders the `App` component into the root div in `index.html`.

- `App.jsx`: This is the main component of the app. It maintains the state of the advice counter and renders the `Advice` component and a button to generate new advice.

- `Advice.jsx`: This component fetches a random advice from the API whenever the advice counter changes and displays it on the screen. It also renders the `AdviceCounter` component.

- `AdviceCounter.jsx`: This component displays the ID of the current advice.

## Built with:

- **Vite + React**

## Learnings

While building this project, I learned about:

- **React Hooks**: I used the `useState` and `useEffect` hooks for managing state and side effects in my functional components.

- **Fetching API Data**: I learned how to fetch data from an API in a React app using the `fetch` function inside a `useEffect` hook.

## How to Run

1. Clone the repository.

2. Install the dependencies using `npm install`.

3. Start the development server using `npm run dev`.

Enjoy the random advice!