These are the main things I have done split into categories for easy reading - not including every small thing. Have a nice read!

Note: This entire journal is fully written by hand, no AI was used

Blog Frontend

Video mainly showing the admin side of the blog, you can find the full website here: blog.sagecat.dev.

---

At the time of this journal, I have spent 53 hours on the frontend, with 32 commits.

Pages

• home page with all the blog posts from the /posts API
• a dynamic page for each blog with the full post from the /posts/:slug API
• dashboard page for admins with
  • stats such as total number of posts, read time and words
  • compact view of each post with the power to edit or delete it (/admin/deletePost API)
  • button to create new posts
• page for admins to create posts with a markdown editor (/admin/createPost API)
• page for admins to edit each post with a markdown editor (/admin/editPost API)
• login/register page for everyone, marking a user admin can be done from the database
• page to edit your profile, for all users
• 404 not found page

Features

• responsiveness - the entire blog works on mobile and tablet too!
• dark/light modes with a purple theme
• loading bar for all routes on load
• animations
  • for register and login links in navbar
  • while loading in for post images in home and post page
• proxy that checks if user is admin/authed before sending them to an admin only/authed only routes
• every API calls is a function from /api with files for auth, admin, posts

Components

• custom made dropdown component which shows when logged in, with
  • dark/light mode toggle with a fade transition
  • link to dashboard, if admin
  • link to edit profile page
  • logout button - which calls /auth/logout API
• custom made button component which has a loading bar in it
• components for each icons (from iconify)

Stuff that I did, but later on had to change are

• moving from rehype converting markdown to html, to the MarkdownPreview component from react-markdown-preview - I did this change as my markdown editor had a ton of features, such as copying code blocks , which were not in the rehype plugin.
• moving from postgres nest to supabase - I did this after an hour into setting up nest, as my friend suggested supabase to me and I realized its much easier to use
• making the entire auth process work for everyone - Before, the authentication process was only for admins, and after realizing it needs to be for everyone so it supports the commenting feature, I had to change stuff like the navbar, dropdown, the middleware.
• moving from my old form system to react-hook-form - My old form system worked for a while, but to do validations for each input it was not a viable option - thus I switched to react-hook-form.

Blog API

At the time of this journal, I have spent 11 hours on the backend, with 24 commits.

APIs

• /posts
  • /: Gets all posts
  • /:slug: Gets the post with the given slug
  • /:id/comment: Adds comment to the given post from the given user
  • /:id/comments: Gets all comments on the given post
• /admin
  • /createPost: Creates a Post with the given fields
  • /editPost: Edits a given post with the given fields
  • /deletePost: Deletes a given post
  • /stats: Gets total reading time and total words of all posts
• /auth
  • /register: Registers a new user with the given details and sets session
  • /login: Logins a new user with the given details and sets session
  • /me: Gets current session
  • /logout: Destroys current session
  • /edit: Edits user with given details
• /comments
  • /:id/edit: Edits a given comment with given details
  • /:id/delete: Deletes a given comment

Stuff that I did, but later on had to change are

• moving from javascript to typescript - Javascript worked at first, but I later on needed types - explaining the switch.
• making error handling better - Before, for every server errors I handled them at each route, this lead to many repetitive lines so I moved them to app.ts and called next() if I got a server error
• auth middleware - Instead of checking if the user is authed/an admin in every route, I made a middleware which can be set to auth only/admin only routes.

---

I have deployed both the frontend and the API to vercel, which took me around an hour.