# Openadhan: Muslim prayer times PWA made with ReactJS


![Openadhan logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/grw0yiplcjjzlad58y04.png)

## About
[Openadhan](https://openadhan.wrb.app) is a Web application made with Reactjs for calculating Muslim prayer times using local (auto) geo position (geotagging) or manually calculated geo position (reverse geotagging) (with city search).
Link: ( [https://openadhan.web.app](https://openadhan.web.app) )

## How to get the source code of Openadhan?
Well, you can get Openadhan source code from GitHub ([link](https://github.com/adelpro/Openadhan))
Support us by giving a star ⭐
## Features:
✔ _Simple to use_:
With responsive navigation menu mobile ready (sandwich) with active class to show the active (current) page, animated cards with minimalist white design and transparent footer, using Material UI v5

✔ _Auto geo position (geotagging)_:
calculating the location using the coordinates (latitude and longitude) calculated with the device sensors then showing the related city name using two different geotagging API ([Nominatim API](https://nominatim.org/): free open source, [Bigdatacloud API](https://www.bigdatacloud.com/): free limited)

✔ _Manual geo position(reverse geotagging)_:
searching for geoposition manually using city's name with the help of reverse geotagging API( [Nominatim API](https://nominatim.org/): free open source)

✔ _Made with ReactJS_:
ReactJS v.17 and React-router v.6

✔ _PWA ready_:
with service worker, manifest file, installable

✔ _Multi language (Arabic, English)_:
You can change the application UI language with a simple drop-down select menu, using React hooks and React Context API.

✔ _Configuration page_:
To adapt the app to your needs (UI, Adhan configuration, location, show/hide cards).

✔ _Save/load configuration from localStorage API_:
the configuration and geoposition is saved to the local storage using:[localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).

✔ _Offline API fetch_:
The results from Geoposition API fetch are saved in localstorage and loaded if there is no internet connection.

## Screenshots:
Desktop UI

![Desktop UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l78jse5uihu2xcyyykso.jpeg)

![Desktop UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g48ugppujuhvf01nhyau.png)
Mobile UI

![Mobile UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/edw5y1vz13v837ug01if.jpeg)

## Used libraries:
✔ ReactJS

✔ React-router v6

✔ MaterialUi v5

✔ AdhanJS

## Contact us:
Twitter: @adelpro

## Support us ❤️:
[Buymeacoffee](https://wwww.buymeacoffee.com/Adel.benyahia