Design Space

When designing meets Augmented Reality

Comment

Inspiration

So personally, without even knowing that AR was a thing, I really liked it. It started with Pokemon GO. When I learnt the concept of AR deeply in the past few days I was fascinated. So I had this idea that I could make as a fun app and seeing that echo AR has sponsored this hackathon I was all for it. So I made it :)

What it does

Design Space is an AR-powered web application that allows you to view different furniture and decorative products in AR and try them out in real life (augmented). All you need is to visit the website, select the product, scan the QR code and then try the product in as many ways as you want in your house. (more details are shown in the demo video)

How I built it

The languages and technologies I used were

Frontend -

  1. HTML - Coding the structure of the app
  2. CSS - Styling the app and making it responsive
  3. JavaScript - Adding some functions
  4. Bootstrap - Used it for styling purposes as well

Framework -

  1. React JS - As the front end framework

Other Technologies -

  1. Firebase - Hosting the app online
  2. Github - Uploading code and sharing it
  3. IKEA database (polantis) - For downloading 3d models of products

Most important -

  1. Echo AR was the most important technology I used. It provided all the AR models through API requests. It also provided the QR codes. I uploaded all models from the database to Echo AR cloud and then linked them through QR codes. Overall it was the most fun and easy technology I have ever used!

Challenges I ran into

There definitely were some challenges that were tough and tedious like:

  1. There was no way to embed the Echo AR QR codes so I had to download the QR codes and then link them as images. This was the only downside of the platform I found.

  2. This was my first time ever using Firebase. So it was challenging for me to use it for hosting. I faced frequent errors but in the end, I successfully hosted it.

Accomplishments that we're proud of

There are some accomplishments I'm seriously proud of like

  1. Hosting the website
  2. Successfully linking Echo AR models
  3. Making the website responsive
  4. Completing the whole project in the given time. It seriously is a big accomplishment for me as a solo beginner

What I learned

I learned plenty of things during this hackathon like:

  1. Again, I learned the basics of hosting with firebase and now can host any website on it in future
  2. I learned more about React JS, I picked up react like 2 weeks ago and have been learning it. I rushed through tutorials about it during the hackathon, which I'm thankful for.
  3. Introduction to Echo AR!!! Definitely, this was the most enthusiastic thing in the hackathon. I learned the basics of Echo AR and now have a good amount of knowledge about it but I will learn more and be sure to use it in upcoming hackathons :)
  4. Also learnt a great deal about styling websites and also making them responsive

What's next for Design Space

I have some things in mind for design space like

  1. Improve the front-end and expand the website with lots of products
  2. Using Echo AR more immersively and set the static point through which products could be positioned while viewed in AR.
  3. Make it in form of an android app as well

And yes that's all

I really had a great experience and hats off to all the organizers/judges/mentors.

PS - Be sure to check out the website

poweredbyechoar

Share this project:

Updates