Green Stack Starter Demo
A Zod & TS-first approach to building Full-Product Universal App experiences with GraphQL, React-Native, Expo & Next.js, at write-once efficiency.
Overview
This project, called Aetherspace, is a GREEN stack starter template for cross-platform React app development. It aims to make development easier by providing a setup for building web, iOS, Android, PWA, static, SSR, API routes, and GraphQL all at once. It also automatically documents your code with Storybook. Aetherspace is designed to help you move fast, save time, and deliver more in your cross-platform app development.
Features
- Cross-platform development for web, iOS, Android, PWA, static, SSR, API routes, and GraphQL
- Automatic code documentation with Storybook
- GREEN stack technologies: GraphQL, React/React Native, Evergreen components, Expo, and Next.js
- Single source of truth for code and features
- Responsive design support
- Solution for web layout shift in react-native styling
- Support for exposing/reading public env vars across multiple platforms
- Support for optimizing web images with next/image and using it in React Native
- Styling and animation options for both web and mobile
Summary
Aetherspace is a powerful framework that simplifies cross-platform React app development using the GREEN stack. It provides a setup for building apps for multiple platforms at once, while also offering automatic code documentation. Aetherspace fills in the gaps of the GREEN stack, offering solutions for responsive design, web layout shift, public env vars, and more. It aims to save developers time and make cross-platform development easier and faster.
- Next.js
Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.
- 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
- React Native
React Native is a framework for building mobile applications using React and JavaScript. It enables developers to write once and deploy to multiple platforms, including iOS, Android, and the web, while providing a native app-like experience to users.
- Templates & Themes
A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.
- Expo
An open-source platform for making universal native apps with React. Expo runs on Android, iOS, and the web.
- Graphql
A website that uses GraphQL as a query language to manage data fetching and state management. This includes features such as a strongly typed schema, client-side caching, and declarative data fetching to streamline data management and optimize website performance.
- 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.
- 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.