Noticing the successful trend of putting stories onto existing application, I quickly realized I needed to integrate the feature with one of my favorite and most frequently used application, Microsoft Office. Specifically Microsoft Word in this case.

What it does

You can take pictures via the webcam or upload images to the app to share them. You can also edit the images using one of our amazing filters! Not only that but soon (as soon as I figure out some bugs) you will be able to

How I built it

The front-end app is built on top of react using Typescript served through Microsoft's Office Add-in ecosystem. To produce the images and filters, I used Canvas along a few algorithms I found (praise the internet!). In the backend, I fully utilized firebase for storage, authentication, and real-time communications.

Challenges I ran into

Accomplishments that I'm proud of

It runs on both Microsoft Word Online & Desktop. Also implementing filters that can be applied on top of the pictures was incredibly tough.

What I learned

I learned typescript, which I didn't think I'd like but I was quite surprised. I also learned about setting up security for HTTPS. Lastly I learned a ton of canvas and image processing and most importantly to not mix css with canvas magic.

What's next for Office-Stories

Next up are storylines, which are featured stories that you can share to that everyone has access to. This sounds like a terrible idea at first

Share this project: