https://github.com/andyfrith/astro-demo
This frontend application was created for the purpose of experimentation while becoming familiar with the Astro Space UX Design System. The demo application explores not only the Astro Space UXDS Design System, but also the use of Web Components in building applications using React.
https://github.com/andyfrith/astro-demo
Last synced: 12 months ago
JSON representation
This frontend application was created for the purpose of experimentation while becoming familiar with the Astro Space UX Design System. The demo application explores not only the Astro Space UXDS Design System, but also the use of Web Components in building applications using React.
- Host: GitHub
- URL: https://github.com/andyfrith/astro-demo
- Owner: andyfrith
- Created: 2025-01-15T14:21:18.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-01-15T15:44:27.000Z (over 1 year ago)
- Last Synced: 2025-03-17T03:41:54.028Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 1.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![Unlicense License][license-shield]][license-url]
[![LinkedIn][linkedin-shield]][linkedin-url]
Astro UXDS Demo
This frontend application was created for the purpose of experimentation while becoming familiar with the Astro Space UX Design System. Designed by Rocket Communications, this Design System serves to standardize rich space app experiences using established interaction pattens and best practices. The demo application explores not only the Astro Space UXDS Design System, but also the use of Web Components in building applications using React.
![Product Name Screen Shot][product-screenshot]
## Astro Space UX Design System
![Astro UX Design System Screen Shot][astro-uxds-screenshot]
### Why Astro?
The Astro design system brings together UX guidelines, HTML/CSS framework, and web components to design and develop a modern, consistent user experience. Astro was commissioned by the United States Space Force and Space Systems Command (SSC) for designing Rapid Resilient Command and Control (R2C2) and Satellite Operations (SATOPS) web applications. Astro’s designs are based on user-centered research into the functions and capabilities required for applications used in space operations. This approach involves SMC and commercial space systems operators in all phases of research and design validation. Their direct participation ensures that applications developed with these guidelines will meet user needs. Astro is a living design system for government and commercial space-based applications, created and stewarded by Rocket Communications Inc., for the United States Space Force and Space Systems Command (SSC).
- [Astro Space UX Design System](https://www.astrouxds.com/)
Copyright © 2023 Rocket Communications, Inc.
### The Astro Component Library
The Astro UXDS Web Component library provides a starting point to build in-browser space app experiences and custom applications following today’s web development best practices.
### Using Astro UXDS and Web Components Library
The Astro Space UX Design System, which includes user workflows, interfaces, visual components, system functionality, sample code, style guides, best practices guidelines, sample applications, and related sample software, all of which is publicly available at www.astroUXDS.com (collectively referred to herein as the “Software”), is developed and maintained by Rocket Communications, Inc. (“Rocket”) through a contract with the United States government.
Astro is provided as an open-source tool under the Astro Space UX Design System Interim License Agreement.
As a work commissioned by the United States government, the Software is in the public domain within the United States.
## About The Astro UXDS Demo
There have been many great space apps gifted to this world and beyond; however, I am responsible for this one. On an impulse, I wanted to quickly create something in React, using React Context, utilizing the Astro UX Design System. This demo relies on integration of the web components library (https://github.com/RocketCommunicationsInc/astro) provied by the team at Rocket Communications (https://www.rocketcom.com/).
### Built With
[![Astro][AstroUXDS]][Astro-url]
[![React][React.js]][React-url]
[![TailwindCSS][TailwindCSS]][TailwindCSS-url]
[![Vitest][Vitest]][Vitest-url]
## Contact
- Andy Frith (LinkedIn): [LinkedIn](https://www.linkedin.com/in/goodapplemedia/) - afrith.denver.usa@gmail.com
- Andy Frith (Portfolio): [Portfolio](https://andyfrith.com)
- Project Link: [https://github.com/andyfrith/astro-demo](https://github.com/andyfrith/astro-demo])
[contributors-shield]: https://img.shields.io/github/contributors/andyfrith/astro-demo.svg?style=for-the-badge
[contributors-url]: https://github.com/andyfrith/astro-demo/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/andyfrith/astro-demo.svg?style=for-the-badge
[forks-url]: https://github.com/andyfrith/astro-demo/network/members
[stars-shield]: https://img.shields.io/github/stars/andyfrith/astro-demo.svg?style=for-the-badge
[stars-url]: https://github.com/andyfrith/astro-demo/stargazers
[issues-shield]: https://img.shields.io/github/issues/andyfrith/astro-demo.svg?style=for-the-badge
[issues-url]: https://github.com/andyfrith/astro-demo/issues
[license-shield]: https://img.shields.io/github/license/andyfrith/astro-demo.svg?style=for-the-badge
[license-url]: https://github.com/andyfrith/astro-demo/blob/master/LICENSE.txt
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://www.linkedin.com/in/goodapplemedia/
[product-screenshot]: public/screenshot.png
[astro-uxds-screenshot]: public/astro-uxds-screenshot.png
[AstroUXDS]: /public/astro_uxds_logo.jpeg
[Astro-url]: https://www.astrouxds.com/
[React.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
[React-url]: https://reactjs.org/
[Vitest]: https://img.shields.io/badge/vitest-6E9F18?style=for-the-badge&logo=vitest&logoColor=white
[Vitest-url]: https://vitest.dev/
[TailwindCSS]: https://img.shields.io/badge/Tailwind_CSS-grey?style=for-the-badge&logo=tailwind-css&logoColor=38B2AC
[TailwindCSS-url]: https://tailwindcss.com/