Giter VIP home page Giter VIP logo

react-weather-app's Introduction

Mini Project: Weather Application

Date: 22 - Jan - 2020

Functions

  • A simple React weather app that displays weather information & Forecast 5 days
  • Drag'n'Drop Forecast

Screenshot

Tech-Stack

  • React Hook
  • axios
  • react-dnd
  • redux
  • react-redux
  • redux-thunk

API Used

https://openweathermap.org/

Deploy

https://quay189.github.io/react-weather-app/

Plan Of Action

  • Add useHttpErrorHandler
  • Add Backdrop component
  • Add Modal component
  • Add Navigation component
  • Add Weather component
  • Add About component
  • Add Search component
  • Add Toolbar component
  • update AppLayout with withErrorHandler
  • remove padding-top of Search Component
  • Update About component with Modal
  • Update Search component
  • Add function updatedObject
  • Redux setup
  • Refactor code with React Hooks
  • Refactor code with Redux Hooks
  • React DnD setup
  • Add react-dnd to Forecast

After this project

I have understand about

  • Fetch API
  • Study React & Hooks
  • Study Redux & Hooks
  • Study react-dnd

Directory Structure

.
├── .gitignore
├── package.json
├── README.md
├── config
├── public
├── scripts
└── src
    ├── assets
    ├── components
        ├── About
            ├── Modal
        ├── Layout
            ├── Forecast
                ├── ForecastPerDay
            ├── Search
            ├── Weather
        ├── Logo
        ├── Navigation
            ├── NavigationItems
                ├── NavigationItemLink
                ├── NavigationParagraph
            ├── Toolbar
        ├── UI
            ├── Backdrop
            ├── Input
            ├── Modal
            ├── Spinner
    ├── container
        ├── AppLayout
    ├── database
        ├── icons.json
        ├── recommendations.json
    ├── hoc
        ├── Layout
        ├── withErrorHandler
    ├── hooks
    ├── shared
    ├── store
        ├── actions
        ├── reducers
    ├── axios-order.js
    ├── App.js
    ├── index.css
    └── index.js

Set up

Use the cmd line to clone repo to your computer

git clone [github_repo_url]

Use the cmd line to install dependencies.

npm install

Run in cmd for start the dependencies server

npm start

react-weather-app's People

Contributors

tinspham209 avatar renovate-bot avatar

Watchers

James Cloos avatar avatar

Forkers

huynhxuanlam-it44

react-weather-app's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

  • Replace dependency babel-eslint with @babel/eslint-parser
  • Update dependency babel-plugin-named-asset-import to v0.3.8
  • Update dependency babel-preset-react-app to v9.1.2
  • Update dependency react-app-polyfill to v1.0.6
  • Update dependency @testing-library/react to v9.5.0
  • Update dependency babel-loader to v8.3.0
  • Update dependency case-sensitive-paths-webpack-plugin to v2.4.0
  • Update dependency css-loader to v3.6.0
  • Update dependency dotenv to v8.6.0
  • Update dependency eslint to v6.8.0
  • Update dependency eslint-config-react-app to v5.2.1
  • Update dependency eslint-plugin-import to v2.29.1
  • Update dependency eslint-plugin-jsx-a11y to v6.8.0
  • Update dependency eslint-plugin-react to v7.34.2
  • Update dependency html-webpack-plugin to v4.5.2
  • Update dependency jest-watch-typeahead to v0.6.5
  • Update dependency mini-css-extract-plugin to v0.12.0
  • Update dependency pnp-webpack-plugin to v1.7.0
  • Update dependency postcss-flexbugs-fixes to v4.2.1
  • Update dependency prop-types to v15.8.1
  • Update dependency react-dev-utils to v10.2.1
  • Update dependency react-redux to v7.2.9
  • Update dependency react-router-dom to v5.3.4
  • Update dependency redux to v4.2.1
  • Update dependency resolve to v1.22.8
  • Update dependency style-loader to v1.3.0
  • Update dependency terser-webpack-plugin to v2.3.8
  • Update dependency ts-pnp to v1.2.0
  • Update dependency webpack to v4.47.0
  • Update dependency webpack-dev-server to v3.11.3
  • Update react monorepo to v16.14.0 (react, react-dom)
  • Update typescript-eslint monorepo to v2.34.0 (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
  • Update dependency @svgr/webpack to v8
  • Update dependency babel-loader to v9
  • Update dependency babel-preset-react-app to v10
  • Update dependency camelcase to v8
  • Update dependency css-loader to v7
  • Update dependency dotenv to v16
  • Update dependency dotenv-expand to v11
  • Update dependency eslint to v9
  • Update dependency eslint-config-react-app to v7
  • Update dependency eslint-loader to v4
  • Update dependency eslint-plugin-flowtype to v8
  • Update dependency file-loader to v6
  • Update dependency fs-extra to v11
  • Update dependency html-webpack-plugin to v5
  • Update dependency jest-environment-jsdom-fourteen to v1
  • Update dependency jest-watch-typeahead to v2
  • Update dependency mini-css-extract-plugin to v2
  • Update dependency optimize-css-assets-webpack-plugin to v6
  • Update dependency postcss-flexbugs-fixes to v5
  • Update dependency postcss-loader to v8
  • Update dependency postcss-normalize to v10
  • Update dependency postcss-preset-env to v9
  • Update dependency postcss-safe-parser to v7
  • Update dependency react-app-polyfill to v3
  • Update dependency react-dev-utils to v12
  • Update dependency react-redux to v9
  • Update dependency react-router-dom to v6
  • Update dependency react-scripts to v5
  • Update dependency redux to v5
  • Update dependency redux-thunk to v3
  • Update dependency resolve-url-loader to v5
  • Update dependency sass-loader to v14
  • Update dependency style-loader to v4
  • Update dependency terser-webpack-plugin to v5
  • Update dependency url-loader to v4
  • Update dependency webpack to v5
  • Update dependency webpack-dev-server to v5
  • Update dependency webpack-manifest-plugin to v5
  • Update dependency workbox-webpack-plugin to v7
  • Update jest monorepo to v29 (major) (babel-jest, jest, jest-resolve)
  • Update react monorepo (major) (eslint-plugin-react-hooks, react, react-dom)
  • Update react-dnd monorepo to v16 (major) (react-dnd, react-dnd-html5-backend)
  • Update testing-library monorepo (major) (@testing-library/jest-dom, @testing-library/react, @testing-library/user-event)
  • Update typescript-eslint monorepo to v7 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
  • 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

html
public/index.html
  • weather-icons 2.0.9
npm
package.json
  • @babel/core 7.7.4
  • @babel/runtime ^7.8.3
  • @svgr/webpack 4.3.3
  • @testing-library/jest-dom ^4.2.4
  • @testing-library/react ^9.3.2
  • @testing-library/user-event ^7.1.2
  • @typescript-eslint/eslint-plugin ^2.8.0
  • @typescript-eslint/parser ^2.8.0
  • axios ^0.19.1
  • babel-eslint 10.0.3
  • babel-jest ^24.9.0
  • babel-loader 8.0.6
  • babel-plugin-named-asset-import ^0.3.5
  • babel-preset-react-app ^9.1.0
  • camelcase ^5.3.1
  • case-sensitive-paths-webpack-plugin 2.2.0
  • css-loader 3.2.0
  • dotenv 8.2.0
  • dotenv-expand 5.1.0
  • eslint ^6.6.0
  • eslint-config-react-app ^5.1.0
  • eslint-loader 3.0.2
  • eslint-plugin-flowtype 3.13.0
  • eslint-plugin-import 2.18.2
  • eslint-plugin-jsx-a11y 6.2.3
  • eslint-plugin-react 7.16.0
  • eslint-plugin-react-hooks ^1.6.1
  • file-loader 4.3.0
  • fs-extra ^8.1.0
  • html-webpack-plugin 4.0.0-beta.5
  • identity-obj-proxy 3.0.0
  • jest 24.9.0
  • jest-environment-jsdom-fourteen 0.1.0
  • jest-resolve 24.9.0
  • jest-watch-typeahead 0.4.2
  • mini-css-extract-plugin 0.8.0
  • optimize-css-assets-webpack-plugin 5.0.3
  • pnp-webpack-plugin 1.5.0
  • postcss-flexbugs-fixes 4.1.0
  • postcss-loader 3.0.0
  • postcss-normalize 8.0.1
  • postcss-preset-env 6.7.0
  • postcss-safe-parser 4.0.1
  • prop-types ^15.7.2
  • react ^16.12.0
  • react-app-polyfill ^1.0.5
  • react-dev-utils ^10.0.0
  • react-dnd ^10.0.2
  • react-dnd-html5-backend ^10.0.2
  • react-dom ^16.12.0
  • react-redux ^7.1.3
  • react-router-dom ^5.1.2
  • react-scripts ^3.3.0
  • redux ^4.0.5
  • redux-thunk ^2.3.0
  • resolve 1.12.2
  • resolve-url-loader 3.1.1
  • sass-loader 8.0.0
  • semver 6.3.0
  • style-loader 1.0.0
  • terser-webpack-plugin 2.2.1
  • ts-pnp 1.1.5
  • url-loader 2.3.0
  • webpack 4.41.2
  • webpack-dev-server 3.9.0
  • webpack-manifest-plugin 2.2.0
  • workbox-webpack-plugin 4.3.1
  • gh-pages ^2.2.0
  • webpack-dev-server ^2.9.1
  • Check this box to trigger a request for Renovate to run again on this repository

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.