Coder Social home page Coder Social logo

manishaswain8 / reacttoweather Goto Github PK

View Code? Open in Web Editor NEW
21.0 2.0 30.0 1.27 MB

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 .

Home Page: https://react-to-weather.vercel.app

License: MIT License

HTML 3.73% JavaScript 56.19% CSS 40.09%
css hacktoberfest hactoberfest2023 html5 javascript opensource openweathermap reactjs tailwindcss

reacttoweather's Issues

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.

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.

Contributors in Readme.md file

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

Screenshot 2023-10-09 112744

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

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?

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.

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

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.

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.

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.

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

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

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

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

image

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.

image

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.

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:
Capture1

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context
Can I work on these issues?

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.

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:
scrnli_10_7_2023_9-14-34 AM

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]

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

Screenshot 2023-10-18 230049

Can I add this feature

Add docker capability

This project requires installation of the following prerequisites on the developer computer -
image
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 preloader to website 🔴

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

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 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 *

🔥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 !😃

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.

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 )

🌟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.

Screenshot (213)

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

Screenshot (214)

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.

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.

Make it responsive 💫💥

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

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

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.