GitHub pages preview

Project: Weather App

A simple weather website where people can input their chosen city and view the weather forecast


View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Roadmap
4. Contributing
5. Contact
6. Acknowledgments

About The Project

I designed and implemented a secure and responsive weather app using JavaScript, React, and a serverless Express JS backend on Netlify to protect API keys ensuring data security. To enhance the user experience, I utilized popular React hooks including useState, useEffect, and useContext. The app automatically fetches the user's location based on their IP address, displaying relevant weather information and a photo. I skillfully employed Tailwind CSS and the Daisy UI library to create visually appealing, sleek, and highly responsive components that elevate the overall user experience.

(back to top)

Built With

• 
• 
• 
• 
• 
• 
• 

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

• npm

  npm install npm@latest -g

Installation

1. Clone the repo

   git clone [email protected]:sophiavf/Project-Weather-App.git

2. Install NPM packages

   npm install

3. Run the development server to start a local demo of the project

   npm run start

4. Distribution files can be produced using the command

   npm run build

(back to top)

Roadmap

• Implement form validation with Javascript and autocompletion to reduce user errors in the city selection input element
• Enable users to select imperial or metric units
• Implement a dark / light theme toggle, and on initial load use the users system preferences

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

Contact

(back to top)

Acknowledgments

• React documentation

(back to top)