Forem: Mali Gaurav

Guide: Creating a Weather App with React and OpenWeatherMap API

Mali Gaurav — Sat, 19 Aug 2023 13:14:08 +0000

In this guide, I'll walk you through the process of building a weather app using React and integrating the OpenWeatherMap API. We'll cover setting up your project, making API requests, displaying weather information, and adding styling using Tailwind CSS.

Note: You'll need Node.js and npm (Node Package Manager) installed on your machine before you begin.

Prerequisites
Setting Up Your Project
Getting OpenWeatherMap API Key
Making API Requests
Creating React Components
Styling with Tailwind CSS

Prerequisites

Before you start, ensure you have the following:

Node.js and npm installed on your machine.
Basic understanding of React.js and npm packages.
An OpenWeatherMap API key, which you can obtain by signing up on the OpenWeatherMap website.

Setting Up Your Project

Create a new React app using Create React App. Open your terminal and run:

   npx create-react-app weather-app

Navigate to your project directory:

   cd weather-app

Start your development server:

   npm start

Your React app should now be running at http://localhost:3000.

Getting OpenWeatherMap API Key

Visit the OpenWeatherMap website (https://openweathermap.org/) and sign up for an account.
Once signed in, navigate to your API keys section and generate a new API key.
Be sure to read and follow OpenWeatherMap's terms of use.

Making API Requests

Install the axios library for handling HTTP requests:

   npm install axios

Create a new file, e.g., openWeatherMap.js, in the src directory to manage your API requests:

   // src/openWeatherMap.js
   import axios from 'axios';

   const API_KEY = 'YOUR_OPENWEATHERMAP_API_KEY';
   const BASE_URL = 'https://api.openweathermap.org/data/2.5';

   export const fetchWeather = async (city) => {
     try {
       const response = await axios.get(`${BASE_URL}/weather?q=${city}&appid=${API_KEY}`);
       return response.data;
     } catch (error) {
       console.error('Error fetching weather:', error);
     }
   };

Import the fetchWeather function into your main App.js file and use it to fetch weather data.

Creating React Components

Create a new component to display weather information:

   // src/components/Weather.js
   import React, { useState } from 'react';
   import { fetchWeather } from '../openWeatherMap';

   const Weather = () => {
     const [city, setCity] = useState('');
     const [weatherData, setWeatherData] = useState(null);

     const handleFetchWeather = async () => {
       const data = await fetchWeather(city);
       setWeatherData(data);
     };

     return (
       <div className="container mx-auto">
         <h1 className="text-3xl font-bold mb-4">Weather App</h1>
         <div className="mb-4">
           <input
             type="text"
             placeholder="Enter city"
             className="border p-2"
             value={city}
             onChange={(e) => setCity(e.target.value)}
           />
           <button className="bg-blue-500 text-white p-2 ml-2" onClick={handleFetchWeather}>
             Get Weather
           </button>
         </div>
         {weatherData && (
           <div className="border p-4 rounded shadow">
             <h2 className="text-xl font-bold mb-2">{weatherData.name}</h2>
             <p>Temperature: {weatherData.main.temp}°C</p>
             <p>Weather: {weatherData.weather[0].description}</p>
           </div>
         )}
       </div>
     );
   };

   export default Weather;

Import and use the Weather component in your App.js:

   // src/App.js
   import React from 'react';
   import Weather from './components/Weather';

   function App() {
     return (
       <div className="App">
         <Weather />
       </div>
     );
   }

   export default App;

Styling with Tailwind CSS

If you haven't already, follow the steps in the previous guide to install and configure Tailwind CSS for your project.
In your Weather.js component, apply Tailwind CSS classes to style the elements:

   // src/components/Weather.js
   // ... (previous code)

   const Weather = () => {
     // ...

     return (
       <div className="container mx-auto mt-8">
         <h1 className="text-3xl font-bold mb-4">Weather App</h1>
         <div className="flex mb-4">
           <input
             type="text"
             placeholder="Enter city"
             className="border p-2 rounded-l"
             value={city}
             onChange={(e) => setCity(e.target.value)}
           />
           <button className="bg-blue-500 text-white p-2 rounded-r" onClick={handleFetchWeather}>
             Get Weather
           </button>
         </div>
         {weatherData && (
           <div className="border p-4 rounded shadow">
             <h2 className="text-xl font-bold mb-2">{weatherData.name}</h2>
             <p>Temperature: {weatherData.main.temp}°C</p>
             <p>Weather: {weatherData.weather[0].description}</p>
           </div>
         )}
       </div>
     );
   };

   // ...

Restart your development server to apply the Tailwind CSS styles.

Congratulations! You've successfully built a weather app using React and integrated the OpenWeatherMap API. Your app should now allow users to enter a city and display weather information for that city.

Remember to replace 'YOUR_OPENWEATHERMAP_API_KEY' with your actual OpenWeatherMap API key in the openWeatherMap.js file.

DEMO

Building a Dynamic Movie Database App with React Using the TMDB API

Mali Gaurav — Sat, 19 Aug 2023 13:10:04 +0000

In this guide, I'll walk you through the process of integrating the TMDB (The Movie Database) API into your React MovieDB app. We'll cover the steps to set up your project, make API requests, and display the retrieved data using Tailwind CSS for styling.

Note: Make sure you have Node.js and npm (Node Package Manager) installed on your machine before you begin.

Prerequisites
Setting Up Your Project
Getting TMDB API Key
Making API Requests
Displaying Data with React Components
Styling with Tailwind CSS

Prerequisites

Before you start, ensure you have the following:

Node.js and npm installed on your machine.
Basic understanding of React.js and npm packages.
A TMDB API key, which you can obtain from the TMDB website.

Setting Up Your Project

Create a new React app using Create React App. Open your terminal and run:

   npx create-react-app movie-db-app

Navigate to your project directory:

   cd movie-db-app

Start your development server:

   npm start

Your React app should now be running at http://localhost:3000.

Getting TMDB API Key

Visit the TMDB website (https://www.themoviedb.org/) and sign up for an account.
Once signed in, go to your account settings and click on the "API" section.
Create a new API key for your application. Make sure to follow TMDB's terms of use.

Making API Requests

Install the axios library to handle HTTP requests:

   npm install axios

Create a new file, e.g., tmdb.js, in the src directory to manage your API requests:

   // src/tmdb.js
   import axios from 'axios';

   const API_KEY = 'YOUR_TMDB_API_KEY';
   const BASE_URL = 'https://api.themoviedb.org/3';

   export const fetchPopularMovies = async () => {
     try {
       const response = await axios.get(`${BASE_URL}/movie/popular?api_key=${API_KEY}`);
       return response.data.results;
     } catch (error) {
       console.error('Error fetching popular movies:', error);
     }
   };

Import the fetchPopularMovies function into your main App.js file and use it to fetch movie data.

Displaying Data with React Components

Create a new component to display the list of popular movies:

   // src/components/MovieList.js
   import React, { useEffect, useState } from 'react';
   import { fetchPopularMovies } from '../tmdb';

   const MovieList = () => {
     const [movies, setMovies] = useState([]);

     useEffect(() => {
       const fetchMovies = async () => {
         const popularMovies = await fetchPopularMovies();
         setMovies(popularMovies);
       };

       fetchMovies();
     }, []);

     return (
       <div>
         <h1>Popular Movies</h1>
         <ul>
           {movies.map((movie) => (
             <li key={movie.id}>{movie.title}</li>
           ))}
         </ul>
       </div>
     );
   };

   export default MovieList;

Import and use the MovieList component in your App.js:

   // src/App.js
   import React from 'react';
   import MovieList from './components/MovieList';

   function App() {
     return (
       <div className="App">
         <MovieList />
       </div>
     );
   }

   export default App;

Styling with Tailwind CSS

Install Tailwind CSS and its dependencies:

   npm install tailwindcss postcss autoprefixer

Create the configuration files for Tailwind CSS:

   npx tailwindcss init -p

Open src/index.css and add the following lines to import Tailwind CSS styles:

   @import 'tailwindcss/base';
   @import 'tailwindcss/components';
   @import 'tailwindcss/utilities';

Style your components using Tailwind CSS classes.
In your MovieList.js component, apply Tailwind CSS classes:

   // src/components/MovieList.js
   // ... (previous code)

   const MovieList = () => {
     // ...

     return (
       <div className="container mx-auto">
         <h1 className="text-3xl font-bold mb-4">Popular Movies</h1>
         <ul className="grid grid-cols-2 gap-4">
           {movies.map((movie) => (
             <li key={movie.id} className="border p-4 rounded shadow">
               {movie.title}
             </li>
           ))}
         </ul>
       </div>
     );
   };

   // ...

Restart your development server to apply the Tailwind CSS styles.

Congratulations! You've successfully integrated the TMDB API into your React MovieDB app and styled it using Tailwind CSS. Your app should now display a list of popular movies with a great UI.

Remember to replace 'YOUR_TMDB_API_KEY' with your actual TMDB API key in the tmdb.js file.

DEMO

How to deploy React Apps On Netlify in Just Second's

Mali Gaurav — Fri, 11 Nov 2022 04:27:15 +0000

At Netlify we use React in production and are familiar with the challenges in deploying it to production as well. Up until today, React has had no opinions on what to use with tooling, which has made deploying a unique problem to each project.

Today Facebook announced their opinated boiler-plate for getting React projects started. This is great news, since the ecosystem around getting React projects started has been in a state of Flux (see what I did there?).

Steps to deploying your React app
Now you can get a React project up and running with a few commands, and in less than 30 seconds you can have it deployed with Netlify. Here's how:

Step 1: Install or create

Open your terminal and enter the following:

npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm run build

npm install netlify-cli -g
netlify deploy

Or deploy a create-react-app site with Netlify Functions support with just 1 click:

Step 2: Choose a new project

If you are using the netlify CLI, follow command line prompts and choose yes for new project and ./build as your deploy folder and voila you have a production React app!

If that was too hard to follow, here is a gif of me doing it:

You can also link to a GitHub repo for continuous deployment for specified branches and will grant you our nifty Deploy Preview feature.

Happy Hacking :)

Step 3: Redirect and rewrite rules

If you choose to use something for routing (like React Router for example), you will need to set up a redirect and rewrite rule for the single page app.

That redirect rule would look like this:

/*    /index.html   200

This redirect rule above will serve the index.html instead of giving a 404 no matter what URL the browser requests.

You can add redirect rules to the _redirects file or to your netlify.toml config file. For more information on redirects on Netlify checkout the docs.

netlify

Mastering Deployment: Showcasing Your React App on GitHub Pages

Mali Gaurav — Sat, 15 Oct 2022 05:57:06 +0000

To deploy your React app on GitHub Pages, follow these steps:

Create a GitHub Repository:
If you haven't already, create a new repository on GitHub where you'll store your React app's code.
Set Up Your React App:
Make sure your React app is ready for deployment. Run the following command to create a production build:

   npm run build

Install gh-pages Package: Use the gh-pages package to streamline the deployment process. Install it using:

   npm install gh-pages --save-dev

Configure package.json: In your package.json file, add the following lines:

   "homepage": "https://<username>.github.io/<repository-name>",
   "scripts": {
     "deploy": "gh-pages -d build"
   }

Commit and Push: Commit your changes and push them to the repository:

   git add .
   git commit -m "Preparing for deployment"
   git push origin main

Deploy to GitHub Pages: Run the deployment script using:

   npm run deploy

Check GitHub Settings:
In your repository on GitHub, navigate to the "Settings" tab. Scroll down to the GitHub Pages section and ensure that the source is set to gh-pages branch.
Access Your Deployed App:
After a few minutes, your React app should be accessible at the URL: https://<username>.github.io/<repository-name>
Update and Redeploy:
Whenever you make changes to your app, repeat steps 2, 4, 5, and 6 to update and redeploy your app.
Custom Domain (Optional):
If you have a custom domain, you can configure it in the GitHub Pages settings.

By following these steps, you'll effectively deploy your React app on GitHub Pages, making it accessible to a wider audience.

Forem: Mali Gaurav

Guide: Creating a Weather App with React and OpenWeatherMap API

Table of Contents

Prerequisites

Setting Up Your Project

Getting OpenWeatherMap API Key

Making API Requests

Creating React Components

Styling with Tailwind CSS

Building a Dynamic Movie Database App with React Using the TMDB API

Table of Contents

Prerequisites

Setting Up Your Project

Getting TMDB API Key

Making API Requests

Displaying Data with React Components

Styling with Tailwind CSS

How to deploy React Apps On Netlify in Just Second's

Mastering Deployment: Showcasing Your React App on GitHub Pages