T-00

Cairo | Learning Through the Looking Glass

Why Webb

High-Level Project Summary

Our web app aims to provide the perfect go-to for anyone interested in learning about James Webb Space Telescope in simple words, all in one place.We relied on illustrations, animations, and fun interactive games.We've implemented two games:The first one compares photos of the same object taken by JWST and other telescopes,The second one simulates the mirror alignment phase.

Link to Final Project

https://github.com/omarr45/why-webb

Link to Project "Demo"

https://cisasuedu-my.sharepoint.com/:p:/g/personal/omr20191700413_cis_asu_edu_eg/EaeVCmRkwmVCmOJ2Jlyg-J8BkYpu8k1_fG4-SRhT9yVvDQ?e=f9tWwT

Detailed Project Description

Our project aims to help all generations (young and old) to learn more about James Webb Space Telescope and it's amazing capabilities.

The major problem we faced was that the majority of resources were targeting specialists and professionals, so we started rephrasing each piece of information in simple English, using simple examples, in order to be easily understood by amateurs and beginners.


When we began brainstorming, we decided that we shall develop a web app, not a mobile app, to be easily accessed from anywhere and on any device.

So, when thinking about the framework for developing our web app, we wanted it to be light and fast. That's why we used React JS as it's known for being capable of heavy state management.

Also for styling, we stuck to Tailwind CSS in order to have a smooth styling experience without lots of files.

Sure enough, we used GitHub for version control.

Lastly, we used Firebase Hosting service to deploy and host our website.

Space Agency Data

For learning about the telescope, how it works, and the milestones it reached, we relied on the official Nasa Blogs, and theESA Website.

For the images, we relied mainly on WISE Image Gallery, and the official NASA Image Galleries on Flickr.

Hackathon Journey

What inspired us was the lack of beginner-friendly websites that talk about JWST and can help astro enthusiasts to learn more about it.

The hackathon itself was pretty insightful and exciting. We learned a lot, time-management, co-operating, and getting a project done and deployed within hours.

Our approach was to develop a web-app to solve the problem stated earlier.

I'd like to thank my team for cooperation, and NASA Space Apps for this great opportunity.

References

React Libraries:

  • Tailwind CSS
  • Flowbite
  • React-Confetti
  • React-Confetti-Explosion
  • React-Dom
  • React-Router
  • React-Scroll-Motion

Images:

  • Official Nasa Flickr account(s)
  • WISE Image Galleries

Tags

#game, #web-app, #web, #jwst

Learning Through the Looking Glass

NASA’s James Webb Space Telescope is the largest, most powerful, and most complex space science telescope ever built. Your challenge is to develop a game to help people learn about the James Webb Space Telescope’s amazing capabilities.