The Story

Musholla Madani is a musholla located in Bukit Indah village, Lamandau, Kalimantan Tengah. In Indonesian Islamic culture, musholla usually means smaller mosque to serve smaller, local community that's out of reach from nearest "proper" mosque.

Established by Zailani BQ, Musholla Madani is the answer of local religious education problem in Bukit Indah village: since mosques are managed poorly, the community around wasn't able get the best from what mosques should offer by attending: religious services, community services, youth education and more. And since the village is located about half an hour for the nearest town center of Nanga Bulik, most of basic and essential community needs are barely fulfilled by the local government, something that mosques and churches are able to fill the gap.

However, Zailani was unable to step into nearest mosque's management, since the current management is reluctant to let Zailani taking over the aforementioned mosque management. So Zailani, wanted to fulfill his duty to serve the community, established mosque's activity around his residence, which is now Musholla Madani.

Activities in Musholla Madani are divided into some "departments", which he and several volunteers from the community is running. Among the activities are Rumah Qur'an Nuri, which focused on religious education for youths, then Kajian Pemuda Keren - KPK, focused on youth empowerment and prevention of juvenile delinquency, then Dapur Umum Madani, providing foods and beverages for activities held in the musholla, until the newly established TKIT Madani, providing kindergarten-level education for the community, which is rare in the village due to its remote location.

The Website

The requirement of the website is to show every activity, categorized by every established department that holds it. The website is also becoming the hub for informations to donors, and linking them directly to the representative of the musholla.

So the plan is creating a homepage that shows a glimpse to what the musholla is doing along with the latest news about their activity.

The About page will be listing the departments and directing to the individual profile for each department. Along with it is the information of Yayasan Madani which acts as legal umbrella for all activities in and around the musholla.

Routes

About Page

Department Page (Rumah Qur'an Nuri)

Blog Post Page

Main routes are /about, /unit/[department], and news/[year]/[month]/[news-title]. Another route, /donasi, is redirected to WhatsApp link of one responsible with donors and donation.

Stacks Used

The Website is written in React, using Next.JS for the frontend, and uses Netlify CMS for managing contents. The Website uses no backend and therefore no API calls is made.

For styling, it uses Sass and Tailwind CSS, because why not both? For processing it also uses postcss-font-magician, postcss-preset-env, and postcss-flexbugs-fixes.

The project tree is as follows:

.
├── content
│ ├── pages
│ │ └── *.md
│ ├── posts
│ │ └── *.md
│ └── static
│ └── about.yml
├── public
│ ├── admin-config.yml
│ ├── icons
│ │ └── *.*
│ ├── logos
│ │ └── *.png
│ ├── manifest.json
│ └── uploads
│ └── *.png
├── src
│ ├── components
│ │ └── *.tsx
│ ├── layout
│ │ ├── base.tsx
│ │ └── *.tsx
│ ├── lib
│ │ └── *.ts
│ ├── pages
│ │ ├── _app.tsx
│ │ ├── about.tsx
│ │ ├── admin.tsx
│ │ ├── index.tsx
│ │ ├── news
│ │ │ └── [...slug].tsx
│ │ ├── opengraph
│ │ │ ├── index.tsx
│ │ │ ├── news
│ │ │ │ └── [...slug].tsx
│ │ │ └── unit
│ │ │ └── [slug].tsx
│ │ └── unit
│ │ └── [slug].tsx
│ └── styles
│ ├── global.scss
│ └── *.scss
└── yarn.lock

Some (most) files are omitted for simplicity.

Notice that React source files are put inside src folder, implementing one of NextJS' advanced feature.

For Netlify CMS configuration, we're not doing a separate index.html in public/admin folder, but incorporated directly in Next.JS src/pages/admin.tsx :

import { NextPage } from 'next'
import { useEffect } from 'react'
import Script from 'next/script'
import Head from 'next/head'

const AdminPage:NextPage = () => {
    useEffect(() => {
        ;(async () => {
            const CMS = (await import('netlify-cms-app')).default
            CMS.init()
        })()
    }, [])
    return (
        <>
        <Head>
            <link href="/admin-config.yml" type="text/yaml" rel="cms-config-url"/>
            <title>{`put site title here`}</title>
        </Head>
        <Script src="https://identity.netlify.com/v1/netlify-identity-widget.js" strategy="beforeInteractive"/>
        </>
    )
}

export default AdminPage

while the configuration file (admin-config.yml) is provided in public folder.

Deployment

The Website is deployed using Netlify, taking advantage of the Essential Next.JS Plugin, which is installed by default on every Next.JS deployed on Netlify.

Conclusion

This article is written to document what it takes to build an informational, news hub website for a non-profit organization. Hopefully this website is gonna help them to reach more donors and spread the word about their activities in Bukit Indah village, so the community will benefit more.

Visit the website at mushollamadani.com