Repository files navigation

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

Gohere 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

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

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 theFavQs API
• Favorite Quotes Page
  • Displays a list of all favorite quotes that were added via the application. The favorite quote data is managed via aFirebase database

The "page" components are configured to useReact Router for display and navigation.

Primary Component Design

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

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

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

Favorite Quotes Design

• 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 usedRedux-Promise-Middleware andRedux-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 usingRedux-Promise-Middleware. I have chosen not to useRedux Saga because I consider it "next level". However I do believe that once yougrok it, then it actually simplifies things a lot. It will make for a good followup project.

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

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 -vnpm -v

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-quotlifynpm install

Before continuing, the following steps are required:

1. Get API keys for FavQs

   • Have a look atFavQs
   • Get an API keyhere

2. Setup Firebase

   • Visit theFirebase website to get started
   • See thisguide to get started with setting up a web project to use Firebase

3. Setup environment variables

   • Add'.env' fileCreate 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 visitdotenv-webpack

• 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

• Lint project using ESLint

  npm run lint

• Lint project using ESLint, and autofix

  npm run lint:fix

• 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

I useSemVer for versioning. For the versions available, see thetags on this repository.

• Douglas Minnaar -Initial work -drminnaar