About

Spacestagram is a web app where users can browse through NASA’s pictures, read about their context and information and save their favorites.

👉 Try it out here

👉 Figma design here

Table of Contents

1. Technologies Used
2. App Features
3. Future Improvements
4. About the Developer
5. Deployment

Technologies Used

• React
• TypeScript
• HTML
• SCSS
• NASA's APOD API
• React Router
• React Intersection Observer
• React Testing Library

App Features

• Users can browse through all the NASA's astronomy pictures on the feed page and give a "like" to as many as they want.
• Liked pictures will appear the in "Pictures you've liked" section of the feed page. The "unlike" action from the user will remove the picture from the section.
• A user can read more information about a specific picture (such as the picture's date, context, copyright, etc..) by going on the picture's details page.
• Each picture has a details page with a designated url that can be shared. All links created using React Router.
• The design of the app is responsive and can be viewed on all devices.
• The feed page loads additional pictures as the user scrolls down (infinite scroll implemented with React Intersection Observer).
• A user's liked pictures to local storage so results will persist even if they leave the page.

Future Improvements

• Add a UI skeleton loading animation while user wait for NASA’s API to return data.
• Add a date picker component to the feed page to allow users to filter the feed's pictures according to their chosen period.

About The Developer

Hi! 👋 I'm Chi-Luc, a Frontend Developer currently working as a UX Designer in the Usage Analytics team at Coveo. I love to build accessible and easy to use UI's to solve real world problems.

Deployment

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.