Skip to content

This is my React Weather App. It provides daily-forecast with actual data for places from all around the world.

License

Notifications You must be signed in to change notification settings

sldimitrov/ReactWeatherApp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Project Title: 🌀️

React Weather App

Description:

  • People nowadays can look straight in the future... You don't believe me? In order to knock you out I am presenting you my new project named React Weather App. My application allows you to predict the unpredictable and travel safely. Hourly-forecast with the essential data for the day is what I am offering you. The main purpose behind the project is my course work at Orbis and also to get familiar with JS framework, in my case with React.

Table of contents

Live demo of the functionality: πŸ”—

trimmed.online-video-cutter.com.mp4

Deployment 🌞

  • For the deployment of my project I have decided to use Vercel. It helps us to share any github project on the web with ease. After all, testing is the main reason I am deploying mine so...

Feedback πŸ’­πŸ’­

Knowledge stack: <βš›οΈ/>

Many core principles in React were applied as I have been developing this project.

react core concepts

βš™οΈ Lets begin with the JSX syntax that is something specific for this framework. Another crucial concept I have used in action are the components. They involve working with HTML, CSS and JS in order to being develop.
πŸ” So where I have received this weather data from? The answer is - OpenWeatherAPI. For the RESTapi requests I have been using Axios which provides excellent opportunity to handle requests and their reponses.
πŸŒ€ Some components have state and change dynamically. Other are rendered conditionality, but in the end, props is what is making them reusable and quite useful. In order to use my state across many components without prop-drilling I have used custom hooks and useContext to derive the state everywhere I need it. Other hooks that were implement in my project are useState, useEffect, useMemo and useCallback.

To sum up the tech-stack:

  • Core: React, JavaScript, HTML
  • Additional libraries: Axios, Sass

Setup / Installation: πŸ’»

Install React Weather APP with npm

  • First make sure that you have node and npm installed on your machine.
  • After that, clone the repo somewhere locally.
  • Open it in your favourite code editor and type this in the terminal:
  npm install

With this command you install all packages that you need to run the React project.

  • After the node_modules folder is being install type:
  npm start

Screenshots

Overview of the phone and tablet designs 🎨

tablet design phone design

Overview of the SearchHistoryTab πŸ”

search history tab

Status: πŸ“Ά

  • All tasks that were given to me for this project are completed. βœ…
    Although, I am not satisfied completely because there is always a thing or two to improve.
    Stay tuned for more! πŸ“ˆ

Credits: πŸ“

This project is course work for my internship in Orbis.

  • Here I want to express my gratitude for my menthor Mr. Serafimov. πŸ™
    He was always by my side and without him and his responsive help this project could never be finished.
    Along with that, thanks to the other workers in the companany that welcomed me warmly.
    Last but not least, acknowledgement to Mr. Kovachev that gave me the change to show my skills and determination and what I am capable of!

License: ©️

MIT License

About

This is my React Weather App. It provides daily-forecast with actual data for places from all around the world.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages