Random Quote Generator - Dev Challenges

Solution for a challenge from Devchallenges.io.

Demo | Solution | Challenge

Table of Contents

• Overview
  • Built With
• Features
• How to use
• Contact
• Acknowledgements

Overview

• Where can I see your demo?
  This frontend challenge was uploaded to the Netlify domains, because it is a very powerful service to upload your React projects to the internet.

• What was your experience?
  My experience at the end of this challenge has been satisfactory, since it made me review concepts that I had forgotten, it also helped me reinforce my knowledge of React such as React Context, React Router, state management, API requests with fetch, etc.
  Finally, I reinforced my knowledge of CSS flexbox using CSS modules and adapting the application for different mobile devices.

• What have you learned/improved?
  I improved my knowledge of custom hooks to reuse them and have a cleaner code, also, I got to know the basics of the React-spring library to make some animations.
  Finally, I learned how to manage timeout using a loader while data is coming from an api, this way, it allows me to control the information that is displayed on the screen, and avoid rendering components without information.

Built With

• React
• CSS Modules
• React-Spring

Features

This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories.

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository, I used Vite instead of React-create-app
$ git clone https://github.com/PatrickNv23/Random-Quote-Generator-devChallenges

# Install dependencies
$ npm install

# Run the app with Vite
$ npm run dev

Acknowledgements

• Steps to replicate a design with only HTML and CSS
• Node.js
• Marked - a markdown parser

Contact

• GitHub @PatrickNv23