/kontenbase-web

Kontenbase Website with React, Remix, Tailwind, Vercel

Primary LanguageTypeScriptMIT LicenseMIT

Kontenbase Web v2

tailwindcss v3

Kontenbase marketing website v2 based on Rewinds, a Remix starter kit.

Visit the website:

Screenshots

Homepage

Homepage

Table of Contents

Features

The complete features are listed in the about page

  • Remix as the React framework
  • Tailwind CSS using Vechai UI as primary components
  • Multiple themes switcher and persist theme with a session cookie
  • Only focus on the frontend styling and project structure, without particular in testing and database
    • Only a bit of backend integration through Remix loader
    • For the full stack integration with database and testing, check out the official Remix Stacks instead: https://remix.run/stacks

ℹ️ 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.

Stacks

The complete stacks are listed in the about page

  • TypeScript v4.6
  • Node.js v14-v17
  • npm v8
    • Not Yarn because v1 & v2 difference
  • React v17
  • Remix v1.4
  • Tailwind CSS v3
    • Tailwind CSS plugins
  • PostCSS v8
  • Fonts
    • Google Fonts
    • Fontbit CDN
  • Icons
    • React Icons
      • Heroicons v1
      • Font Awesome
    • Phospor Icons
  • Components
    • Headless UI v1 — Unstyled accessible UI components
    • Radix UI v0 — Unstyled accessible UI components
      • Tailwind Radix
    • Reach UI v0 — Unstyled accessible UI components
    • Vechai UI v0 — React Tailwind CSS components
    • NProgress
  • React Hook Form
  • Markdoc
  • Prism.js
  • ESLint v8
  • Stylelint v14
  • Prettier v2
  • clsx or cx aliased as classx
  • graphql-request and urql
  • fetch and axios
  • Vercel

⚠️ Make sure to not using React v18 yet as there's an issue with Tailwind CSS and Vechai UI.

Development

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

Install dependencies

npm install

Environment variables

Copy the .env.example into .env:

cp .env.example .env
# 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.

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.

Environment variables using Doppler

If you want to use Doppler to manage the env variables, use the start script. Therefore this won't need the .env file to be edited manually.

npm run start
# 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.

  • .vscode
  • api
  • app
    • components
    • configs
    • contents
    • data
    • features
    • hooks
    • layouts
    • libs
    • routes
    • styles
    • types
    • utils
    • entry.client.tsx
    • entry.server.tsx
    • root.tsx
    • other-root-routes.server.ts
  • public
  • styles
    • global.css
  • .env
  • .env.example
  • .eslintrc
  • .eslintignore
  • .gitignore
  • .prettierrc
  • .prettierignore
  • package.json
  • postcss.config.js
  • README.md
  • remix.config.js
  • remix.env.d.ts
  • server.js
  • tailwind.config.js
  • tsconfig.json
  • vercel.json

Build

Make sure that it can build just fine:

npm run build

Lint

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

npm run lint

Or individually:

npm run eslint
npm run stylelint

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.

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, you can use the migrate script to change the import statements.

npx remix migrate --migration replace-remix-imports

Before:

import { json, redirect } from "remix";

After:

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

Tailwind CSS

Note that Tailwind CSS IntelliSense extension might currently not work with tailwindcss@3.0.24 at the moment.

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

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

Tips:

Other references