Quotlify, a React/Redux example project
Tags: react, javascript, webdev, beginners
Published: 2018-02-01 15:50:10

---
title: Quotlify, a React/Redux example project
published: true
description: An example React/Redux project to help one get started using React, Redux, and React-Router
tags: react,javascript,webdev,beginners
cover_image: https://thepracticaldev.s3.amazonaws.com/i/wg0alwb7jplecuelw7sx.png
---

## Summary

This is a followup on a [previous post] where I presented 11 React projects to help those getting started with React programming. In this post I present the _12th project_ in the series, and is called _'Quotlify'_.

Quotlify is a quote browser and manager that allows one to search famous quotes and save them to a data store. The application is built using React, Redux for application state, and React Router for pages and navigation, and Firebase for a datastore.

### Features

* Display quote of the day (QOD)
* Search for quotes
* Save quotes as favorites
* Remove favorite quotes

### Links

* Find the live demo **[here](http://react-redux-quotlify.drminnaar.me/)**

* Find the project on Github **[here](https://github.com/drminnaar/react-redux-quotlify)**
* Find the previous post **[here](https://dev.to/drminnaar/11-react-examples-2e6d)**

### Key Takeaways

This project also demonstrates:

* A typical React project layout structure
* Babel setup and configuration
* Webpack setup and configuration
  * dotenv setup included
* Eslint setup and configuration
* SCSS setup and configuration
* Configuring and using Redux to manage application state
* Configuring React Router and setting up pages and navigation
* [FavQs] API integration
* [Firebase] integration

---

## Project Overview

At a high level, Quotlify is a Single Page Application (SPA) built using notable libraries like React, React Router, and Redux. The application gets quote data from a third party API ([FavQs]). It allows one to add/remove a quote as a favorite to/from a database ([Firebase]). All API and database interaction is managed through domain services. The following diagram illustrates the general design of the application.

**Application Design**

![quotlify-app-design](https://user-images.githubusercontent.com/33935506/35609333-8c2348bc-0665-11e8-9eb4-8efc4e9a43dd.png)

## Primary Components

The root application component (App), is composed of 4 primary components:

* Header
  * A heading that displays application title
* Quote Of The Day (QOD) Page
  * The "landing page" or the first view that the application opens on. It displays a random quote of the day that it retrieves from a third party API ([FavQs])
* Quotes Page
  * A search page and is used to search for famous quotes by querying the [FavQs] API
* Favorite Quotes Page
  * Displays a list of all favorite quotes that were added via the application. The favorite quote data is managed via a [Firebase] database

The "page" components are configured to use [React Router] for display and navigation.

**Primary Component Design**

![primary-component-design](https://user-images.githubusercontent.com/33935506/35668601-c2d14352-073a-11e8-9588-963b8353ae61.png)

### Quote Of The Day Page

This is the first view that is displayed upon loading the application. It displays a random quote of the day. There is a button to favorite a quote. There is also a button to refresh and retrieve a new random quote of the day.

**Quote Of The Day Page Design**

![quotlify-qod-component](https://user-images.githubusercontent.com/33935506/35643325-a1e18150-06ce-11e8-8563-f6b9f81dffb2.png)

### Quotes Page

This view is responsible for providing quote search capability. The search functionality is provided through a SearchBar component. The results of a search are displayed as a list of cards containing, each containing a single quote and a 'favorite' button.

**Quotes Design**

![quotlify-quotes-component](https://user-images.githubusercontent.com/33935506/35643481-1a374cb6-06cf-11e8-937e-64db9b813558.png)

### Favorite Quotes Page

Displays a list of favorite quotes . Each quote is displayed in a _card_ with a 'remove quote' button.

**Favorite Quotes Design**

![quotlify-favquotes-component](https://user-images.githubusercontent.com/33935506/35643601-80c2dcca-06cf-11e8-8f09-8575f69fa7f8.png)

---

## Developed With

* [Visual Studio Code](https://code.visualstudio.com/) - A source code editor developed by Microsoft for Windows, Linux and macOS. It includes support for debugging, embedded Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring
* [Node.js](https://nodejs.org/en/) - Javascript runtime
* [React](https://reactjs.org/) - A javascript library for building user interfaces
* [React Router] - Declarative routing for React
* [Redux] - Redux is a predictable state container for JavaScript apps.
* [Redux-Promise-Middleware] - Redux middleware for promises, async functions and conditional optimistic updates
* [Redux-Thunk] - Thunk middleware for Redux 
* [Babel](https://babeljs.io/) - A transpiler for javascript
* [Webpack](https://webpack.js.org/) - A module bundler
* [SCSS](http://sass-lang.com/) - A css metalanguage
* [Bootstrap 4](https://getbootstrap.com/) - Bootstrap is an open source toolkit for developing with HTML, CSS, and JS
* [Axios](https://github.com/axios/axios) - Promise based HTTP client for the browser and node.js
* [FavQs] Api - Provides quote data
* [Firebase] - Provides database as a service
* [Surge] - Static web publishing for Front-End Developers

It should be noted that I have used [Redux-Promise-Middleware] and [Redux-Thunk] libraries as middleware to handle asynchronous operations like fetching and persisting data. The reason why I am using both is due to performing chained asynchronous operations. If you don't require chaining, then I recommend only using [Redux-Promise-Middleware]. I have chosen not to use [Redux Saga](https://github.com/redux-saga/redux-saga) because I consider it "next level". However I do believe that once you [grok](https://www.merriam-webster.com/dictionary/grok) it, then it actually simplifies things a lot. It will make for a good followup project.

---

## Showcase

* Find the live demo **[here](http://react-redux-quotlify.drminnaar.me/)**

* Find the project on Github **[here](https://github.com/drminnaar/react-redux-quotlify)**

### Screenshots

![quotlify-screenshot-1](https://user-images.githubusercontent.com/33935506/35666235-e25aa2f8-0731-11e8-9d0c-8184ac9e49d5.png)

---

![quotlify-screenshot-2](https://user-images.githubusercontent.com/33935506/35666236-e520ef2e-0731-11e8-9107-6503274ba2d5.png)

---

![quotlify-screenshot-3](https://user-images.githubusercontent.com/33935506/35666239-e7aaead8-0731-11e8-8342-2534ea9a3c60.png)

---

## Conclusion

There are a few things that I would like to improve on this project like:

* Introduce paging on search
* Add more advanced search functionality
* Bring in quote tags and use them to help with filtering
* I would like to improve on the way I have done async chaining for the 'add to favorite quotes' functionality
* Add authentication and authorization to allow for different users to signin and manage quotes

Lastly, I would like to branch off this project and use [Redux-Saga](https://github.com/redux-saga/redux-saga) as middleware to manage asynchronous functions

[Redux-Promise-Middleware]: https://github.com/pburtchaell/redux-promise-middleware
[Redux-Thunk]: https://github.com/gaearon/redux-thunk
[React Router]: https://reacttraining.com/react-router/
[FavQs]: https://favqs.com/api
[Firebase]: https://firebase.google.com/
[Redux]: https://redux.js.org/
[Surge]: https://surge.sh/
[previous post]: https://dev.to/drminnaar/11-react-examples-2e6d