Project Site

https://caballero-react-ex.github.io/chillquotes/

Chillquotes: a Quotes Front-End App

A front-end ReactJS app that request quotes from a RESTful API and deliver them to the user to share. The project was created using the create-react-app CLI.

Table of Content

• Description
• Motivation
  • Project Goals
  • UX/UI Design
  • Accessibility
• Tech Used
• Installation
• Thanks

Description

A straight forward ReactJS web application using the create-react-app. The app consumes data from the Quote Garden REST API and deliver a quote to the user. She/He can copy that quote to the clipboard or share it directly in Twitter.

Motivation

This project was created by myself with the intention of getting better at React. I wanted to create my own small project, get my hands dirty and not just follow an online tutorial.

Project Goals:

1. Learn how to consume an API.
2. Get a better understanding how React Hooks works.
3. Learn and implement accessibility fundamentals.
4. Learn about PropTypes.
5. Use as little as possible dependencies.
6. Get comfortable with the ReactJS ecosystem.

After learning how to use axios and the fetch API, I decided to stick to the fetch API and avoid an extra dependency.

The majority of the React components and logic was written from scratch (and with the help of Stack Overflow and Google :). I chose not to use existing component libraries because that forces me to get a better understanding of React and I could practice my SCSS skills.

UX UI Design

The goal of this project was not to develop a great UI/UX design, just to focus on coding. But as a designer myself, I needed at least a minimun viable UX to pleased my eyes while coding. I didn´t designed everything from scratch, but got inspiration from the old medium.com landing site.

Accessibility

I implemented basic accessibility functions, like semantic html tags, good color contrast, properly focus function, WAI-ARIA functionality... to learn more about accessibility check the MDN web docs accessibility.

Tech Used

• React (create-react-app)
• SASS
• Fetch API
• PropTypes
• React-uuid

Installation

This project requires node and npm installed globally.

Clone the repository to a directory of your choosing

$ git clone https://github.com/caballero-react-ex/chillquotes.git

Navigate into chillquote directory and install the necessary packages

$ npm install 

To start up the app locally

$ npm start

Thanks

Many thanks to:

• Prathamesh More, creator of the Quote Garden REST API that I use for the ChillQuotes app.
• Github user JL978, who inspired me with his Spotify Clone Project to write a proper README file.