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

Go here for live demo.

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

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

---

Screenshots

---

---

---

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.

---

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

The following software is required to be installed on your system:

• Node 8.x
• Npm 3.x

Type the following commands in the terminal to verify your node and npm versions

node -v
npm -v

Install

Follow the following steps to get development environment running.

• Clone 'react-redux-quotlify' repository from GitHub

  git clone https://github.com/drminnaar/react-redux-quotlify.git

  OR USING SSH

  git clone [email protected]:drminnaar/react-redux-quotlify.git

• Install node modules

  cd react-redux-quotlify
  npm install

ENV Setup

Before continuing, the following steps are required:

1. Get API keys for FavQs

   • Have a look at FavQs
   • Get an API key here

2. Setup Firebase

   • Visit the Firebase website to get started
   • See this guide to get started with setting up a web project to use Firebase

3. Setup environment variables

   • Add '.env' file Create a file called '.env' at the root of the application

   • Add environment variables to '.env' file

     FAVQS_API_KEY=##########

     FIREBASE_API_KEY=##########

     FIREBASE_AUTH_DOMAIN=##########

     FIREBASE_DATABASE_URL=##########

     FIREBASE_PROJECT_ID=##########

     FIREBASE_STORAGE_BUCKET=##########

     FIREBASE_MESSAGING_SENDER_ID=##########

   For more information about '.env', please visit dotenv-webpack

Build

• Build application

  This command will also run ESLint as part of build process.

  npm run build

• Build application and start watching for changes

  This command will also run ESLint as part of build process.

  npm run build:watch

Run ESlint

• Lint project using ESLint

  npm run lint

• Lint project using ESLint, and autofix

  npm run lint:fix

Run

• Run start

  This will run the 'serve' npm task

  npm start

• Run webpack dev server

  npm run serve:dev

• Alternatively run live-server (simple development http server with live reload capability)

  npm run serve

---

Versioning

I use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Douglas Minnaar - Initial work - drminnaar