Project Summary: BeWear
Published: 2024-04-12 04:23:13



## Introduction

In this article, I will present a web application project that was developed as part of a team project during my time at school.　

The main objectives of this school project were:

- To acquire practical experience in agile team development methodologies.
- To collaborate with designers and construct a prototype from inception to fruition within a 12-week timeframe.

For developers, an additional constraint was imposed: 
- To develop the app as a PWA
- Can't use any frameworks like React

　　

## Project Background

One of the problems I had when I came to Canada was that it took me a long time to decide what to wear in the morning. I was not used to the climate in a new place, and I couldn't find any references to people outside because they were from different countries and felt the temperature differently.
So I came up with an idea for an app that would take into account how sensitive users are to cold and heat, and suggest what to wear depending on the weather.

　　

## Technologies Used

![System Architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zt49nytq0gbtgrj1woed.png)

|  | |
|--------------|---------|
| Frontend | HTML, CSS, Sass, jQuery |
| Backend | Firebase |
| Database | Firebase |
| Auth | Firebase Auth |
| API | Geolocation API / OpenWeatherMap API |

　　

## Features


1. **Clothing suggestions**
    The app suggests the outfit based on the current temperature plus the temperature sensation if the users have chosen that they feel colder and warmer than the average people. So with different temperature sensations, the system will show different results of the outfit.

    (The images show outfits for Desktop users who tend to feel warmer and Mobile users who tend to feel colder.)

    | Desktop | Mobile |
    |--------------|---------|
    | ![Demo on Desktop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ny3j85l6ioxsvbtbhb3.png) | ![Demo on Mobile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ocdt5pl9vg7hdhwmil9.png) |

2. **Temperature Sensitivity**
    Users can setup their temperature sensitivity, which will calculate your sensitivity to hot and cold temperatures and show the best outfits for them.

    ![Temperature Sensitivity setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zdn1ksb6uzjbgdi298va.png)

3. **Weather forecast**
    Display weather forecast hourly

    ![Hourly Weather forecast](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fgw1k1z4yhrxll7zk810.png)

- Extra: Display specific UI when offline
    
    ![UI for offline](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iyvofrt1l758ad32lu3p.png)
  
　　
## Challenges Faced

Working on development as a team for the first time presented numerous hurdles, from grappling with Git usage to managing conflicts.

We prioritized frequent communication throughout the project. With only a 12-week timeframe, I didn't hesitate to seek help from teammates for issues I could have tackled solo given more time. Likewise, by actively supporting team members, we all developed the app　and learned more efficiently.

  
　
## Lessons Learned

I gained a comprehensive understanding of the flow of team development, from ideation to requirements definition, tech selection, system architecture, actual development, and debugging.

My introduction to Agile was eye-opening; the high levels of transparency and visibility amazed me. Progressing projects through tangible deliverables and witnessing the evolution of the product was inspiring. Consequently, I pursued further learning in Agile methodologies and obtained certification as a Certified Scrum Master.




That's it. Thanks for reading!