This device is not compatible.
PROJECT
Build a Random Quote Chrome Extension
In this project, we will learn to create a random quote Google Chrome extension using ReactJS, the Quotable API, Unsplash API, and a Node.js server.
You will learn to:
Build a Chrome extension.
Consume the Quotable API.
Consume the Unsplash API.
Persist data using MongoDB.
Convert an HTML canvas to an image and download it.
Use React hooks to develop the application.
Skills
API Integration
Web Development
Prerequisites
Basic understanding of HTML, CSS, and JavaScript
Basic knowledge of ReactJS
Availability of the Google Chrome browser
Basic understanding of server-side development with Node.js
Technologies
React
Node.js
MongoDB
Project Description
Chrome extensions are powerful softwares that enhance the capabilities of our Chrome browser. They serve various purposes, such as productivity tools, social media utilities, password managers, ad blockers, language tools, and educational apps.
In this project, we will build a personal Chrome extension to help us gain a better understanding of extensions. We will build it using ReactJS, the Quotable API, Unsplash API, and a Node.js server. These APIs will help us generate quotes, as well as their corresponding images.
By the end of the project, we will have built a Chrome extension that does the following:
Shows us the quote for the day by showing the quote and author
Displays a corresponding image that matches the quote using the Unsplash API
Provides the option to generate random quotes
Allows users to like a quote and enables them to find the quotes they have liked
Enables sharing of quotes on social media platforms like Twitter, LinkedIn, Facebook, etc.
Allows users to download a quote along with its associated image
Project Tasks
1
Introduction
Task 0: Get Started
Task 1: Create the Component's States
2
Consuming Quotable API
Task 2: Fetch Random Quotes Using the Quotable API
Task 3: Display the Quotes
3
Consuming Unsplash API
Task 4: Fetch Image by Keywords on Unsplash
Task 5: Display Image Corresponding to a Quote
4
Implement Quote of the Day
Task 6: Save Quote and Image to Local Storage
Task 7: Get Quote of the Day from Local Storage
5
Enable Quote Download
Task 8: Generate HTML Canvas
Task 9: Make Canvas Downloadable as Image
6
Create a Back-End Server
Task 10: Connect to MongoDB Atlas
Task 11: Create a User Model
7
Like and Share Quotes
Task 12: Create a Like Controller and Route
Task 13: Like a Quote
Task 14: Get a User's Liked Quotes
Task 15: Display Liked Quotes
Task 16: Share a Quote
8
Wrap Up
Task 17: Create a Build Folder
Task 18: Load and Use the Extension on Google Chrome
Congratulations!
Relevant Courses
Use the following content to review prerequisites or explore specific concepts in detail.