Astro Nomy
Differents pages and examples apps built with Astro v4.5, shadcn/ui & react js. Open Source.
Overview:
Astronomy is an open-source application that utilizes the latest features in Astro v4 and shadcn/ui. It is an experimental project aiming to showcase how a modern application with features like authentication, subscriptions, API routes, Markdown, Content Collections, among others, can function in Astro v4 and shadcn/ui. Although the app is a work in progress, it provides insight into its development process by following @miickasmt on Twitter.
Features:
- Config files: Includes configuration files for easy setup.
- React components & hooks: Utilizes React components and hooks for dynamic functionality.
- UI Components with shadcn/ui: UI components built using shadcn/ui for design consistency.
- Documentation and blog using MDX and Content Collections: Integrates MDX and Content Collections for documentation and blog features.
- Styled using Tailwind CSS: Incorporates Tailwind CSS for styling components.
- Validations using Zod: Implements Zod for data validation.
- Written in TypeScript: Developed using TypeScript for type safety and code integrity.
- 100/100 Lighthouse performance: Prioritizes performance optimization to achieve a perfect Lighthouse score.
- Minimal styling (make it your own!): Offers minimal default styling for customization.
Summary:
Astronomy is an experimental open-source project that explores the capabilities of Astro v4 and shadcn/ui for building modern web applications. With features like React components, Tailwind CSS styling, Zod validations, and TypeScript support, it aims to provide a solid foundation for developers to create dynamic and performant applications. While still under development, Astronomy promises a roadmap of upcoming features like authentication, database integration, and mobile optimization.
- Astro
Astro is the all-in-one web framework designed for speed. Pull your content from anywhere and deploy everywhere, all powered by your favorite UI components and libraries.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Radix UI
Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system, or adopt them incrementally.
- Shadcn UI
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
- Framer Motion
Alpine.js is a lightweight JavaScript framework that simplifies the process of creating dynamic, reactive user interfaces on the web. It uses a declarative syntax that offers a higher level of abstraction compared to vanilla JavaScript, while being more performant and easier to use than jQuery.
- React Hook Form
React Hook Form is a performant, flexible, and extensible form library for React with easy validation. It reduces re-renders and improves performance by using uncontrolled components and native HTML validation, making form handling simple and efficient.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Vercel
Vercel offers built-in support for deploying and hosting Next.js applications, making it a popular choice among Next.js developers.
- Zod
Zod is a TypeScript-first schema declaration and validation library. It allows you to define schemas that can validate data at runtime while providing excellent TypeScript inference, making it perfect for API validation, form validation, and type-safe data handling.