Random quotes with React

This is a solution of random quote generator challenge from Dev Challenges.

Table of contents

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author
• Installation

Overview

The challenge

Users should be able to:

• See a random quote.
• Generate a new random quote.
• When quote author is selected, see a list of quotes from them.
• See quote genre under the author.

Links

• Live Demo: Demo

My process

Built with

• Semantic HTML5 markup
• Flexbox
• JavaScript ES6+
• Custom hooks
• React - JS library
• Styled Components - For styles
• React icons - Icon library
• Vite - Bundle tool
• Standard - Linter
• Wouter - Router library

What I learned

Created customs hooks and separate them into two different files to improve simplicity and readability.

// ❌ Before
// useQuote.js
const {
  quote, 
  setRandomQuote,
  quoteList,
  setAuthorList,
} = useQuote()

// ✅ After
// useQuote.js
const [quote, setRandomQuote] = useQuote()

// useQuoteList.js
const [quoteList] = useQuoteList(authorName)

Created getQuoteData.js service to fetch the data from the API.

const API = 'https://api.quotable.io'

export const getRandomQuote = () => {
  //...Random Quote fetch
}

export const getAuthorQuotes = (author) => {
  //...Quote list fetched with author's name
}

Added routes with wouter to handle navigation between home view and author view.

// App/index.jsx
<Switch>
  <Route path='/' component={Home} />
  <Route path='/author/:name' component={Author} />
  <Route><NotFound /></Route>
</Switch>

Learned how to use route params to render the component depending on the given param

//QuoteDetails/index.jsx
<Link to={`/author/${authorName}`}>

// Author/index.jsx
export const Author = ({ params }) => {
  const name = params.name
  return <h1>Hello {name}!</h1>
}

Useful resources

• Styled Components docs - The official documentation of styled components, this resource was very useful to understand this package.

• React Icons docs - This page is great to find the icon that you're looking for and get the name quickly on the clipboard.

• Quotable API - This was the source of data used in this project, this API was great and easy to use.

• Wouter usage - This video from @midudev was a great source of knowledge to understand how to use wouter in a real life project.

• Wouter docs - The best way to understand in depth the usage and implementation of this library.

Author

• Dev Challenges - @cacosted
• Twitter - @cacosted

Installation

To test this project by yourself first clone the repository, then you can use this commands:

Install project

npm install

Run local server

npm run dev

Build project

npm run build

Preview Build

npm run preview