i4o-oss / synthwave-stack

Custom Remix Stack for quickly shipping web apps. Built on top of Remix, it comes with Auth, Prisma, Radix UI primitives, Tailwind CSS, and more. Deploys to Vercel.

Synthwave Stack

Learn more about Remix Stacks.

pnpm create remix@latest --template i4o-oss/synthwave-stack

What's in the box (well, stack)

• Built with/for Remix
• Written in TypeScript
• Deploys to Fly / Railway
• Database - PlanetScale
• ORM - Prisma
• Built-in magic links, sign in with Google and Twitter - remix-auth
• Upload Files to Cloudflare R2
• Transactional emails - Resend
• Component Library - Catalyst UI
• Styling - TailwindCSS
• Analytics - Amplitude
• Error Tracking - Sentry
• Code formatting and linting
• Health check API route
• Billing and Subscriptions using LemonSqueezy (Coming Soon)

Not a fan of bits of the stack? Fork it, change it, and use npx create-remix --template your/repo! Make it your own.

Development

Install dependencies:

pnpm i

Start dev server:

pnpm dev

Note: Uses Remix App Server with HMR/HDR. Feel free to switch to a different server.

Documentation:

Coming Soon

Deployment

This Remix Stack handles automatically deploying your app to production and staging environments on Railway.

All you have to do is to create a project on Railway and choose your repo. Railway handles setting up CI/CD.

Connecting to your database

The database lives on planetscale.com. Prisma has been configured to connect to Planetscale and will work in local environment. Update the database name in DATABASE_URL variable in your .env for local development use. Use the connection string provided on Planetscale dashboard as DATABASE_URL in production.

Type Checking

This project uses TypeScript. It's recommended to get TypeScript set up for your editor to get a really great in-editor experience with type checking and auto-complete. To run type checking across the whole project, run pnpm typecheck.

Linting

This project uses ESLint for linting. That is configured in .eslintrc.js.

Formatting

We use Prettier for auto-formatting in this project. It's recommended to install an editor plugin (like the VSCode Prettier plugin) to get auto-formatting on save. There's also a pnpm format script you can run to format all files in the project.

synthwave-stack's Issues

Login example

Could you please add a working login example on your demo page (which is great!)? Thank you!

Add remix-stack tag

If you add the remix-stack tag then your stack will show up on this page: https://github.com/topics/remix-stack

Promise.all for logout?

Just a thought, as I'm not entirely sure about the code, but
maybe you could await Promise.all the 3 promises to not await them sequentially one by one? 🤔
https://github.com/ilangorajagopal/synthwave-stack/blob/cba5f9703a2aabc8d1988b0dc0eda751a15ecc98/app/routes/logout.tsx#L7-L9