Random quote generator

Solution for a challenge from Devchallenges.io.

Demo | Solution | Challenge

Table of Contents

• Table of Contents
• Overview
  • Built With
• Features
• How To Use
• learned/improved
• Acknowledgements
• Contact

Overview

random quote

author quote list

random quote will display the quote data randomly.

author quote list displays a list of citation data for the specified author. It is an infinite scrolling list with 10 quotes at a time.

It also supports the display of skeleton screens and error alerts, albeit in a simplified way.

Built With

Base

• Node.js：20.8.0
• TypeScript：5.2.2
• React：18.2.0
• Next.js：13.5.4

Other major libraries

• emotion
• emotion-icons
• postcss-preset-env
• ky
• @tanstack/react-query

API

• QuoteGarden API

Features

This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories.

• User story: I can see a random quote
• User story: I generate a new random quote
• User story: When I select quote author, I can see a list of quotes from them
• User story: I can see quote genre under the author

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
git clone git@github.com:h-yoshikawa44/random-quote-generator.git
or
git clone https://github.com/h-yoshikawa44/random-quote-generator.git

# Install dependencies
npm install

# Run the app
npm run dev

learned/improved

• How to implement a skeleton screen
• How to use Grid layout to prevent the footer from coming up when there is little content.

Acknowledgements

• Material UI
• CSSでスケルトンスクリーンを表現する
• gapの余白指定が便利！ gridとflexでできる新しいCSSレイアウト手法

Contact

• Website：h-yoshikawa44.com
• GitHub：@h-yoshikawa44
• Twitter：@yoshi44_lion