- About the Project
- Installation
- Functionality
- User Feedback
- Learning Goals
- Future Iterations
- Technologies Used
- Contributors
- Contact
Planet Party is an application designed for kids to learn more about planets in our solar system. We implemented the Solar System OpenData API (view documentation) to display each planet and relevant planet facts. Users have the ability to sort planets by different criteria and click on a planet to view more information. In the single planet view, a user can view different fun facts about the planet compared to Earth and input a weight on Earth to see how it would compare to that planet. We were given 8 days to complete this project while learning and implementing TypeScript from scratch. The project specs and rubic are from the Turing School of Software and Design and can be seen here.
View the deployed site: here
- Fork this repository.
- Clone it down to your local machine with
git clone <your SSH Key>. - Navigate into this directory with
cd Planet-Party. - Run
npm installto compile the React application. - Run
npm startto see the app running locally. - Run
<your text editor> .to see the code in your text editor. - Run
npm run cypressto open Cypress and see all the tests.
- When a user visits the site they should be able to see all planets in the solar system, and sort planets by sort options.
- When a user clicks on a planet they should see a single planet view with various fun facts about the planet.
- Responsiveness was a consideration while designing this application. Our application viewed from a mobile device:
We made accessibility a priority in our application. Planet Party recieved a 100% acecessibility audit from Chrome's Lighthouse tool. Also using the Wave extension, our application has zero errors and zero contrast errors.
To maintain a better user experience, we implemented dynamic error handling, so that a user will receive a unique error message based on the type of error.
To create a more positive user experience, we implemented a loading message that will display while information is being retrieved from the API.
For this project we sent our deployed app out to kids to test out the functionality and used their feedback to improve the user experience. Here is some of the feedback we received from actual kids:
- "I love it! The only thing that is weird is when I click on a planet, it sends me to that page but as far down as the planet itself was on the homepage."
- "I think it needs like some changing maybe, it's like when you have 82 moons you can tell which one's identical and then you can put them together and like stick them together
more like a game. The overall look was really, I liked it, really good. It's like the whole like earthy thing, it kept my attention, it looked really good. Just that one thing needs to be changed." - "I 💙 it soooooooooo much! It's the best app/website ever! Love you! Bye 🌏 🪐"
- "This is fantastic. Isaac loved it so much. We had a lot of fun talking about how old we would be on different planets or how long a day is, and how much we would weigh on different plants. It was a lot of fun! ... Isaac really loved that feature
for how many pounds something weighs on earth."
- To learn and implement TypeScript; types, interfaces, and understanding type errors.
- Create an accessible app that has a clean UI and simple UX.
- Create a multi-page UX using React Router.
- Testing User Stories using
Cypress. - Get real user feedback, and adjust our application based on feedback.
- Create some type of game with data we have, maybe matching mass to each planet.
- Add a new view to learn about space weather, incorporating NASA's DONKI API.
- Katie B - Application Creator
- Alex Thompson - Application Creator
- Connor Anderson-Larson - Application Creator
