TruSat is a citizen-powered satellite catalog, crowdsourcing observations of satellites to form an independent record of objects orbiting Earth.
This repo contains the frontend code for TruSat’s catalog app, providing citizen-scientists with orbit predictions to help them spot satellites and capture data. Anyone can submit their own satellite observations to automatically update the catalog’s orbit predictions.
- Visit TruSat.org to see the live app
- View the docs to learn more about the project
- Join the Discord to follow the development discussion
This repo was bootstrapped with create-react-app. You can clone the repo, install all the dependencies and run the app in development mode with the following commands in your Terminal:
git clone https://github.com/TruSat/trusat-frontend.git trusat-frontend
cd trusat-frontend
yarn install && yarn start
Open http://localhost:3000 to view it in the browser. The page will automatically reload if you make changes to the code.
.
├── App.js
├── App.test.js
├── app
│ ├── app-helpers.js
│ ├── app-styles.scss
│ └── components
│ ├── BurgerMenu.js
│ ├── Button.js
│ ├── ChatIcon.js
│ ├── CookieBanner.js
│ ├── CopyText.js
│ ├── DiscourseChatIcon.js
│ ├── Footer.js
│ ├── JoinTheMission.js
│ ├── MobileHeader.js
│ ├── NavBar.js
│ ├── ObjectBadge.js
│ ├── ScrollToTop.js
│ ├── SocialIcons.js
│ ├── Spinner.js
│ ├── TablePaginator.js
│ └── TrusatGlobeCanvas.js
├── assets
│ ├── Arrow.svg
│ ├── CircleCheck.svg
│ ├── ConditionBad.svg
│ ├── ConditionExcellent.svg
│ ├── ConditionFair.svg
│ ├── ConditionGood.svg
│ ├── ConditionPoor.svg
│ ├── ConditionTerrible.svg
│ ├── DeleteStation.svg
│ ├── Globe.svg
│ ├── ProfileAvatar.svg
│ ├── QuestionMark.svg
│ ├── SatSymbol.svg
│ ├── SketchLarge.js
│ ├── SketchSmall.js
│ ├── SketchTrusatGlobe.js
│ ├── TrusatLogoBig.svg
│ ├── TrusatLogoSmallBlack.svg
│ ├── TrusatLogoSmallWhite.svg
│ ├── earth-shadows-400px.jpg
│ ├── icon-arrow-up.svg
│ ├── icon-chat.svg
│ ├── icon-eye.svg
│ ├── icon-globe.svg
│ ├── icon-light.svg
│ ├── icon-location.svg
│ ├── icon-lock.svg
│ ├── icon-lowlight.svg
│ ├── icon-question.svg
│ ├── icon-relaxing.svg
│ ├── icon-rocket.svg
│ ├── icon-satellite.svg
│ ├── icon-time.svg
│ ├── icon-trash.svg
│ ├── icon-user.svg
│ └── icon-wave.svg
├── auth
│ ├── auth-context.js
│ ├── auth-helpers.js
│ ├── auth-styles.scss
│ ├── auth.test.js
│ └── components
│ ├── LoginForm.js
│ ├── LoginOptions.js
│ ├── MetaMask.js
│ ├── SignupForm.js
│ └── SignupOptions.js
├── catalog
│ ├── catalog-styles.scss
│ └── components
│ ├── CatalogNavBar.js
│ ├── CatalogNavDropdown.js
│ ├── CatalogTable.js
│ ├── DownloadCatalogFilterTleButton.js
│ ├── FilterDescription.js
│ └── HowToParticipate.js
├── index.js
├── objects
│ ├── components
│ │ ├── DownloadObjectTleButton.js
│ │ ├── FilterDescription.js
│ │ ├── HistoryMonthTable.js
│ │ ├── HistoryYearDropdown.js
│ │ ├── HowToSeeIt.js
│ │ ├── InfluenceTable.js
│ │ ├── Info.js
│ │ ├── ObservationsFilter.js
│ │ └── UserSightingsTable.js
│ ├── objects-context.js
│ └── objects-styles.scss
├── profile
│ ├── components
│ │ ├── ObjectsCollectedTable.js
│ │ ├── ObservationsTable.js
│ │ └── ProfileHeader.js
│ ├── profile-context.js
│ ├── profile-styles.scss
│ └── styles
├── serviceWorker.js
├── styles
│ ├── base
│ │ ├── _base.scss
│ │ ├── _reset.scss
│ │ └── _typography.scss
│ ├── helpers
│ │ ├── _mixins.scss
│ │ └── _variables.scss
│ └── main.scss
├── submissions
│ ├── components
│ │ ├── MultipleObservationForm.js
│ │ └── SingleObservationForm.js
│ └── submissions-styles.scss
├── user
│ ├── components
│ │ ├── DataSettings.js
│ │ ├── DownloadObservations.js
│ │ ├── EditProfileSettingInput.js
│ │ ├── ProfileSettings.js
│ │ ├── SavedLocations.js
│ │ ├── SecuritySettings.js
│ │ ├── StepFive.js
│ │ ├── StepFour.js
│ │ ├── StepOne.js
│ │ ├── StepThree.js
│ │ └── StepTwo.js
│ └── user-styles.scss
└── views
├── About.js
├── AccountSettings.js
├── AddStation.js
├── Catalog.js
├── ClaimAccount.js
├── Join.js
├── LogIn.js
├── MetamaskImport.js
├── ObjectInfo.js
├── PrivacyPolicy.js
├── Profile.js
├── SignUp.js
├── Submit.js
├── SubscriptionConfirmed.js
├── Terms.js
├── TestPilotConfirmed.js
├── VerifyClaimAccount.js
├── Welcome.js
└── views-styles.scss
Inspired by this post, the files in the src directory are grouped by domain. For example, within the submissions directory you will find all components (and their accompanying styles) related to the domain of observation submissions. At the time of writing this includes the MultipleObservationForm and SingleObservationForm components.
The assets directory contains all the svg files that are utilized by the front end. Other image files are hosted externally on AWS.
Run the tests with the following command:
yarn test
We very much welcome contributions, especially those that tackle open issues! If you wish to contribute, either open an issue then make a pull request or make a pull request against a currently open issue.
Our team uses the following convention for naming branches:
master- The production environmentdev- The branch used for deploying to the development/staging server environmentfeature/{name-of-feature}- A feature branchbugfix/{name-of-bug-being-fixed}- Fixing a bug larger in scope than a hotfixhotfix/{name-of-hotfix}- Hotfix changes for production issues (branches off master)chore/{summary-of-chore}- Cleaning up / organizing the codewip/{name-of-wip}- Branched out for some “work in progress” stuff (not ready, can be experimental and you want to keep a remote copy)
And here are some examples:
feature/single-iod-formfeature/single-iod-form-stylesbugfix/whitepaper-not-rendering-on-ipadhotfix/typo-on-welcome-pagechore/removing-unused-importswip/add-3box-for-authentication
- Referencing the branch naming convention outlined above determine the group and name for your branch then run
git checkout -b {group}/{name-of-group}to create the new branch and check it out. - Commit early and commit often with clear and concise comments. All commits should remain focused in scope so try to avoid submitting PR's that contain unrelated commits.
- Run
git push --set-upstream origin <your-new-branch>to add your new branch to the remote repo when you feel the work completed warrants a back up. - When ready to open a PR, use
git pushto add all your latest commits to the remote copy. - Do not open a PR without directing it to an open issue on GitHub. If an issue does not exist, create it and add a label. Here's an example:
The "How To" page content is out of date when compared to the latest communication content found in the TruSat discuss forum
- When ready click the green "New pull request" button on the "Pull requests" page for the repo on GitHub, making sure you are requesting to merge your branch into the
masterbranch. - Assign at least one reviewer to your PR.
- Add detailed comments to outline what your PR achieves and make sure to reference the issue that will be closed by this PR by utilizing the issue number. Bulleted lists are preferred. For example:
- Updates the “how to” view with the latest comms content
- New styles added including a change of font to the headers which matches the latest changes to the "About" page.
- This closes #32.
- Do not open the PR if there are merge conflicts found. Instead - push a fix to your branch that clears the conflicts.
- If no merge conflicts are found, open the PR.
TruSat is open source software licensed as Apache License 2.0.