bg

SpiralSrc Blog

About this project

My personal blog website complete with admin dashboard in which I have the ability to add, edit or delete categories, blog posts with preview using react-markdown for the blog content, and tags. Users need to log in or sign up to be able to comment or like a post and redirects users back to the previous page they were in before logging in for good user experience. User interfaces, smooth hover effects and navbar animation in mobile screens were made from scratch using the combination of TailwindCSS 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...