Wmb Table

Managing sermons, notes, and other documents is key for many pastors and religious leaders. As the son of a pastor, I saw firsthand the challenges my dad faced organizing all his materials over the years in various Word docs and notecards. I set out to build an app to help streamline organizing these important files across multiple platforms. In this post, I’ll walk through why I chose ElectronJS and the process of building this cross-platform sermon manager desktop application.

Why Choose ElectronJS?

When embarking on this project, I explored various options for building a desktop app that would work on Windows, MacOS, and Linux. After research, I landed on ElectronJS for a few key reasons:

Cross-Platform Support: ElectronJS allows wrapping HTML, CSS, and JavaScript code into a cross-platform desktop app that works across Windows, MacOS, and Linux without needing to rewrite it for each operating system. This was critical for wide usage.

Node.js Integration: Having access to Node.js in the renderer process along with being able to leverage Chrome for UI allows for a very flexible framework.

Large Community: As an open source project originally developed by GitHub, Electron has a strong following and set of support resources available.

Key Features

The sermon manager app provides the following key features:

• Organized storage of sermons, speeches, talks, essays, or other documents
• Tagging documents with keywords for easier search
• Basic text editing capabilities
• Search documents by title, date, tags, or content
• Supports rich text documents and embedded media
• Drag and drop import for documents
• Backup and restore sermons library

App Architecture Overview

Since Electron is essentially Node.js + Chromium, it allows splitting the UI code from the backend logic. Here is a high-level overview of the architecture:

• Main Process: This uses Node.js and handles the lifecycle events, window creation, interacts with the file system, and controls the UI thread.

• Renderer Process: This displays the actual UI using Chromium and handles presentation logic. Documents are loaded/saved and displayed here.

• IPC: The main and renderer processes communicate via Inter-Process Communication (IPC) to pass data, events, and messages back and forth.

• Local Storage: Documents are stored locally using IndexedDB for persistence, while also having backup/restore capabilities.

Key Development Decisions

During development, I made some key decisions around tech stack and approach:

TypeScript: For type safety during development

React: To compose the UI with reusable components

Ant Design: As a UI component library that looks great out of the box

NeDB: An embedded lightweight document store for local JSON document persistence

This combination of technologies provided the tools needed to build an extensible, reactive user interface backed by a local storage solution for saving sermons, speeches, and other documents.

Conclusion

I originally came up with the idea for this sermon manager app because my father is a pastor. Seeing his challenges organizing materials over the years led me to start this project. My dad was one of the first users, helping provide feedback during development.

Building with ElectronJS allowed me to leverage web technologies to craft a cross-platform desktop app that early testing pastors have responded very positively too. The tech stack using TypeScript, React, Ant Design, and NeDB came together nicely to build a performant sermon management solution.

ScreenShots