visakhvjn / random-quotes

beautifully designed and user-friendly app that delivers daily doses of inspiration and wisdom through a collection of random quotes from various sources. With just a tap, you can access a vast reservoir of motivational, humorous, and thought-provoking quotes that can brighten your day!

Getting Started with Create React App

This project was bootstrapped with Create React App.

Deployed at

You can find a working demo - https://effervescent-sprinkles-74c791.netlify.app/

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

random-quotes's Issues

Duplicate API calls during initial load

Two calls are being made for the first load. We don't want that.

marketing lists in sendgrid

a way to send emails to subscribers is by creating a campaign on sendgrid.
this would mean you use netlify endpoint at a particular time and send

cron -> netlify function -> send to sendgrid

or

you could hit the main web app URL and in useEffect fetch the users from firebase and send an email to sendgrid

cron -> web app -> send grid

check which one is easier

Speak and Copy should be disabled during Next Quote fetch

Speak and Copy should be disabled during Next Quote fetch

Save emails in firebase database

Add a place to get emails of users and save them to the firebase database

Netlify Functions

Are free for a certain number of requests a month.

So we are going to shift our API calls to netlify and get a quote dynamically (gemini or ninja)

Need icon

Need a icon for favicon

Initial load shoud not show empty buttons

On first load, we don't the 3 buttons to keep showing. Maybe a loader would be good for the first time.

Generate a random link for each quote

This will probably need a database so that we can attach a unique ID link to it.
When clicked from external sites, this particular quote should load up.

Bug: On text-to-speech end the speaking button should go back to old state

Subscribed Emails should not be subscribed again

Make a firebase serverless function that can check if email is unique

Allow to cancel speak

Give an option to allow to cancel text-to-speech

Add API key to Github Secret

The Keys are exposed in the code right now. Move them into github secret

Next click should disable the other two buttons

When the next button is clicked, the other two buttons should be disabled.
They will become enabled once the new quote is fetched.

A headline needed

1. Something like "Random Quotes" or something else
2. Also change the font weight to to show its less important than heading

Need a backend server

Need a backend server which will do two things -

1. Have an API that allows to add new quotes. Make sure to hash the author and quote so that duplicate ones don't go into the server.
2. Fetch quotes from the 3rd party API just enough to exhaust the quota - use a cron job for this.
3. A get api that gets quotes. We can sell this on Rapid API or APILayer once sufficient data is there.
4. Protech random hits to the server from untrusted sources

Handle when the API quota is exhausted

We have 5000 a month. How to prevent misuse
A way is to store the used quotes into a database. We can then random from there and occassionaly hit from the 3rd party provider.

Host it on a DO droplet - cheap one

Once the other issues are taken care of we can finally host this piece somewhere

add buy me a coffee plugin

Get quotes using Gemini API

60 QPM is free. They are saying no charge for input and output

Quote on email

A way for subscribers to get your quotes via email.
Use SendGrid.
check out how much they can sustain.

When a quote is copied, the link of the website should also be copied

This will give us traffic when re-posting somewhere.

While speaking, the next quote should not be fetchable

Currently when the text to speech is working, you can still fetch a new quote. This creates inconsistency as the old text is being spoken while the new text has arrived. Best to block fetching the new quote till the speech hasn't ended.

Show credits

Make a credits bar in the footer - for now have a Github, Twitter and Contact link.
The contact link can have a small modal that shows personal email id

show the version number right aligned. Keep updating this everyday when changes are made