Random Quote Machine

The following application is a quote machine that pulls random quotes from Quotable API and is built using Parcel, Sass and ReactJS.

Motivation

This project was made for the Front End Development Libraries Certification on Free Code Camp.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
  • Features
• Getting started
  • Prerequisites
  • Installation
  • Built with
  • License
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size

• See a random quote displayed upon first load

• Display a new quote upon clicking the "New Quote" button

• Tweet a quote by using the twitter.com/intent/tweet path

Screenshot

Desktop View

Mobile View

Links

• Project URL: Github Repository
• Live App URL: Github Page

Features

The design of the project was taken from the sample project provided by Free Code Camp as an example output and includes some features not included with the sample project, these include:

• The application was built from scratch using ReactJS
• Parcel was used to bundle all the files to reduce file size
• The quotes we retrieved using the Fetch API from the "Quotable" API
• Uses CSS variables to change the theming of the application
• Displays a loading animation for the first API request
• And is mobile responsive

Getting started

Prerequisites

You are going to need the latest version of NPM in order to install this project on your machine.

• npm

  npm install npm@latest -g

Installation

1. Clone the repository

   git clone https://github.com/N-Nikolaev/random-quote-machine.git

2. Install NPM packages

   npm install

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Grid
• Mobile-first workflow
• SASS - CSS Preprocessor
• Parcel - Web Application Bundler
• ReactJS - JavaScript Library / Framework
• FontAwesome - Icon toolkit
• Quoteable API - Open source quote API
• Favicon.io - Favicon generator

License

Distributed under the MIT License. See LICENSE for more information.

Useful resources

1. FCC - Random Quote Machine Example Project
2. Why you should be using Parcel.js for React, Sass, CSS, Vue, and more
3. Add SASS to React
4. Add SASS to a barebones React project
5. Fetching Data with React Hooks useEffect
6. React hooks fetch data
7. Dark theme in a day
8. Call Parent Function from Child Component
9. Best README Template

Author

• Github - Nikolay Nikolaev
• Frontend Mentor - @N-Nikolaev

Acknowledgments

• Free Code Camp
• ReactJS
• Parcel
• SASS
• FontAwesome
• Quoteable API
• Favicon.io
• Flatuicolors
• Medium - @sroskelly
• Medium - Marcin Wichary
• CodingEntrepreneurs
• The Net Ninja
• Frontendmentor.io
• @othneildrew