manishaswain8 / reacttoweather

ReactToWeather is an open source project one can find the current weather of any city irrespective of the location. This project looks very simple but looking forward to unique features and capabilities to it .

Welcome all to open source 🚀

📃 Table of Contents

1. About ReactToWeather
2. Want to Contribute?
3. Info About API
4. Prerequisites
5. Tech Stack Used
6. Preview
7. License
8. Code of Conduct

🙌 About ReactToWeather

-This is a beginner friendly project .

• One can get weather using city name.
• Temperature toggle available(toggle and convert temp into Fahrenheit,Kelvin,Celsius).
• Get info about wind speed,humidity,etc.
• Currently looking forward for new features.

*** Lets make it unique ***

💈 Want to Contribute?

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
Please checkout https://github.com/ManishaSwain8/ReactToWeather/blob/master/CONTRIBUTING.md

We welcome contributions through pull requests (PRs). To submit a PR, please follow these steps:

1. Fork the Project
2. Clone your forked repository

git clone https://github.com/ManishaSwain8/ReactToWeather.git

3. Run the following command to change the working directory

cd react-to-weather

4. Run the following command to install all the dependencies

npm install

or

npm i

5. Now go ahead and create a new branch and move to the branch

git checkout -b <branch-name>

6. After you have added your changes, follow the following command chain Check the changed files

git status -s

• Add all the files to the staging area

git add .

5. Commit your changes (add decent message )

git commit -m "<EXPLAIN-YOUR_CHANGES>"

6. Push your changes

git push origin <branch-name>

7. Open a Pull Request

• Make a pull request! (compare your branch with the owner main branch)

⚠️ Do not open PR unless it is assigned to you ,else the PR will not get merged !🚧

*** Banzai banzai, yatta ne !! ***

💫 Info about API

Use the api from OpenWeatherMap (Current Weather Data package)

OpenWeatherMap- https://openweathermap.org/current

🧾 Prerequisites

Before starting out, you'll need to install the following on your computer.

⚡ Tech Stack Used

👀 Preview

📜 License

This Community is Licensed under MIT license.

🧧 Code of Conduct

Check out Code of Conduct to know inclusive environment that respects all contributions.

We value an inclusive environment that respects all contributions. To ensure a positive experience for everyone, please review our Code of Conduct.

---

If you learnt something do give a ⭐ to this repo !!

❤️ Thanks to all the contributors

---

reacttoweather's Issues

Adding localisation support for the react application

Is your feature request related to a problem? Please describe.
As of now the app supports only english language. We can further enhance this and support multiple other languages via localisation integration.

Describe the solution you'd like
Add Localization to React App with react-i18next

Describe alternatives you've considered
NA

Additional context
Add any other context or screenshots about the feature request here.

Footer section in the bottom of the web-application .

Is your feature request related to a problem? Please describe.
there is only a black screen at the bottom of the page and want to make and update a good footer section that will help the user contact the owner of the project for such type of web applications.

Describe the solution you'd like
will add a simple footer section in the bottom ,

I have 2 options :

1. a simple footer in which I will mention created by ❤️by @ManishaSwain8
2. Footer section with all the contact us ,about us and etc .

Describe alternatives you've considered
or mention a new and alternative way for the footer section , I will update that also.

Pls assign me for the above mentioned changes
and after completing up the I will raise up the PR ASAP.

Label it with Hacktoberfest tag.

Fix API Calls for Weather Information

Problem:
While we have successfully integrated the Weather API into our web project to provide users with real-time weather information, we are currently facing an issue where the API calls are not functioning as expected. This is preventing us from displaying accurate weather data to our users.

Proposed Resolution:
To resolve this issue, we need to investigate and address the root cause of the API call failures. We should ensure that our API requests are properly configured, that we are handling responses correctly, and that any potential errors are being handled gracefully.

Proposed Changes:

Review the current API call implementation to identify any misconfigurations or issues.
Implement necessary changes to ensure the API calls are correctly formatted and authenticated.
Handle API responses and errors appropriately to prevent failures from affecting the user experience.

Code Optimisation

Describe the bug
There are many errors going in the terminal that need to be optimized. Like unused variables, etc.

To Reproduce
Steps to reproduce the behavior:

1. Run the app using npm start
2. Check the terminal for warnings

Expected behavior
The unused variables should be optimized for better performance

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 117.0.5938.134

Additional context

The warnings are shown as

src\App.js
  Line 1:27:  'createTheme' is defined but never used  no-unused-vars
  Line 3:8:   'axios' is defined but never used        no-unused-vars

src\Components\Home.jsx
  Line 13:10:  'city' is assigned a value but never used  no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in [eslint]
src\App.js
  Line 1:27:  'createTheme' is defined but never used  no-unused-vars
  Line 3:8:   'axios' is defined but never used        no-unused-vars

src\Components\Home.jsx
  Line 13:10:  'city' is assigned a value but never used  no-unused-vars

feat: custom scrollbar

Is your feature request related to a problem? Please describe.
The current user interface has the default scrollbar and does not match the theme.

Describe the solution you'd like
Style the default scrollbar.

Make it responsive 💫💥

Currently it looks weird , add some responsiveness to it keeping the overall structure in mind with UI regulations!
(TailwindCSS is preferd ) .

Fix the alignment issue

Currently the project is have alignment issues with buttons and input bars.

I want to work on this issue kindly assign it to me under HacktoberFest2023.

Request for Creating .env File

It would be better to create an env file where you can store the API key.

By doing this, you can ensure that pull requests are accepted only when the API key is provided. Additionally, storing the API key in an environment file is a safe and secure practice.

This might be the reason why it is not working: react-to-weather.vercel.app

UI / UX Optimization

Describe the bug
User experience needs optimization.

To Reproduce
Steps to reproduce the behavior:

1. Run the app
2. Enter the city and submit

Expected behavior

• A loader should appear while loading data.
• The app has layout shift that should be fixed.
• UI needs to be optimized (adding some custom components to make it look better)
• Few further bug fixes (Fixing console errors on running the app)

Screenshots
Layout shift:

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context
Can I work on these issues?

[FEATURES] UI Position

I want to update the UI position to make it more appealing to the user.

Adjust breakpoints for buttons "Get Weather" and "Show Forecast"

Hi,
I've noticed the buttons _Get Weather and Show Forecast are not wrapping accordingly. Between widths of 1073px-770px the buttons are actually disappearing on screen. I believe they should move somewhere below the search bar along with the mic icon so the responsiveness of the application is not prejudiced.

Video link of the issue: https://streamable.com/f66psi

I'd like to work on this issue, if possible.

PS.: liked this app very much, didn't have time to dig into its architecture, still it looks pretty nice. Good job!  

Add Toaster to give better user experience

Is your feature request related to a problem? Please describe.
Yes, the feature requested is to add a Toaster for the application so that the user can have a better user experience

Describe the solution you'd like
I would like to add a toast message when the data is fetched successfully from the api and vice versa when not fetched it will show a message to the user with a good ui giving the user a better experience for the app

@ManishaSwain8 if u can assign me this issue?

🌟Update existing UI /UX.🌟

Currently this looks weird and needs some proper alignments and updates.(Tailwind CSS preferred )
In the below image its not properly aligned ,suggest your ideas with images and examples.

This is the content you get after adding city or geo location (No changes required in content)

Add docker capability

This project requires installation of the following prerequisites on the developer computer -

This is prone to problems since installation might be different in different PCs.

Docker enable a way to containerized the development environment and the deployed product.

I suggest to docker build the project like this video suggests -
https://www.youtube.com/watch?v=8VHheCkw-7k

• Note that the old way will still work

Add a navbar in the header section.

Is your feature request related to a problem? Please describe.
Without navbar website doesn't look good. Navbar is present in every website

Describe the solution you'd like
I want to add a navbar in it with a title ReactToWeather

Refactor: Code Modularization

Add updated youtube videos of weather/hazard reports in multiple languages (Odia ,Hindi,English,etc)

Use youtube API to fetch data and display videos by making new page

Update TailwindCSS configuration .⚠️

Remove use of cdn.tailwindCSS and upadate module.export in tailwind.config.js.

As currently the cdn link is used in root index.html to trigger the tailwindCss properties,

Warning found:
cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI:

No need of PostCSS, only update Tailwind CLI.

Minor Issues

There are some minor issues with the repo such as:

1. There is the typo "Enetr your city"
2. The API is not called properly
3. The conversion of temperature units is buggy
4. Some variables are uncalled and the code is not much optimized
5. Upon changing the temperature units, the wind speed changes on its own

Spelling error

Describe the bug
Minor spelling error

To Reproduce
Steps to reproduce the behavior:

1. Go to home page
2. Spelling error can be seen on the placeholder to search for cities

Screenshot:

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Brave,Chrome
• Version: 2H22

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

i want to add Navbar and project title in it.

i want to add Navbar .
please assign me this task under Hacktoberfest 2023 tag.

Loader feature needed for better experience

Is your feature request related to a problem? Please describe.
Yes when there is an API call sometimes it may not get fetched hence a loader is needed for better experience

Describe the solution you'd like
Would like to add Loader for smooth user experience while fetching data from api

@ManishaSwain8 Can you assign me this issue

Button to get location

Add a Button to Take Users Longitude and Latitude form it's browser location

Add preloader to website 🔴

As the application grows eventually it will take time to load ,so a loader required (recommended package: react-loader /spinner)

error in searching up the lattitude and longitude as well as city name.

Describe the bug
While running up the same project locally there are details of weather being listed up while running the same project on vercel deployment there are error being raised up .

Assign me this issue and label it under Hacktoberfest ASAP.

Docs: Missing PR template

Is your feature request related to a problem? Please describe.
The project does not have a PR template

Describe the solution you'd like
A good PR template needs to be added for making Pull requests easier for everyone.

Additional context
I would love to add a PR template if the issue is assigned to me

Weather Forecast: Provide a multi-day weather forecast for the selected location.

Is your feature request related to a problem? Please describe.
Yes, the current application provides current weather data, but users are also interested in having a multi-day weather forecast for the selected location.

Describe the solution you'd like
I would like to see a feature added to the application that provides a multi-day weather forecast for the selected location. This would allow users to plan for the upcoming days and make informed decisions based on the expected weather conditions.

Describe alternatives you've considered
One alternative could be integrating with a weather API that provides multi-day forecasts. However, it would be more convenient to have this feature built into the application to keep the user experience seamless.

Additional context
Adding a multi-day weather forecast feature would enhance the utility of the application and provide users with more comprehensive weather information. It aligns with the user's needs and expectations for planning purposes.

feat: custom scrollbar

Is your feature request related to a problem? Please describe.
The current user interface has the default scrollbar and does not match the theme.

Describe the solution you'd like
Style the default scrollbar.

Add voice recognition search 🌟

Implement the search functionality using voice .

Contributors in Readme.md file

In the screenshot below, you can see that only one contributor is displayed.

I want to fix this by dynamically adding all the contributors of this project to the README.md file.

Add Loader for Data Fetching

Is your feature request related to a problem? Please describe.
The current user interface lacks a loader, making it difficult for users to know when data is being fetched.

Describe the solution you'd like
I would like to add a loader that is visible while data is being fetched. This loader will provide visual feedback to users, indicating that the application is actively retrieving data.

Describe alternatives you've considered
One alternative would be to rely solely on the user interface without a loader. However, this can lead to confusion and a less intuitive user experience.

Additional context
Currently, when a user submits a request for weather data, there is no visual indication that the data is being fetched. Adding a loader will improve the user experience by clearly indicating the ongoing data retrieval process.

Adding Docker Support

Your project is truly commendable and exhibits a good level of innovation and functionality. By integrating Docker support, it can be further elevated. Docker will streamline the deployment process, ensure consistency across multiple development, testing, and deployment environments, and reduce the overhead on system resources. This enhancement will not only make the application more robust and scalable but also align it with modern development practices, making your outstanding project even more exemplary.

Feature : Map add for location

Is your feature request related to a problem? Please describe.
A I want to add the map so that anyone can get the weather report just with the help of pointer like this

Can I add this feature

Getting weather details through geolocation

A feature where user can enter latitude and longitude coordinates to get weather details.

I am willing to contribute on this if assigned. Additionally, I have fixed the minor spelling error and temperature toggling issue.

🔥Temperature doesn't covert while toggling.

Whenever a person toggles on the options to convert to Celsius,Kelvin,etc the temperature doesn't convert. Make sure to use your api and more contributing process are present in readme.md.

Feel free to work on this bug !
Happy coding !😃

Change background as per weather.☔

The image in the background image must change as per the weather ,but not the whole background just the inner box background.

If, as currently the description text is white , you can make necessary changes as per background (can add glassmorphic effect )

Add Table of content in Readme.md and Contributing.md

Since both of the documents are lengthy, I would like to include a table of contents to facilitate convenient access to the content.

New feature requested ! 🐥

New features are openly accepted feel free to create issue on new features.

Add temperature converter calculator

Add a temp converter ,in new page and the redirect option is given in navbar "Converter" ,
Add converter with dropdown icon, having dropdown options like
-Celsius
-Kelvin
-Fahrenheit

It must have an input field ,drop down and result field

keeping color scheme in mind *