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 manage personal goals. 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.
1 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.
2 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. Also install redux.
3 In src/store.js, set up the Redux store and a single reducer that manages all the app state. Initial State will manage the current weather, background image, inspirational quote, and goals.
4 Than Create a reducer.js file where we will define the logic to update the state based on different actions. Create the Redux store in a store.js file and integrate the reducer.
5 Wrap our app in the Redux Provider index.js so the state is available throughout the app.
6 In our App.js, use Axios to fetch weather data, quotes, and background images, and dispatch them to our Redux store.
7 We will use Open Weather Map API, Quotes Ninja API and Unsplash API respectively.
8 Use Redux to manage goals with actions like adding, deleting, and toggling them as complete in goals components.
9 Use Styled Components to make our app visually appealing.
Link to Git hub: https://github.com/Devibbi/react-inspirational-homepage
Link to Informational-Homepage : https://inspirational-homepage-1.netlify.app/
I am Front End Developer and certified engineer from code academy. Know more about me on:
Link to my Profile: https://devibbi.com/
Top comments (0)