Green Stack Starter Demo

screenshot of Green Stack Starter Demo
nextjs
react
react-native

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

Installation

To get started with Aetherspace, follow these steps:

  1. Install packages: yarn install
  2. Run on web & mobile: yarn dev
  3. Run with Storybook docs: yarn dev:docs

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.

nextjs
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

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

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.

template
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.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

Expo

An open-source platform for making universal native apps with React. Expo runs on Android, iOS, and the web.

graphql
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

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.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.