360gram

Tags

web Nuxt.js Firebase SPA

Creation Date

Mon Apr 01 2019

I have built a web app with Nuxt.js(which I love!) to share my 360° pictures 📷
The name is 360gram.
https://360gram.me

Why I made 360gram?

  • 360° picture is very interesting and different from other pictures
  • We can’t post 360 on Instagram
  • I wanted to make something with Nuxt.js x Firebase 🔥

What I have used to make 360gram

🔥Firebase

Why not?? I used

  • Authentication
  • Storage
  • Hosting
  • Firestore

They are just great 👏

🖼Pannellum

Pannelum is a panorama viewer. There are many JavaScript libraries like this, however, Pannelum is very easy to use and lightweight. I decided to use it.

🖍jimp

Image manipulation library for client-side.

The difficulties I had

iPhone supports images only up to 4096px 😢

This is the problem which I totally didn’t expect to occur…
1 YZFw2krTqFYXBvDWMH6BDg
So, I chose jimp to change the size of the width of the image which is more than 4096px. If the image user posts is over 4096px then the width size is going to be changed to 2000px.

Cors 😫

What is cors?? → Cross-Origin Resource Sharing (CORS) — HTTP | MDN

Pannelum is a client-side panorama viewer library, which means Pannelum works on a browser (in this case on 360gram.me). Pannelum fetches the image sources from Firebase storage (firebasestorage.googleapis.com).
360gram’s domain is different from the images source domain so I have to deal with it.

You can solve this problem with ↓
cors — Firebase Storage and Access-Control-Allow-Origin — Stack Overflow

New functions I’d like to add when the number of the user gets increased

  • following other users 👍
  • HashTag to pictures #️⃣
  • Looking for posts
  • Attaching the place information

My thought about this development and 360gram 😄

I have created lots of web apps which are kinda garbage…and this time I finally can feel that My skill gets a little bit better.

My style of development used to be like CakePHP on cheap rental server…but now it is like Nuxt.js with Firebase. What modern ??!

I know it’s difficult to continue to make one web app until I deploy it.
This time it is not so difficult and I guess the reason is that I can be one of the frequent users of 360gram and enjoy using it.

Close 🙏

I assume that not so many people take 360° pictures, but it is so unique and fun to watch!!

This time I created 360gram to put your fun 360° pictures so please share yours on 360gram 🙌

Thanks for reading.

On Medium
https://medium.com/@taishi.k/360gram-my-nuxt-js-app-with-firebase-for-sharing-360-pictures-ba4c487b77bc