Quotlify, a React/Redux example project

#react #javascript #webdev #beginners

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

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

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

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

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

Favorite Quotes Page

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

Favorite Quotes Design

Developed With

Visual Studio Code - 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 - Javascript runtime
React - 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 - A transpiler for javascript
Webpack - A module bundler
SCSS - A css metalanguage
Bootstrap 4 - Bootstrap is an open source toolkit for developing with HTML, CSS, and JS
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 because I consider it "next level". However I do believe that once you grok it, then it actually simplifies things a lot. It will make for a good followup project.

Showcase

Find the live demo here
Find the project on Github here

Screenshots

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 as middleware to manage asynchronous functions