agrawpri / quote-generator

A webapp which generates random quotes.

Quote Generator

Solution for a challenge from Devchallenges.io.

Demo | Solution | Challenge

Table of Contents

• Overview
  • Built With
• Features
• How to use
• Contact
• Acknowledgements

Overview

A web application which displays randomly generated quotes. One can also view quotes by a given author/speaker.

The app can be accessed at https://agrawpri.github.io/quote-generator/.

Built With

• React

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.

The following features have been implemented:

• Generating random quotes on-demand.
• Viewing all quotes by the author of the current quote.

The following features are expected to arrive in the future:

• Searching for quotes by authors using an auto-complete input field for the authors.

How To Use

To clone and run this application, you'll need Git and npm installed on your computer. From your command line:

# Clone this repository
$ git clone https://github.com/agrawpri/quote-generator

# Install dependencies
$ npm install

# Build the app
$ npm run build

# Run the app
$ npm run start

The app should then be accessible on http://localhost:3000/

Learnings

I had a bunch of learnings and ah-ha moments while developing this app a few of which are the following:

• I started out with using react-scripts but soon realized that it's not going to be enough because I wanted to host the app on GitHub Pages which requires the built code checked in to git. So, I moved to using webpack. I learned a great deal about webpack plugins and configuration including generating source maps, using HTML templates, etc.
• I initially developed the app with vanilla CSS, but then I stumbled upon Grommet, a React library for layouts and common components. Using the same, I was able to get rid of all my CSS and my app ended up just using Grommet without much ad-hoc CSS.
• I also faced a few issues with react-router's BrowserRouter's compatability with GitHub Pages. I tried a lot of things and finally was able to fix it using HashRouter (see this).

Acknowledgements

• Make react-router work with GitHub Pages
• HTML Webpack Plugin
• Grommet for layout and styling

Contact

• LinkedIn @priyansh-agrawal
• GitHub @Priyansh121096