/react-redux-quotlify

A quote browser and manager that allows one to search famous quotes and save them to a data store

Primary LanguageJavaScript

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

quotlify-app-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

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

quotlify-qod-component

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

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


Screenshots

quotlify-screenshot-1


quotlify-screenshot-2


quotlify-screenshot-3


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 git@github.com: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

  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