Overview:

Synthwave Stack is a development stack that is built with and for Remix, written in TypeScript. It offers a range of features and tools to streamline the development process, including deployment to Fly or Railway, a PlanetScale database, Prisma ORM, magic links for authentication, file uploads to Cloudflare R2, transactional emails, a component library (Catalyst UI), styling with TailwindCSS, analytics with Amplitude, error tracking with Sentry, code formatting and linting, a health check API route, and billing and subscriptions with LemonSqueezy (coming soon). The stack is highly customizable, allowing users to fork and modify it to suit their own needs.

Features:

• Built with/for Remix: The stack is designed specifically for use with Remix, a modern JavaScript framework for building single-page applications.

• Written in TypeScript: The stack is written in TypeScript, a strongly typed superset of JavaScript, providing enhanced developer experience and error checking.

• Deploys to Fly / Railway: The stack offers seamless deployment to the Fly or Railway platforms, making it easy to deploy and manage the app in production and staging environments.

• Database - PlanetScale: The stack includes integration with PlanetScale, a database service that offers scalability, reliability, and ease of use.

• ORM - Prisma: Prisma, an open-source database toolkit, is used for handling database operations, providing a convenient and efficient way to interact with the database.

• Built-in magic links, sign in with Google and Twitter - remix-auth: The stack includes built-in authentication functionality, allowing users to sign in with magic links or using their Google or Twitter accounts.

• Upload Files to Cloudflare R2: The stack provides the ability to upload files to Cloudflare R2, a distributed file storage system, making it easy to handle file uploads in the application.

• Transactional emails - Resend: The stack includes support for sending transactional emails, with the ability to resend emails if needed.

• Component Library - Catalyst UI: The stack includes a component library called Catalyst UI, offering a set of reusable UI components for building the user interface of the application.

• Styling - TailwindCSS: The stack utilizes TailwindCSS, a popular utility-first CSS framework, for styling the application.

• Analytics - Amplitude: Amplitude, an analytics platform, is integrated into the stack to provide insights into user behavior and application performance.

• Error Tracking - Sentry: Sentry, an error tracking and monitoring platform, is included in the stack to help identify and debug errors in the application.

• Code formatting and linting: The stack includes ESLint for code linting and Prettier for code formatting, ensuring consistent and high-quality code.

• Health check API route: The stack provides a health check API route that can be used to monitor the application’s health and availability.

• Billing and Subscriptions using LemonSqueezy (Coming Soon): Although this feature is not yet available, the stack plans to include support for billing and subscriptions using LemonSqueezy, providing a convenient way to monetize the application.

Installation:

To install and set up the Synthwave Stack, follow these steps:

1. Install the project dependencies:

npm install

2. Start the development server:

npm run dev

Note: The stack uses Remix App Server with HMR/HDR. If you prefer to use a different server, you can switch to it.

3. Refer to the documentation for more detailed information (coming soon).

Summary:

Synthwave Stack is a powerful development stack that offers a comprehensive set of features and tools for building modern web applications. It is built with and for Remix, written in TypeScript, and includes integrations with various services such as PlanetScale, Prisma, Cloudflare, and more. The stack provides a seamless development and deployment experience, with built-in authentication, file uploads, transactional emails, and a component library. It also includes essential tools for code quality and monitoring, such as code formatting, linting, analytics, and error tracking. With its flexibility and customizability, the stack allows developers to easily modify and adapt it to their specific needs.