https://github.com/fedellen/react-mars-photo-app

A practice project which renders the latest photos from the Mars Perseverance rover. Made with React and TypeScript.
https://github.com/fedellen/react-mars-photo-app

mars react typescript

Last synced: 2 months ago
JSON representation

A practice project which renders the latest photos from the Mars Perseverance rover. Made with React and TypeScript.

• Host: GitHub
• URL: https://github.com/fedellen/react-mars-photo-app
• Owner: fedellen
• License: mit
• Created: 2021-05-13T02:24:00.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2023-12-04T01:41:29.000Z (over 2 years ago)
• Last Synced: 2025-04-09T12:43:08.512Z (about 1 year ago)
• Topics: mars, react, typescript
• Language: TypeScript
• Homepage:
• Size: 1.11 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Mars Perseverance Rover Photos

This is a quick practice project I've been working on to sharpen my React workflow. By default, the application will render out the latest photos from the Mars Perseverance rover

Users can use the menu to search through the entire photo history of each Mars rovers: Spirit, Opportunity, Curiosity, and Perseverance. Photos are sorted and searched by sol, which is how many Mars days passed since the rover landed on Mars. The user can then sort the photos by the camera names

The app remains unfinished, but is live on [Netlify](https://react-mars-photo-app.netlify.app/)

[![Netlify Status](https://api.netlify.com/api/v1/badges/92ff2ad5-b2f6-4efa-a365-cb5688bd1ad4/deploy-status)](https://app.netlify.com/sites/react-mars-photo-app/deploys)

## Tools

- [React](https://github.com/facebook/react)

- [TypeScript](https://github.com/microsoft/TypeScript)

- [TailwindCSS](https://github.com/tailwindlabs/tailwindcss)

- [React Query](https://github.com/tannerlinsley/react-query)

- [Mars Photo API](https://github.com/chrisccerami/mars-photo-api)

---

## Available Scripts

In the project directory, you can run:

### `yarn start`

Runs the app in the development mode.\

Open [http://localhost:3000](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.

### `yarn build`

Builds the app for production to the `build` folder.

Committing to the master branch will trigger a Netlify deployment.