PraesidioUV

My app allows users to prepare and protect their skin from harmful UV rays that are undetected through a daily basis.

Comment

Inspiration

My main inspiration that made me make this app is when I went to my grandfather's farm in India. I observed how most of the farmers had terrible skin conditions due to the long hours of working and the highly exposed UV radiation. UV radiation and exposure does not correlate with the temperature or heat during the day. This makes high amounts of UV radiation to be undetected throughout the day in various parts of the world. I wanted to develop an application that allowed users to understand the dangers of UV radiation and increase their skincare.

What it does

The app returns the UV value and a trained dataset of certain clothing articles and information based on the given UV index of the location. It can return virtually any UV index in the world based on a web-scrapping algorithm that I used to return the coordinates of a certain location.

How I built it

I based the overall frontend of the application on React Native Expo while building the backend with a REST API and a Python 3. Since I only had a few hours to learn React Native Expo, I needed a method to connect the frontend of React Native through some sort of backend based on Python. This is where I implemented my custom-built REST API through Flask. The FLASK API returns back a JSON formatted response on any location. I used OpenWeather API for the UV index and values and used Beautiful Soup and HTMLSession to scrap coordinates of certain locations on Google's search algorithms. With the coordinates and the UV index, I made my own trained JSON dataset of various clothing articles to wear as well as other information. Based on the UV index it returned its designated headers and responses of the JSON dataset. The frontend was based on React Native and using JSX for the UI of the app. To connect both sides of the frontend and the backend I had to use the fetch function to get perform API calls.

Challenges I ran into

The main challenge that I ran into was building the frontend of the application. I had a few hours to learn the overall React Native based on their documentation and other advanced reference websites. Yet, in the end I built a well-performing UI. The other main challenge was connecting the frontend and the backend. The javascript function was not letting me get API calls from locally hosted API. This was due to the Cross-origin resource sharing (CORS) policy that I had in the app. Though this I was not able to fully complete the app itself.

Accomplishments that I'm proud of

Some of the accomplishment that I am proud of is finding a method to connect both React Native and a Python backend. In addition, I am proud how this hackathon enabled to learn new skills such as React Native and cross-origin sharing between two distinct technologies. I even built a clean looking UI by learning React Native in under 24 hours.

What I learned

  • Cross-origin resource sharing policy
  • React Native and JSX
  • Async storage and basic functions in React Native
  • FLASK RESTful API

What's next for PraesidioUV

After this hackathon ends I wish to complete the app between the frontend and the backend. I wish to implement a better machine learning model into the app to return custom based outputs to the users. I was planning on using a collaborative-filter algorithm, yet ran out of time to implement this. I also wish to create user authentication through Firebase and improve the UI design.

Share this project:

Updates