This is a React PWA Weather Tool
- React functional components
- Customade, responsive and mobile-friendly design
- Semantic structure
- SEO Optimized
- PWA Features
- Town based weather search and map display
The power of PWA makes the app capable, reliable and installable. It will reach anyone, anywhere, on any devices with the same codebase. In this case, there is no need to develop the same app multiple times based on different devices and platforms.
The users have to get access and the best possible experience of the tool at any condition without leaving the user with empty or messed screen. Using the PWA features like offline version, self-updates, full responsiveness and browser compatibility will additionally benefit the users.
-
Progressive enhancement provides the baseline of essential content and functionality to as many users as possible, while delivering the best possible experience only to users of the most modern browsers, where this project is focused on.
-
Having an offline version of the app when the users don't have active internet connection. Also, this will prevent unloaded/blank pages due to bad/interrupted connection.
-
The tool is responsive for any device with a screen running a modern browser and optimized for people with disabilities. Providing the app with media queries helps to widen the scope of accessibility and ease-of-use on different screen devices.
-
The app is HTTPS secured against any third parties which try to get access to sensitive data. This makes connections between the user, app and server more secure.
-
Last but not the least, the web app will have an installable version accessible from the browser's tab. This will give users the possibility to install the web app locally with one click, regardless of the device and platform. It is a standalone app with a feeling of being like a native app. The installable version is available to all users with modern devices. The key element is a web manifest file, which lists all the information about the app in a JSON format. This information is used to display it as it were a native app to the platform it has been installed on.
Service Workers are a great way to progressively enhance the experience of the app. They are quite powerful and enable fast loading as they can take control over network requests, modify them, serve custom responses retrieved from the cache, or synthesize responses completely. This app is saving cache in the cache storage and it servers it to the user.
Installed Node Version 18+ (otherwise you can't run the project)
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify