https://github.com/b13o/random-quote-generator

💬 A random quote generator related to programming.
https://github.com/b13o/random-quote-generator

javascript react useeffect usestate

Last synced: about 1 month ago
JSON representation

💬 A random quote generator related to programming.

• Host: GitHub
• URL: https://github.com/b13o/random-quote-generator
• Owner: b13o
• Created: 2024-12-12T19:30:35.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-12-13T16:37:47.000Z (about 2 months ago)
• Last Synced: 2024-12-13T17:45:16.966Z (about 2 months ago)
• Topics: javascript, react, useeffect, usestate
• Language: JavaScript
• Homepage: https://b13o.github.io/random-quote-generator/
• Size: 52.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


# ランダム名言ジェネレータ

## 概要

このプロジェクトでは、ボタンをクリックするたびに、ランダムな名言を表示するアプリケーションを構築します。

外部 API を活用し、プログラミングの世界の著名人による言葉を取得し、画面に表示します。

## 学習目標

React の基本的な Hook である、useState と useEffect を学習します。

特に、useEffect フックを使ったデータフェッチと、その注意点・代替案について確認してください。

### 推奨技術

このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。

- vite を用いた React 環境構築

- Tailwind CSS を用いたスタイリング

- API を利用したデータの取得と表示。

- React の基本的な Hook である、useState と useEffect

- GitHub Pages へのデプロイ

---

## 🎯 お題

- 「ユーザーストーリー」を全て満たす、アプリを構築してください。

- 必要に応じて、スクリーンショットやデモサイトの URL を、参照してください。

- なお、スタイルは、あなた自身で独自にカスタマイズすることが可能です。

### 必須機能

1. **ランダムな名言の表示**:

   - サイトアクセス時にランダムな名言とその著者名を表示する。

2. **名言の更新**:

   - ボタンをクリックすると、新しいランダムな名言を取得して表示する。

### 追加情報

今回使用する API は、「[**Programming Quotes API**](https://programming-quotesapi.vercel.app/)」です。

- この API は、プログラミングに関連する名言とその著者を提供します。

- 無料でパブリックに公開されており、アクセスキーなどは必要ありません。

- MIT ライセンスの下で提供されているので、商用利用も含め、自由に使用することができますが、利用は自己責任です。

- レート制限は、１時間あたり 100 リクエストまでです。

## ユーザーストーリー

- [ ] ユーザーがサイトにアクセスすると、ランダムな名言と著者名が表示される。

- [ ] ユーザーが「**_Generate_**」ボタンをクリックすると、新しい名言と著者名が表示される。

- [ ] アプリケーションがデプロイされており、誰でもアクセス可能である。