Weather web applications have become increasingly popular, offering users real-time weather data and visualizations. In this blog, we will explore how to build a weather web application using React, Redux, TypeScript, Webpack4, Ant Design, ECharts, and Firebase. This comprehensive guide will walk you through the essentials to get your app off the ground and running smoothly.

Table of Contents

• Introduction
• Prerequisites
• Local Development
• Write Your Own Google Cloud Functions
• Deploy to Firebase
• Webpack, ReactJS, and TypeScript
• TypeScript, ESLint, and Prettier
• Ant Design
• ECharts
• Windy API
• Mapbox

Introduction

This project demonstrates the utilization of various technologies to build a feature-rich weather web application. It leverages Ant Design for UI components, ECharts for data visualization, and Firebase for backend services including deployment and serverless functions.

Prerequisites

• The latest version of Node.js and npm must be installed.
• Google Geocoding API Key.
• Google Firebase project.
• Dark Sky weather API key.
• Windy API key.
• Mapbox API key.

Note: Since keys are protected, you need to apply for your own API key for each service.

Local Development

1. Clone the repository:

   git clone https://github.com/LaurenceHo/react-weather-app.git

2. Install npm packages:

   npm i

3. Start client using Webpack dev server:

   npm run start

   and visit http://localhost:8080.
4. In local development, we use a Node.js Express server to return a mock JSON response. Navigate to the dev-server folder:

   cd dev-server

   and run

   npm i

   .
5. Start the Node.js Express server:

   npm start

   .
6. Add your Windy API and Mapbox API keys into .src/constants/api-key.ts.
7. Run the bundling process:

   npm run build

   .

Write Your Own Google Cloud Functions

For more details on writing your own functions, please visit: Google Cloud Functions.

Deploy to Firebase

1. Put your Google Geocoding API key and Dark Sky API key into .functions/apiKey.js.
2. Change the Google Cloud Function URL in api.ts to your own Cloud Function URL.
3. Create a new project in the Firebase console: Firebase Console.
4. Check here for detailed instructions on deploying your app to Firebase.
5. To deploy the full project:

   npm run firebase-deploy

6. To deploy only the cloud functions:

   npm run deploy-functions

Webpack, ReactJS, and TypeScript

Creating a React app using Webpack from scratch gives a clearer understanding of how these technologies work together. Here’s where the analogy kicks in:

Think of Webpack as a chef preparing a multi-course meal. Ingredients (like JavaScript, CSS, and images) need to be prepared in specific ways before they are served on a plate (your web application). Each ingredient has its own preparation method (loaders), and once they are prepared, they are all combined into a delightful meal (bundled into your application).

module.exports = {
    entry: './src/index.tsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js',
    },
    resolve: {
        modules: [path.join(__dirname, 'dist'), 'node_modules'],
        extensions: ['.ts', '.tsx', '.js', '.json'],
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
            },
            {
                enforce: 'pre',
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'source-map-loader',
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(jpe?g|png|gif|ico)$/,
                use: ['file-loader'],
            },
            {
                test: /\.(ttf|eot|svg|woff|woff2)(\?.+)?$/,
                loader: 'file-loader?name=[hash:12].[ext]',
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html',
        }),
        new CopyWebpackPlugin([{ from: 'src/assets', to: 'assets' }]),
    ]
};

TypeScript, ESLint, and Prettier

Using ESLint along with Prettier can make code formatting a breeze. Utilize the following steps to set it up:

1. Install the necessary packages:

   npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react prettier

2. Modify your .eslintrc.json configuration to integrate TypeScript and React support.

Ant Design

Getting Started

Ant Design provides a great UI component library for React applications. Begin by installing it:

npm i antd

Usage

To keep things organized, only import the components you need:

import Col from 'antd/es/col';
import Row from 'antd/es/row';

ECharts

Getting Started

To start using ECharts, install it with:

npm i echarts -S

Usage

Import only the required components in your TypeScript files:

import * as echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/line';

Windy API

To use the Windy API, import the necessary scripts in your HTML:

Then declare its usage in your TypeScript declaration file.

Mapbox

Install Mapbox by following the instructions provided on the Mapbox documentation.

Import the necessary styles and instantiate Mapbox to get started.

Troubleshooting

If you run into issues during development or deployment, consider the following:

• Ensure all API keys are correctly set up and have permissions.
• Check console logs for any errors during the application loading.
• Review the Webpack configuration for any typos or misconfigurations.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

License

This project is licensed under the MIT License – see the LICENSE.md file for details.

Screenshots