😌 Clever Quotes App

Description is available in the following translations / Die Beschreibung liegt in den folgenden Übersetzungen vor:

English (Englisch)

German (Deutsch)

🤩 Working Application Link:

Clever Quotes App hosted on Vercel

German Description / Deutsche Beschreibung

🤗 Einleitung:

Dies ist ein Anfänger freundlich Spaß ReactJs Projekt.

Es ist die klassische Random Quote Generator App, die auf den Random Quote API von Luke Peavey basiert.

Da ich es liebe, Zitate über meinen WhatsApp-Status zu teilen, habe ich die WhatsApp-Share-Funktionalität dank des React Share NPM-Pakets zur App hinzugefügt.

Das WhatsApp-Symbol stammt von React Icons.

Alle Links sind unten aufgeführt.

---

💡 Für maximale Vergnügen, INSTALLIEREN und verwenden Sie diese App auf einem Smartphone!

🤠 Verwendetes API:

• Luke Peavey Quotable API für die zufälligen Zitate

• Lorem Picsum für die zufälligen Bilder.

https://github.com/lukePeavey/quotable?tab=readme-ov-file#get-random-quotes

📦 Verwendete Pakete:

1. Die ReactJS-Anwendung wurde mit Vite. initialisiert.

npm create vite@latest

2. React-Share wurde für die WhatApp Sharing-Funktionalität verwendet

npm i react-share

3. React Icons wurde für den WhatsApp-Knopf verwendet

npm install react-icons --save

4. React Bootstrap wurde für das Styling, die Karten- und Knopfkomponenten verwendet

npm install react-bootstrap bootstrap

5. Danke an CSS-Gradients für den tollen UI-Hintergrund-Farbverlauf:

Ich habe diesen Code von ihnen übernommen und in den body-Tag meiner index.html eingefügt.

style="
      background-color: #8bc6ec;
      background-image: linear-gradient(135deg, #8bc6ec 0%, #9599e2 100%);
    "

6. Dank an VitePWA für die Progressive Web App Fähigkeiten (PWA):

npm i vite-plugin-pwa -D

💡 React-Fähigkeiten betroffen:

1. Die Fähigkeit, ReactJS funktionale Komponente Hooks zu verwenden;

   • useState
   • useEffect

2. Die Fähigkeit, Daten asynchron in ReactJS abzurufen mit;

   • async/await
   • Die eingebaute Fetch-API (fetch())
   • Error handling mit try-catch.

3. Die Fähigkeit, ReactJS-Komponenten zu stylen;

   • CSS-Frameworks wie React Bootstrap
   • Externe CSS-Stylesheets
   • In-line Styling

4. Die Fähigkeit, Ereignisse mit Hilfe von Handler-Funktionen zu behandeln

English Description / Englische Beschreibung

🤗 Introduction:

This PWA (Progressive Web App) is a beginner friendly fun ReactJs project.

It's the classic Random Quote Generator App based off of Luke Peavey's Quotable API random Quotes.

Because I love sharing quotes on my WhatsApp status, I added the WhatsApp share functionality to the app thanks to the React Share NPM package.

The WhatsApp icon is from React Icons.

All the links are listed below.

---

💡 For maximum satisfaction, INSTALL and use this app on a smart phone!

🤠 APIs used:

• Luke Peavey Quotable API for the random Quotes

• Lorem Picsum for the random Pictures.

// quotes
https://api.quotable.io/quotes/random

// images
https://picsum.photos/seed/picsum/200/300

📦 Packages used:

1. The ReactJS app was initialised with Vite.

npm create vite@latest

2. React-Share as used for the WhatApp sharing functionality

npm i react-share

3. React Icons was used for the WhatsApp button

npm install react-icons --save

4. React Bootstrap was used for styling, card and button components

npm install react-bootstrap bootstrap

5. Thanks to CSS-Gradients for the amazing UI background Gradient.

I grabed this piece of code from them, which I then pasted in the body tag of my index.html

style="
      background-color: #8bc6ec;
      background-image: linear-gradient(135deg, #8bc6ec 0%, #9599e2 100%);
    "

6. Thanks to VitePWA for the Progressive Web App capabilities(PWA)

npm i vite-plugin-pwa -D

💡 React skills involved:

1. The ability to use ReactJS functional component Hooks;

   • useState
   • useEffect

2. The ability to fetch data asynchronously in ReactJS using;

   • async/await
   • The built-in Fetch-API (fetch())
   • Error handling with try-catch.

3. The ability to style ReactJS components using;

   • CSS frameworks like React Bootstrap
   • External stylesheets
   • In-line Styling

4. The ability to handle events using handler functions