This musholla far away in the jungle deserves a good website
Published: 2022-02-15 07:14:46

---
title: This musholla far away in the jungle deserves a good website
published: true
date: 2022-02-13 10:05:20 UTC
tags: 
canonical_url: https://blog.sngr.dev/this-musholla-far-away-in-the-jungle-deserves-a-good-website
---

## 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.

![IMG20210925131620.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1644745618127/ol9VVnkI4.jpeg)

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

![Musholla Madani](https://snap.sngr.dev/image/www.mushollamadani.com/)

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
![About Page](https://snap.sngr.dev/image/www.mushollamadani.com%2Fabout/360,640,isMobile/)

#### Department Page (Rumah Qur'an Nuri)
![Department Page (Rumah Qur'an Nuri)](https://snap.sngr.dev/image/www.mushollamadani.com%2Funit%2Frumah-quran-nuri/360,640,isMobile/)

#### Blog Post Page
![Blog Post Page](https://snap.sngr.dev/image/www.mushollamadani.com%2Fnews%2F2021%2F11%2Fbazar-sedekah/360,640,isMobile/)

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](https://nextjs.org/docs/advanced-features/src-directory).

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](https://mushollamadani.com)_