Summary
This is a followup on a previous post where I presented 11 React projects to help those getting started with React programming. In this post I present the 12th project in the series, and is called '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
Links
Key Takeaways
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
Project 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
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.
Showcase
Screenshots
Conclusion
There are a few things that I would like to improve on this project like:
- Introduce paging on search
- Add more advanced search functionality
- Bring in quote tags and use them to help with filtering
- I would like to improve on the way I have done async chaining for the 'add to favorite quotes' functionality
- Add authentication and authorization to allow for different users to signin and manage quotes
Lastly, I would like to branch off this project and use Redux-Saga as middleware to manage asynchronous functions
Top comments (5)
Great! inspirational project
Awesome! Thanks.
Very nice project to start React-Redux
Wow, this is really cool stuff! This is some great code to look at if you want to get started with React!
Thanks Jake! I'm glad you found it useful.