🕌 Kawal Masjid

Introduction

🕌 Kawal Masjid is a platform to inform Infaq Online Masjid seluruh Indonesia.

Made with ⏪ Rewinds, a web app starter kit with Remix, Tailwind CSS, and the TypeScript ecosystem. It is an opinionated collection of interactive UI components, hooks, and utilities.

• 🕌 Kawal Masjid
  • Introduction
    • Live
  • Tech Stack
  • Development
    • Install Dependencies
    • Setup Environment Variables/Secrets
      • Prisma ORM and Database Connection
      • Uploadcare
    • Run Development Server
  • References

Live

🚧 This project is still in very early development

Visit kawalmasj.id

Follow the progress on:

• Twitter: @kawalmasjid
• GitHub: kawalmasjid

Tech Stack

Listed here are only the most important parts in the stack.️ Some setups are mostly finished, but some might haven't been done yet or are still in progress. More details and references can also be checked from mhaidarhanif/rewinds and catamyst/stack.

Development

Install Dependencies

Before running your Remix app locally, make sure your project's local dependencies are installed using your preferred package manager agent:

# this repo is using pnpm lock file
pnpm i

Or if using ni which can autodetect the agent:

pnpm add -g @antfu/ni  # install once
ni                     # can auto choose npm/yarn/pnpm

Setup Environment Variables/Secrets

Use plain .env file for local development:

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

Then edit .env as you need.

These are the environment variables you need to set up on your own for developing locally:

• DATABASE_URL
• UPLOADCARE_PUBLIC_KEY

Prisma ORM and Database Connection

This repo is suited to use either your own MySQL instance or MySQL on PlanetScale.

Next, you need to set up your PlanetScale database. If you don't already have a PlanetScale account, you can sign up for a free one here. Then create a free database and grab the DATABASE_URL from there. Once you have the database URL connection string, you can paste it to the DATABASE_URL env var, for example:

DATABASE_URL='mysql://username:pscale_pw_password@region.connect.psdb.cloud/name?sslaccept=strict'

If you prefer using a local database, run Docker Compose:

docker compose up

While in development, you can:

• Generate Prisma types for @prisma/client with nr prisma:generate (it runs prisma generate)
• Check generated Prisma documentation with nr docs:prisma (it runs prisma-docs-generator serve) then open http://localhost:5858
• Visualize the schema with Prisma Editor or Prismaliser
• Push Prisma schema changes for PlanetScale with nr prisma:push (it runs prisma db push)
  • You might notice that with PlanetScale's approach with Prisma, we don't need migration files in our repo, but rather managed in their platform.

Uploadcare

We use Uploadcare to host uploaded images. If you want this feature to work when running the app locally on your machine, you need to create a new free account on Uploadcare and paste your Public API key to UPLOADCARE_PUBLIC_KEY env var.

Run Development Server

Make sure you've generated the latest Prisma schema with nr prisma:generate.

Afterward, start the Remix development server like so based on your preference:

• Run without HMR: nr dev
• Run with HMR: nr dev-hmr

Without HMR, it will just run remix dev, the Remix server on development. Then wait until you see this:

Loading environment variables from .env
Remix App Server started at http://localhost:3000

Open up http://localhost:3000 and you should be ready to go!

With HMR, it will run both dev:remix and dev:express, the Remix server and the Express server with HMR enabled. Then wait until you see this:

📀 Remix on Express server port :3000
Loading environment variables from .env
💿 Built in 0s

Open up http://localhost:3000 and you should be ready to go!

References

• Tabung SG