My Plan for building a prayer tracker website
Tags: webdev, supabase, svelte, planning
Published: 2022-12-14 10:12:47

---
title: My Plan for building a prayer tracker website
published: true
date: 2022-12-13 20:30:45 UTC
tags: webdev, supabase, svelte, planning
series: My To-Pray List
canonical_url: https://blog.cpbprojects.me/my-plan-for-building-a-prayer-tracker-website
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rjuks9egdlsio6wnikis.png
---

## Background

As Christians, we should pray. it is a way for us to communicate with God and develop a deeper relationship with Him. In the Parable of the Unjust Judge, Jesus taught us not to lose heart when praying. But sometimes, we forget to pray, forget what to pray about, and forget how God answered our prayers. Imagine if our friend forgot to talk to us, or even worse, forgot what we did for them.

That's why we should keep track of what we pray about. It can help us see how God is answering our prayers, as well as help us stay accountable and faithful in our prayer life.

Using a paper journal or a note-taking app to do so is fine, but searching through paper journals is hard, and note-taking apps may not be as convenient as they are not tailor-made for this purpose.

## Why I want to make it

Firstly, I see the need for it. While there are some great options out there, such as [PrayerMate](https://www.prayermate.net/app) or the [YouVersion Bible app](https://www.youversion.com/the-bible-app/), they are limited to smartphones only, you cannot access them with a computer. Moreover, they are very complex with many functionalities. It would be nice to have a simpler one. Because

> Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
> 
> Antoine de Saint-Exupry, Airman's Odyssey

Secondly, I am interested in trying out different technologies, and this sounds like a cool challenge. I can see this actually being helpful for others. I'm sure I'd learn a lot from doing this.

That's why I've decided to develop it and make it available to the public.

## Features of the prayer tracker website

I want to build a website where users can:

1. Store prayer items, including the ability to add, edit, and delete items.

2. Give users a daily prayer list based on the frequency set for each prayer

3. Record how has God answered their prayer, or when the prayer was not granted

4. Encrypt the prayer items optionally

Since it is a website, we can assume the prayer items will be synced, and there will be account control. I choose a website over an app because a website can be accessed by any device connected to the internet, whereas apps must be downloaded and installed on a specific device.

## How do I plan to build it

I've been following [Fireship](https://www.youtube.com/@Fireship) on Youtube, so I've got some technologies on my radar that I want to try out. [Supabase](https://supabase.com/) is one of them, it claims to be an open-source Firebase alternative Backend as a Service (BaaS). I'm happy to see that they have a self-host option, which means I wouldn't be charged a large sum overnight, as I am hosting it myself, I can control how many resources to give it.

For the front end, I'm planning to use [Svelte](https://svelte.dev/), simply because it is the javascript framework used in the Supabase to-do list example. I'm assuming it is a good framework for the official example to be built on that. I've also looked up the Fireship video on Svelte, and it looks promising.

For hosting the back end and front end, I'm going to use a VPS provider that limits my CPU and connection speed, but doesn't incur any additional cost nor have a data transmission limit, in my case, [Oxide Host](https://billing.oxide.host/aff.php?aff=166). It is much less stressful knowing that I won't be charged extra even if something went wrong.

## What are the other building blocks?

I've decided to use Supabase, Svelte and a VPS as the foundation of my project. Now I have to choose the various building blocks that I'm going to use to build my website.

Before that, I want to talk about the two approaches to building something. The first approach is to start doing first and plan as you go, this leads to quicker development if nothing goes wrong, but it is also possible that you'll encounter a problem that sets you back a lot. The second approach is to plan everything before starting, this reduces the risk of finding problems mid-project and having to redo everything, but this slows down the progress, and there is only so much we can plan for, we may still find unexpected problems. I will use the latter approach and test each individual building block before using them to build the website.

At the time of writing this, I've already tested out all the technologies. The process is very difficult, I've been stuck at problems after problems. This process took me several days, and over 24 hours of figuring things out, so I'm going to spare the details and just explain what I'll be using. Later on, I'll write another blog post to talk about how I tested them.

| Functionality | Technology used |
|-|-|
| Third-party authentication | Google and Facebook sign-in, as they are the most popular ones. I refrained from using Apple sign-in because it is locked behind a paywall, you need to pay to join their developer program to use it. |
| Routing | Nginx, since it is very popular. |
| Https, SSL | Certbot, since it is free and easy to set up. |
| Domain name | NameCheap, since it is cheaper than others and offers a 1-year free domain for students. |
| Storing encryption key locally | Local Storage in the browser, because unlike cookies, they do not get sent back to the server every request. |
| Email Authentication | MailInBlue, a relatively large email limit in the free tier |

## Conclusion

This is my plan to build this project. I will make a blog talking about my experience with testing the above building blocks, as well as a complete tutorial on how to set up a Supabase Svelte project.