Avion is an e-commerce frontend template that pairs a Vite + React + TypeScript storefront with Strapi as a headless CMS and Stripe for payment processing, giving developers a ready-to-deploy starting point for online stores.
What is Avion?
Avion is a frontend project for an e-commerce website, using Strapi as a headless CMS and Stripe for payment integration. It takes product and content data managed in Strapi and renders it in a storefront built with React and TypeScript, processing transactions through Stripe. The repository is set up to run on Vite and can be deployed to Vercel, though the README does not name a specific author or maintainer.
Key Features
- Headless CMS with Strapi — Strapi serves as the content backend, letting product listings and site content be managed separately from the React frontend.
- Stripe payment integration — Transactions are handled through Stripe, providing a payment processing layer for the store.
- React and TypeScript — The frontend is written in React with TypeScript, offering typed components and state management.
- Vite build tooling — The project uses Vite for development and production builds, with commands for install, dev, and build defined in the README.
- Vercel deployment — The project metadata lists Vercel, indicating readiness for hosting on Vercel's platform.
- E-commerce scaffolding — The repository is organized as a complete frontend for an online store, covering the storefront layer of a headless commerce setup.
Who should use Avion?
- E-commerce developers who want a ready-made frontend stack with Strapi and Stripe instead of starting from scratch.
- Freelancers and agencies delivering online stores for clients, using the preconfigured Vite and React setup to accelerate development.
- Startups launching a store that need a headless CMS for content and Stripe for payments, with easy deployment to Vercel.
What can you do with Avion?
- Run a storefront locally: Use
npm run devoryarn devto start the Vite dev server and preview the e-commerce frontend during development. - Manage products via Strapi: Use Strapi as the headless CMS to update products, prices, and content without modifying the frontend code.
- Accept payments with Stripe: Connect Stripe to process orders and payments through the storefront.
- Deploy to Vercel: Build the production bundle with
npm run buildand deploy the static output to Vercel.
How does Avion work?
The README shows the standard Vite workflow: install dependencies with npm run install or yarn install, start development with npm run dev or yarn dev, and create a production build with npm run build or yarn build. For deployment, Vite's static deploy documentation covers options like Vercel, Netlify, and GitHub Pages.
