⏪ Rewinds — Remix Tailwind Starter Kit

Rewinds is a Remix starter kit with Tailwind CSS v3 family of libraries and the TypeScript ecosystem.

This is an example demo to combine the best Tailwind-related ecosystem such as Tailwind CSS, Headless UI, Radix UI + tailwindcss-radix, Reach UI, Vechai UI, and more. Therefore this repo is kind of over-engineered to have high flexibility and cover a lot of use cases for different projects/products.

Check out the repo and visit the live demo:

You can deploy this yourself. Just put attention to setup the environment variables on Vercel or any of the deployment target you choose beforehand.

For recommended and alternative stack selections, they are mostly listed and detailed in the Catamyst Stack documentation.

Depending on your configuration, the app might need GraphCMS to serve the content for the blog articles example. Otherwise you can remove or swap the blog content source from anywhere else.

Screenshots

⚠️ The repo is ongoing active development so a lot of things might change quickly.

What's inside

More into what we can do or what you get. The complete features are listed in the about page. While the complete examples are listed in the examples page.

Stacks

More into what is being used. The complete stacks are listed in the about page.

⚠️ Make sure to not using React v18 yet as there's an issue with Vechai UI and Reach UI. Unless you want to remove them for now.

Development

Clone repo

Choose either way:

a. Click Use this template button on GitHub.

b. Clone directly:

git clone https://github.com/mhaidarhanif/rewinds my-rewinds-project

c. Clone with a clean Git history:

npx degit https://github.com/mhaidarhanif/rewinds my-rewinds-project

Install dependencies

To run your Remix app locally, make sure your project's local dependencies are installed:

npm install
# Can still use yarn or pnpm, just be aware of the lock file

Environment variables

If you've run npm install, the postinstall script should copy the example .env automatically. Otherwise you can manually copy the .env.example into .env:

cp -i .env.example .env
# `-i` or `--interactive` will prompt before overwrite

Then edit .env as you prefer.

⚠️ Make sure to setup the environment variables here, on Vercel, or on your preferred deployment target. Otherwise the app will break on production. That's why I already put some preset strings in the .env.example which you can copy directly.

Important variables:

SESSION_SECRET
- Session secret for persisting the themes on browser sessions
- You can use openssl rand -base64 32 to generate a secret/key and use it
REST_ENDPOINT
- Primary REST API endpoint to be used with fetch or axios
GRAPHQL_ENDPOINT
- Primary GraphQL API endpoint to be used with graphql-request or urql

If you don't need some of these, you can remove them in the .env, app/utils/env.server.ts, and all getEnvServer() function calls.

Afterwards, run the Remix development server with the dev script. This will watch and compile for both the Tailwind styles and Remix app.

npm run dev

You can also use the d script for a quick way. This will compile Tailwind styles once and only watch the Remix app changes.

npm run d

Finally, open up http://localhost:3000 and you should be ready to go!

Note if you're used to using the vercel dev command provided by Vercel CLI instead, you can also use that, but it's not needed. Although it can help with the Environment variables setup (no need to use .env file).

ℹ️ Depending on your computer processing power, the first Tailwind compilation might take around ~3 seconds. Although Tailwind CSS v3 already has Just-in-Time engine enabled by default.

Environment variables using Doppler

If you want to use Doppler to manage the environment variables, use the dev:doppler script. Therefore you won't need the .env file to be edited manually.

npm run dev:doppler
# doppler run -- npm run dev

Project structure

Keep in mind that the structure is designed for scalability for medium-large project. If your project scope is too simple or too small, Rewinds might be a bit too much to handle.

.husky
.vscode
api
app
- components: custom and aliased components
- configs
- contents
- data
- features
- graphql
- hooks
- layouts
- libs: Wrapper for node_modules
- routes: Remix routes
- styles
  - out.css: Tailwind output file
- types
- utils
- entry.client.tsx
- entry.server.tsx
- root.tsx
- other-root-routes.server.ts
public
styles
- global.css: Tailwind input file
.gitignore
package.json
- .commitlintrc
- .editorconfig
- .eslintignore
- .eslintrc
- .lintstagedrc
- .npmrc
- .nvmrc
- .prettierignore
- .prettierrc
- .stylelintrc
- tsconfig.json
- vercel.json
README.md
remix.config.js
- .env
- .env.example
- postcss.config.js
- tailwind.config.js
- remix.env.d.ts
- tsconfig.json
server.js

There are also some code you can customize with your own branding by editing all the things that commented with EDITME by using search in your editor.

Especially:

README.md
LICENSE
package.json
.github and its contents
site.webmanifest

Also when using this starter kit, you might want to remove most of the code in:

app
- data: custom data
- contents: custom contents
- routes: custom routes

Other than those you might want to keep them.

Configuration for SEO

To refresh the site preview cache for each sites, they usually have their own validators:

sitemap.xml and robots.txt: Google Search Console
Facebook: Open Graph Sharing Debugger
Telegram: Webpage Bot
Twitter: Twitter Card Validator
LinkedIn: LinkedIn Post Inspector

Build

Make sure that it can build just fine:

npm run build

For more complementing the build:

npm run build
npm run lint

Lint

Make sure to lint the code with both ESLint and Stylelint:

npm run lint

Or individually:

npm run eslint
npm run stylelint
npm run prettier
npm run typecheck

Deployment

After having run the create-remix command and selected "Vercel" as a deployment target, you only need to import your Git repository into Vercel, and it will be deployed.

Or you can click the buttons in the introduction.

If you'd like to avoid using a Git repository, you can also deploy the directory by running Vercel CLI:

npm i -g vercel
vercel

It is generally recommended to use a Git repository, because future commits will then automatically be deployed by Vercel, through its Git Integration.

⚠️ Make sure to setup the environment variables in the project settings.

Notes

Remix

If you have older way of importing from remix package prior to remix@1.4.3 or remix@1.6.0, you can use the migrate script to change the import statements.

npx @remix-run/dev migrate

Before:

import { json, redirect } from "remix";

After:

import { json, redirect } from "@remix-run/node";

Vechai UI

Edit tailwind.config.js to remove custom colors to reduce the stylesheet build size. cssBase is still required to get the default Tailwind CSS colors into Vechai UI themes.

module.exports = {
  // ...
  theme: {
    extend: {
      colors: {
-       info: colors.blue,
-       success: colors.green,
-       warning: colors.yellow,
-       error: colors.red,
      },
    },
  },
  plugins: [
    // ...
   require('@vechaiui/core')({
     cssBase: true,
-    colors: ['info', 'success', 'warning', 'error'],
   }),
  ],
};

ConvertKit

Sign up a new account on ConvertKit
Edit your profile information
Get the API Key to be used as CONVERTKIT_API_KEY
Create a Subscribe Form
Get the Form ID to be used as CONVERTKIT_FORM_ID

Tips:

Setup the Mailing Address: https://help.convertkit.com/en/articles/2502494-alternatives-for-your-physical-address

amaioru0 / rewinds