How I created Inspirational Homepage Using React/Redux JS
This Inspirational Homepage app is built using React and Redux for state management, and Styled Components for styling. The app integrates multiple APIs to fetch dynamic data, such as the current weather, inspirational quotes, and background images. It also includes a feature to bookmark quotes. This app is designed to provide users with a daily boost of inspiration through the combination of personalized goal setting and API-driven dynamic content.
Steps:
Begin by installing Node.js on your system. Then, open Visual Studio Code and create a React app using the npx create-react-app command in the terminal. This will initialize your React project structure. Don’t forget to Navigate to the project folder.
Download and install all the necessary libraries, including Styled Components for styling, Axios for API requests, and React Icons for incorporating icons into the UI.
In a nutshell, set up the Redux store and a single reducer that manages all the app state. Hold state for weather, quotes and whether the bookmark is set.
Then Create a reducer.js file where we will define the logic to update the state when the user performs actions like bookmarking a quote, toggling the theme or updating the weather.
Wrap our app in the Redux Provider index.js so the store is available throughout the app.
Our App.js can also have routes for about, inspiration, and settings.
We get weather from OpenWeatherMap API, quotes from Ninja API and Unsplash API for dynamic backgrounds.
Use the Redux actions to handle user actions like adding, deleting, and toggling them as complete in goals component.
Use Styled Components to make the app visually appealing.
Link to Inspirational Homepage: https://github.com/devibbi/inspirational-homepage
Link to live: https://inspirational-homepage.netlify.app/
Link to my Profile: https://devibbi.com/