July 2023

SideBlog

Visit ProjectView Code

SideBlog

About

This is a fully responsive full-stack blog website with working CMS system

key features:

  • Autheticated markdown editor linked to firebase firestore and cloud storage

  • Dark and light theme modes for a pleasant user experience

  • Create an account, or log into an existing account

  • Working search bar, search by author, category, tag, title, with pagnation

  • Filter blogs by tag with pagination

  • Working contact form

  • View blogs by publication date with inbuilt pagination feature

  • Individual blog page for reading a blog post

  • Automatic blog view counter

  • An authenticated user can like a post.

  • Responsive and adaptive pages and component designs depending on device type and screen size.

  • Cursor responsive blog cover photos on desktops

Built in markdown editor:

Write a new blog post, update an existing, delete a blog you wrote, with resizable panes for editing and viewing.

Features:

  • Undo and redo, save, view live changes, add code blocks with light and dark mode, upload images, set your blog cover photo, tags, title and category.
  • Integrated reading time calculator and keyword generator for searches
  • Notification system and debounce changes for improved user experience
  • View a list of all your blogs
  • Responsive design for mobiles

Custom user profile page:

  • View all this users blog posts
  • Author filtered search bar including search by title, tag, category
  • Authenticated user can edit their profile photo, cover photo, and account details and authentication credentials.

Build:

  • Front-end React, Typescript & Next.Js (Framework) & Tailwind
  • Back-end Google Firebase- Firebase Authentication, cloud storage and database
  • Deployment-stack Vercel
  • Testing React Testing Library, Jest

You have reached the end of this project. Thank you for reading!


View all