Solution for a challenge from Devchallenges.io.
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/.
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.
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 startThe app should then be accessible on http://localhost:3000/
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).
- LinkedIn @priyansh-agrawal
- GitHub @Priyansh121096