The NXT Frontier

An application for users to gain an understanding about SpaceX rockets

Summary

This application was built for users to learn more about SpaceX rockets and their history. When the user visits the website, the main page will include a rocket animation and an introduction to what the page is about. From there, if the user scrolls down, they can view a variety of news articles regarding SpaceX. There is an opportunity for the user to bookmark specific articles and store them for later reading to re-visit. The logo at the bottom of the page will return the user to the top of the home page.

When the user selects "Rockets" from the navigation bar, they will be taken to a page dedicated to the four SpaceX rockets that includes details about each of the rockets. The user can return home by either selecting the "Home" option in navigation or clicking the logo at the bottom of the page.

If a user enters a URL path that is incorrect, they will be directed to an error page to help guide them to the correct site address.

In addition, this application is set up as a Progressive Web App to offer the user full capabilities when offline. Users will still be able to store their bookmarked articles and those saved articles will persist when back online. This functionality also includes the ability to download the application to the user's desktop or mobile home screen for quick access. With a sleek, responsive design, the app will smoothly adapt to a variety of screen sizes.

Tech Used

Getting Started

Clone down this repo spacex-stretch
Then cd into the directory
Run npm install
Run npm start
Paste this: http://localhost:3000/ into your browser

Return to top

Current Features

User's bookmarked articles will persist on reload with implemented localStorage for an enhanced user experience.
User can un-bookmark any article to remove from their saved articles.
User can download the application to the device of their choosing for easier access.
User can use application offline.

Future Features & Noteworthy Limitations

Add more pages for the user to visit. Including pages about launch information, crew, and other SpaceX information will help round out the user experience.
Include more animations such as a comet or shooting star.
Improve the styling of the navigation buttons for more specific indications for which page is currently visible.

Preview

Return to top

Organizational Tools

* Find Project Spec Here

* GitHub Project Board

* Wireframe

* Inspiration Board

Reflection

This project was an opportunity to challenge us to self-teach two technologies we had not yet experienced: Progressive Web Application and GSAP animations. We had 9 days to build a React application MVP, as well as dive into learning these two technologies. We successfully implemented our application as a PWA after a lot of trial and error and collaboration with fellow teammates. After diving in, we still feel that we have only scratched the surface of how to manage a PWA, but are very excited that we chose this tech to better understand how to give users a more level playing field when it comes to internet accessibility as a whole.

In addition to PWA, we were also able to include two feature animations: a rocket launch and twinkling star background. The learning curve from what we expected (mostly CSS based work instead of JavaScript) was more time consuming than planned and caused us to scale back the animations that we originally aspired for. There is still room for modification as we continue to learn more about this tech and it's possibilities. It was thrilling to dabble in this unique tech and get a better understanding about how it works, as they are a way to make a website standout and captivate the user.

Overall, we are ecstatic with the MVP and product we achieved. The three of us worked extremely well together, balancing project expectations with our personal ideas that we wanted to explore. While striving to gain a basic understanding of a new tech, we all supported and encouraged each other and our learning. At the end of the day, this project had its challenges, but because we enjoyed each other's company, collaboration remained smooth and the project was ultimately a success.

Return to top