ReactJS Challenge #3: Create a Motivating Quote Generator with React

In this challenge, you will develop one of the main react applications for beginners. It'll help you to learn many Javascript and React concepts. This challenge differs slightly from Text Analyzer and Password Generator because you need to fetch data from json-server using Axios.

The best part of these challenges is that they have a built-in UI, and your role is to put logic in them. So, keep an eye on every minor detail to complete the challenge.

UI and Features Suggestions for React Random Quote Application

I have kept the app in a simpler version. You can make this app better by adding more features. The more you put in the effort, the more it'll become an asset for your portfolio or can be launched as a passion project.

What can you do more?

• You can add categories, and the user can choose what kind of quote he wants to read from their favorite type.
• You can also add another feature to allow users to favorite the quote, save it in local storage, or build a Nodejs API.
• Right now, you can only view one quote at a time. If you like, you can show multiple quotes in a grid and categories of quotes at the top or bottom of the page.

Which skills are going to test?

1. How to fetch API in react using axios
2. How useState and useEffect work
3. How to share quotes on social media
4. You can implement logic in Javascript

How To Start the Random Quote Challenge

If you have decided to take this challenge, so here are the steps to start this ReactJS challenge:

1. Fork Reactjs Coding Challenges GitHub repo
2. Go to random-quote-generator folder using cd random-quote-generator via terminal
3. Run npm install or yarn to install dependencies
4. Run the json-server using the command json-server --watch db.json --port 4000 in terminal (you can change the port too as per your need)
5. Run the react server using npm start, you will then see the below screen on your local host

Final Result

This is the live link to the fully functional App. Try yourself to understand the working.

User Stories for Random Quote Application Challenge

1. As soon the app loads, you must fetch quotes from the API using axios, randomize the API data and save all quotes in quoteList local state
2. As soon the app loads the app will show the user the first quote stored in the quoteList array
3. The quote will appear with quote text and author name as well (see the demo app)
4. The user cannot click the back/previous on the first load. Make it disabled at the beginning.
5. The app should show next quote from the local state (quoteList) when the user clicks the next button
6. When you select the previous button, a lastly showed random quote will be displayed. The app will show the quote from quoteList
7. Once the user generates all quotes, the local state (quoteList ) will be reset (empty), and repeat point 1
8. It may take a second or less to fetch data from the API. So when there is no data, show the "Loading…" text in the UI instead of an empty screen. After fetching data, replace it with API data (quote and author)
9. Users can share quotes with the author's name with his WhatsApp contacts and Twitter profile
10. Use typescript, as you can add more features to the application with intellicence and less chances of error
11. The browser console should not have an error

Extra Marks

1. Destructure the data wherever needed
2. Create a separate file for utils functions (you can name it utils.ts), in this challenge we need one util Javascript function for randomizing the array
3. Create a custom hook useQuoteFetcher for fetching data, and for all the business logic, API URL will be passed as param, API URL in our case is localhost:4000/quotes (you can change the port if you need)

Hints and Resources

1. Learn how json server works
2. Use math.random() to randomize the data
3. Understand how to fetch requests with axios
4. You need to keep track of current quote index for next and previous quote
5. To share on whatsapp use url https://wa.me/?text=... and for twitter https://twitter.com/intent/tweet?text=... with encodeURIComponent
6. Fullstack React with TypeScript is the complete guide to using TypeScript with React. Learn TypeScript patterns with React additional ecosystem advice (testing, redux, SSR) by building several apps including a Trello clone, a Medium-like website, testing with a digital-item e-comm app, and more!

For suggestions and collaboration, you can send me an email at [email protected] or can reach out to me on LinkedIn or Twitter.