bg

SpiralSrc Blog

About this project

SpiralSrc is my personal blog website, featuring a complete admin dashboard for managing categories, blog posts, and tags. The blog content is rendered with react-markdown, allowing for rich text formatting.

Key features include:

  • Admin Controls: Add, edit, and delete categories, posts (with preview), and tags.
  • User Engagement: Users can sign up or log in to like and comment on posts. They are redirected to their previous page after authentication for a seamless experience.
  • Custom UI & Animations: The interface, hover effects, and mobile navbar animations are built from scratch using a combination of Tailwind CSS and CSS3.
  1. NextJs/ReactJs
  2. Prisma ORM
  3. Clerk Auth
  4. SQLite Database
  5. React-Markdown
  6. TailwindCSS

Features:

WYSIWYG Text Editor

  • What You See Is What You Get (WYSIWYG) feature in writing a post using react-markdown npm, styled using TailwindCSS Typography plugin with custom stylings to meet desired look for my blogs.

Role-Based Access Control Authentication

  • Basic Role-Based Access Control (RBAC) aunthentication with Clerk metadata that is used to check whether a user has an "Admin" or just "Basic/Guest" role to be checked in the app's middleware. E.g if a user does not have an "Admin" role, looked up the pages only accessible by admin users will be redirected to a "not found" page.

Dashboard - CRUD Operations

  • In-App Admin Dashboard where I can create, edit and delete categories and blog posts. Tags are being created when being added in writing a post wherein if the tag name is not found in the database, it will create a new one; else the post will be added into the existing tag name to be populated.

Server-Side/Client-Side Rendering

  • Pages are defaulted to server-side rendering using NextJs, while components that requires interactivity or with React Hooks used are rendered client-side.

SEO Optimization

  • This website has SEO optimized using NextJs metadata with an opengraph-image added in the src directory for the pages and dynamically generated metadata for the dynamic-routed pages for the slug using "generateMetadata".

Search Query

  • Ability to search posts using "useSearchParams" to find the post title from the database. Then using "useRouter" to replace the url path with the path name matched in the search query using "usePathName".

Minimalist Design

  • Minimalist themed website with style. User interfaces were created from scratch using the combination of TailwindCSS and CSS3 including the subtle hover animations and the navbar slide animation on mobile screens.

Responsive Designs/Layouts

  • The app is fully responsive, ensuring that the layout adapts seamlessly across different devices, maintaining a clean and user-friendly experience on both desktop and mobile using CSS3 media query.
Go back...