StorySpire

laptop frame
StorySpire

Overview

A cutting-edge full-stack modern blogging platform. Leveraging the latest technologies including Next.js, Prisma, MongoDB, and NextAuth. This platform offers a seamless experience for both creators and readers.

Features

  1. User Management: Implement user registration, login, roles (author, reader), user profiles with basic info, and authored posts.

  2. Blog Post Management: Allow creation, editing, and deletion of blog posts with a feature-rich text editor that supports text formatting, image uploads, and categorization.

  3. Content Organization: Organize blog posts by categories, tags, and dates, enabling easy filtering and search by keywords, categories, or tags.

  4. Home & Post Display: Display a list of blog posts on the home page, with each individual post view showing content, author, date, and comments.

  5. User Interaction & Engagement: Allow users to comment, like, and share blog posts; support following favorite authors and topics.

  6. Social Sharing: Provide functionality for users to share posts on social media platforms.

  7. Advanced Search & Filtering: Implement a search bar and allow filtering by keywords, categories, tags, and dates.

Timeline

3 months, Deployed in February 2024

Challenges

  1. User Authentication & Authorization: Securely manage login, roles (author, reader), and restrict access to specific actions like post creation.

  2. Content Filtering & Searching: Implement fast search and filter features to handle large numbers of posts, categories, and tags efficiently.

  3. Media Management: Allow image uploads in posts while managing file storage, resizing, and optimization.

  4. WYSIWYG Editor: Integrate a WYSIWYG editor that supports text formatting, media embedding, and produces clean HTML.

  5. Database Relationships for Likes and Follows: Design efficient relationships for likes and follows to handle growing interactions without performance issues.

Tech Stack

React React
Tailwind CSS Tailwind CSS
nextjs nextjs
prisma prisma
postman postman
MongoDB MongoDB
Typescript Typescript

Highlights

Showcasing Major Milestones and the Key Features

Robust Authentication & Authorization

0.1 Robust Authentication & Authorization

Image
Home & Post Display

0.2 Home & Post Display

Image
Blog post page

0.3 Blog post page

Image
Blog editor with tons of features

0.4 Blog editor with tons of features

Image
User interaction, engagement & social sharing

0.5 User interaction, engagement & social sharing

Image
User account management

0.6 User account management

Image
User profile page with recent, popular and draft tabs

0.7 User profile page with recent, popular and draft tabs

Image
Content organisation by topics and tags

0.8 Content organisation by topics and tags

Image
Advanced search for finding blogs, topics and users across the app

0.9 Advanced search for finding blogs, topics and users across the app

Image
Follow a user or a topic

1.0 Follow a user or a topic

Image

Next Project

CheckOff

CheckOff is a modern task management app with a user-friendly interface developed using React and Next JS. Tasks are stored and retrieved using a backend built with Next JS and Firebase. The app supports task creation, updating, and deletion, as well as organization through lists or tags and creation and syncing user accounts across all devices.