# Devlog 1 - Design and Components

Over the last few weeks, I’ve been working on designing some custom components for CloudNext, so that I can use them later and save myself some time. I added the following:

• Sidebar - This component is the bar at the side with options to view the specific data pulled from API endpoints.

• Top Bar - This component is at the top, where you can see your authentication status (I added Auth, read more below on that!) and you can switch zones.

• Badge - This component is designed for small little notes, like whether something is active, has an error or another issue. It will also be used for what each DNS Record is for, as well as the type (MX, TXT, Tunnel, A, CNAME, etc.)

• Status Dot - This component is similar to the badge, but is just a small colored dot for lower priority events.

• Card/ZoneCard - This component is a card for details on analytics, and details on zone statuses.

• Table - This component is for DNS Records, so you can see them at a glance.

Authentication

So because it is of the utmost importance to keep your API keys safe, especially as I want to add DNS editing later, I decided to go with Clerk for handling authentication for the app. rather than designing my own system using Firebase, I wanted something used by large companies that I can trust is secure, and isn’t susceptible to issues I haven’t patched or noticed while configuring the app. 

I’m planning on using Prisma ORM and PostgreSQL with RLS to handle storing the keys, and I will obviously be hashing them so that they are highly secure. I also implemented access control, so you can’t type in certain dashboard details and automatically be into their dash, as you will be redirected to the login page.

I’ve decided to also integrate the clerk account details into the top bar of the app itself to keep the UI clean, and I’m hoping to adjust the account settings page and recode it to fit the existing design of the app. I attached a simple image of the elements I made so that you can see the design I am going for (kinda similar to Cloudflare and Linear.app).

# Devlog 1 - Design and Components

Over the last few weeks, I’ve been working on designing some custom components for CloudNext, so that I can use them later and save myself some time. I added the following:

• Sidebar - This component is the bar at the side with options to view the specific data pulled from API endpoints.

• Top Bar - This component is at the top, where you can see your authentication status (I added Auth, read more below on that!) and you can switch zones.

• Badge - This component is designed for small little notes, like whether something is active, has an error or another issue. It will also be used for what each DNS Record is for, as well as the type (MX, TXT, Tunnel, A, CNAME, etc.)

• Status Dot - This component is similar to the badge, but is just a small colored dot for lower priority events.

• Card/ZoneCard - This component is a card for details on analytics, and details on zone statuses.

• Table - This component is for DNS Records, so you can see them at a glance.

Authentication

So because it is of the utmost importance to keep your API keys safe, especially as I want to add DNS editing later, I decided to go with Clerk for handling authentication for the app. rather than designing my own system using Firebase, I wanted something used by large companies that I can trust is secure, and isn’t susceptible to issues I haven’t patched or noticed while configuring the app. 

I’m planning on using Prisma ORM and PostgreSQL with RLS to handle storing the keys, and I will obviously be hashing them so that they are highly secure. I also implemented access control, so you can’t type in certain dashboard details and automatically be into their dash, as you will be redirected to the login page.

I’ve decided to also integrate the clerk account details into the top bar of the app itself to keep the UI clean, and I’m hoping to adjust the account settings page and recode it to fit the existing design of the app. I attached a simple image of the elements I made so that you can see the design I am going for (kinda similar to Cloudflare and Linear.app).

Devlog 1 - API Building!

Hey! This is my first devlog for CloudNext, a Next.js-based dashboard using the Cloudflare API. I’m building this because I wanted something simple to check my Cloudflare stats without having to dig through all the menus.

Most of my time was spent creating and debugging the four API endpoints I’ve made so far. The debugging took much longer than expected because, in my infinite wisdom, I created the wrong type of API token (an Account Token instead of a User Token). No matter what I tried, every request was blocked. (I know… I’m so smart.)

The four endpoints I have working at the moment are:

• Zones Endpoint – Shows information about your Cloudflare-managed domains.
• DNS Endpoint – Lists all of your DNS records, and maybe in the future I’ll add the ability to create or edit records.
• Analytics Endpoint – Displays information like DNS query counts and other traffic analytics for your domains.
• SSL Endpoint – Shows your current SSL/TLS encryption mode and whether your certificates are active or valid.

Now that I have a working API, the next step is to build a nice-looking dashboard using placeholder data. Once the UI is finished, I’ll hook everything up to the live Cloudflare data.

The logic itself is actually pretty simple. Each endpoint just makes a request to the Cloudflare API and returns the response as JSON. I tested everything in Insomnia first because it gives really nice output for debugging. Here’s the Zones endpoint:

import { NextResponse } from "next/server";
import cf from "@/lib/cloudflare/client"; // This just imports the Cloudflare API Client 

export async function GET() {
  try {
    const zones = await cf.zones.list();
    return NextResponse.json(zones);
  } catch (error) {
    return NextResponse.json(
      { error: "Failed to fetch zones" },
      { status: 500 }
    );
  }
}

Anyway, thanks for reading this Devlog! Maybe the next one will be a bit shorter lol

Devlog 1 - Apparition Gaming!

So I’m building Apparition Gaming, a site for games that I am building to teach myself Phaser 3 game development. Originally the site was supposed to be a few games I learnt to build and tweaked, but it then became me building more games, and wanting a way to display them.

I built the website so far in next.js, and i’m using iFrame to actually hold the game element. I had to add click to start to all games, as you need to make at least one interaction with the iFrame element in order to control it. However because I coded a lot of this late at night, a few things look a bit different right now.

In the next devlog I’ll hopefully have ironed out a few of those differences however!

For those who want to know how many games I have right now in case I add more, here’s a list!

• Endless Orbit (similar to space invaders in some aspects, made this with my younger cousin as a fun project!)

• Hallucination Highways (My first big project!)

• Ping Pong (This was my first attempt at building a computer to play against you! It has 2 modes, local multiplayer and VS computer)

• Flappy Bird! (Still a bit buggy to be honest, I need to make a few new assets as well)

• Street Obstacle (Endless Runner, again I want to change some elements and create new assets)

• Platformer (Hoping to add a level system here eventually and make the game a bit more engaging)

• Breakout (As the name implies, a version of Atari breakout, my first project! Now that I have some more skills, I am planning on revamping it and adding a few extra elements to make it more engaging again.)

As you just read, I have a lot of tweaks that I am eager to start making, however because Stardance has that 10h limit per devlog, I needed to make this one or I lose hours :((

Started this project finally.
Python is really easy

Devlog 1 - Apparition Gaming!

So I’m building Apparition Gaming, a site for games that I am building to teach myself Phaser 3 game development. Originally the site was supposed to be a few games I learnt to build and tweaked, but it then became me building more games, and wanting a way to display them.

I built the website so far in next.js, and i’m using iFrame to actually hold the game element. I had to add click to start to all games, as you need to make at least one interaction with the iFrame element in order to control it. However because I coded a lot of this late at night, a few things look a bit different right now.

In the next devlog I’ll hopefully have ironed out a few of those differences however!

For those who want to know how many games I have right now in case I add more, here’s a list!

• Endless Orbit (similar to space invaders in some aspects, made this with my younger cousin as a fun project!)

• Hallucination Highways (My first big project!)

• Ping Pong (This was my first attempt at building a computer to play against you! It has 2 modes, local multiplayer and VS computer)

• Flappy Bird! (Still a bit buggy to be honest, I need to make a few new assets as well)

• Street Obstacle (Endless Runner, again I want to change some elements and create new assets)

• Platformer (Hoping to add a level system here eventually and make the game a bit more engaging)

• Breakout (As the name implies, a version of Atari breakout, my first project! Now that I have some more skills, I am planning on revamping it and adding a few extra elements to make it more engaging again.)

As you just read, I have a lot of tweaks that I am eager to start making, however because Stardance has that 10h limit per devlog, I needed to make this one or I lose hours :((

Made a few tweaks behind the scenes, it is now a bit faster and also I rewrote the ReadME (wrote with AI first but changed it to be fully wrote by me!) I also had an issue with the footer occasionally just not showing so I fixed that!

Devlog 1 - API Building!

Hey! This is my first devlog for CloudNext, a Next.js-based dashboard using the Cloudflare API. I’m building this because I wanted something simple to check my Cloudflare stats without having to dig through all the menus.

Most of my time was spent creating and debugging the four API endpoints I’ve made so far. The debugging took much longer than expected because, in my infinite wisdom, I created the wrong type of API token (an Account Token instead of a User Token). No matter what I tried, every request was blocked. (I know… I’m so smart.)

The four endpoints I have working at the moment are:

• Zones Endpoint – Shows information about your Cloudflare-managed domains.
• DNS Endpoint – Lists all of your DNS records, and maybe in the future I’ll add the ability to create or edit records.
• Analytics Endpoint – Displays information like DNS query counts and other traffic analytics for your domains.
• SSL Endpoint – Shows your current SSL/TLS encryption mode and whether your certificates are active or valid.

Now that I have a working API, the next step is to build a nice-looking dashboard using placeholder data. Once the UI is finished, I’ll hook everything up to the live Cloudflare data.

The logic itself is actually pretty simple. Each endpoint just makes a request to the Cloudflare API and returns the response as JSON. I tested everything in Insomnia first because it gives really nice output for debugging. Here’s the Zones endpoint:

import { NextResponse } from "next/server";
import cf from "@/lib/cloudflare/client"; // This just imports the Cloudflare API Client 

export async function GET() {
  try {
    const zones = await cf.zones.list();
    return NextResponse.json(zones);
  } catch (error) {
    return NextResponse.json(
      { error: "Failed to fetch zones" },
      { status: 500 }
    );
  }
}

Anyway, thanks for reading this Devlog! Maybe the next one will be a bit shorter lol

So i added some animation to the clock widget, and also some to the weather widget. I added the weather widget, and linked it to an API that will get the temperature, and also give a lucide icon for the current weather. The red blob is where it will say your location (Crossed out for my privacy).

I decided to make a simple header that changes 3 times, at morning, midday and night. Each time it has a different greeting for you, and makes the page feel more inviting to me. I also decided to add 2 blurred gradient circles, I am planning on subtly animating them, and possibly changing the color later (static color not animated color). I also added the time and date in the top left; the top right will soon have Weather data pulled from some weather API (once I find a good one.)

I added a nice footer to the website. It has links to the github repository, my Email, and the website links

So I decided to build a download archive for the website. The main reason was because if something in the app breaks for them, they can see if it is their computer, or my application. It also uses an array to organise the releases from most recent to oldest.

Sonora Music – Pain Edition

After a week of absolute debugging hell, I finally located and fixed an issue that prevented audio from playing entirely. That took up most of my week, and I also forgot to reinstall Wakatime after I reset my laptop and lost 2-3 hrs there :(

While I was at it, I also added Shuffle and Repeat functionality, making the player a bit nicer to use. I’m currently experimenting with a few UI prototypes because I’d really like to add proper playlist creation and management in the future.

In terms of releases, I uploaded the first version to GitHub, then realised I built my backup one that didn’t have shuffle and repeat, or the customisation. After uploading the correct build, my next steps are just to update the Sonora Website (another Stardance project ofc)

Here’s what I want to tackle next:

• Migrate the audio system to AVAudioEngine so I can implement more advanced audio features.

• Add a 3-band EQ (This is why I need to migrate over to AVAudioEngine, as my current AVF Framework doesn’t have support for these types of things or DSP in general).

• Implement a proper library and playlist view.

• Create a few custom themes which are similar to the current palette.

• Add a dedicated Settings page for things like themes, EQ controls, and other app parameters to keep the main UI less cluttered.

Overall, this update was mostly focused on bug fixes and polishing. Aside from the features above, I also designed a custom application logo and branded the DMG installer with a custom Sonora Music background, replacing the plain white installer window with something that actually matches the application’s style.

Hopefully, the next devlog is a little less about debugging and a little more about adding new features. Maybe? Please???

I decided to add system requirements to the application to future-proof it. I also added a small FAQ section with generic Lucide Svelte logos as placeholders; when I find better-suited ones, I will replace them. For now, the website is almost ready to be deployed on my domain. I just need to add an actual download hook for the button and make a page for legacy versions (e.g., I upload version 1.2, but someone else still requires 1.1 due to issues on their end.)

I added 3 animated cards that fly in when you scroll down. I also added a download button, for macOS - Apple Silicon. If possible in future I’ll adapt Sonora to work with MacOS x64 and possibly windows with an alternate audio framework.

I built the main website section. I added the title and some text, and a placeholder download button. I also used the Soft Aurora BG EFX by ReactBits to make the cool bg you see and I just set the blur to 75px so that it isn’t as distracting.

I was able to add a working play bar to the app and got the controls to work so that you are now able to skip forward and back songs. I now want to remove that scroll bar on the side and pin the play controls to the bottom of the screen.

So I decided to pivot the whole application to be macOS native by using AVFoundation for Audio. I had too many issues with rodio which is used with rust. While this means it is only for macOS users, it does mean that I can focus on creating for only one OS, and I can develop easier and better. After implementing AVFoundation I am able to select a song using the UI I developed earlier, and then play the song. The next step is to add player controls and a time bar, and work on adding a shuffle feature.

I added logic to select a folder for music and have it list the songs in the folder! I’m now going to add the ability to play music back