ReactJS TailwindCSS Vite Responsive Mobile and Web Advice Generator

What are you most proud of, and what would you do differently next time?

I was able to learn a lot of new information and use it within my project. I feel that I was able to understand APIs, fetching data and displaying it in ReactJS TailwindCSS.

Also, I received a high Lighthouse Report score with (3) 100 scores for web accessibility.

Additionally, I was proud of being able to make the hover glow on the button using a box shadow in a CSS file.

Overall, it was a fun and interesting project!

What challenges did you encounter, and how did you overcome them?

I refreshed my knowledge and learned new information on various topics:

1. APIs in Website Development - An API (Application Programming Interface) enables different software applications to share information and interact with each other. It provides a set of instructions that allow software developers to access features and functions, facilitating communication between two pieces of software. The application sending the request is the client, and the application sending the response is the server.

2. Try-Catch Block - This construct handles exceptions and errors that may occur during the execution of a block of code. The try block contains the code that might throw an error, while the catch block contains the code to handle the error if it occurs. The code inside the try block is executed line by line. If no errors occur, the catch block is skipped. If an error occurs, control is transferred to the catch block.

3. JSON Parsing - JSON (JavaScript Object Notation) parsing is the process of converting a JSON string into a JavaScript object. JSON is a data interchange format that is easy for humans to read and write. JavaScript objects allow you to easily access and manipulate the data.

4. JavaScript Object Fundamentals - An object is a collection of key-value pairs where each key is associated with a value. The values can be of any data type.

5. useEffect Hook - This hook provided by React allows you to perform side effects in function components. Side effects can include data fetching and manually changing the DOM. In this code, you want to fetch the advice data as soon as the component mounts. With useEffect, you ensure the data fetching happens right after the component is rendered. The empty dependency array ([]) ensures the effect only runs once.

6. useEffect Dependencies - The useEffect hook can take dependencies to control when the effect runs. Common dependencies include state variables, props, context values, derived values, empty arrays, and no dependencies. If you have no dependencies, the effect will run after every render.

What specific areas of your project would you like help with?

I was able to finish all the requirements for the project!