Project link: https://spacestagram-annie-sun.herokuapp.com/
or
run locally using
npm start
- React
- JavaScript
- Node
- CSS
- HTML
- Figma
- Illustrator
- Infinite scroll to see all NASA's APOD pictures by newest
- Ability to like and unlike each picture
Branding
- I love creating branding for all my projects so I created a small logo that parodies instagram for this project
- I also created a graphic to display if the user hasn't like any photos
Unique UI
- Because of the long descriptions for each photo, I created a UI that shows preview for each photo to be first and then the user can choose to see full descriptions of photos they are intrigued by
Save Likes after Reload
- I used local storage to keep track of the photos the user liked and I used a hash-map to store these values to optimize the system
Liked Photos
- What's the point of liking the photo if it does nothing? That's why I added a new page that displays all the photos the user has liked
Link to Share Photo
- The user can also share the photo with friends by using the unique link generated for each photo
Animations
- I wanted to bring the app to life so I used animations to convey what's happening in the UI.
- A 'pop' to the 'Like button' to bring it to life
- A spinner to show that the app is loading
- Components sliding up or down to convey their position