I have built a web app with Nuxt.js(which I love!) to share my 360° pictures 📷
The name is 360gram.
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
Why not?? I used
They are just great 👏
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…
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.
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 (
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.
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.