iXperience - Software Engineering 2024

# Capstone Project

# Blog App Capstone Project

Project specifications

# Frontend App

Expected Frontend App Structure

# Pages

  • Landing page

    • Navigation Bar
    • Sections:
      • List all recent blog posts
        • Each blog post should display:
          • Image
          • Author
          • Title
          • Description
          • Categories
          • Button '🗑' for author should open the "Delete Blog Modal".
          • Button '🖊' for author should open the "Edit Blog Modal".
        • onClick on blog should open the "Blog Read Page" for the blog selected.
      • List all categories
        • Each category should display:
          • Title
          • Description
          • Colour
          • Button '🗑' should open the "Delete Category Modal".
          • Button '🖊' should open the "Edit Category Modal".
        • onClick on category should open the "Blogs Page" blog posts filtered by the category selected.

  • Categories page

    • Displays all categories
    • Each category should display:
      • Title
      • Description
      • Colour
      • Button '🗑' should open the "Delete Category Modal".
      • Button '🖊' should open the "Edit Category Modal".
    • onClick on category should open the "Blogs Page" blog posts filtered by the category selected.
    • Button "Add Category" for users to open "Add Category Modal" to create a category.

  • Blogs Page

    • Displays all categories for filtering
      • Display only title of category
      • onClick on category should filter the "Blogs Page" blog posts by category selected.
    • Display all blog posts
      • Each blog post should display:
        • Image
        • Author
        • Date
        • Title
        • Description
        • Categories
        • Button '🗑' for author should open the "Delete Blog Modal".
        • Button '🖊' for author should open the "Edit Blog Modal".
      • onClick on blog should open the "Blog Read Page" for the blog selected.
    • Button "Add Blog Post" for users to open "Add Blog Modal" to a blog post.

  • Blog Read Page

    • Display following details:
      • Image
      • Title
      • Date
      • By Author
        • Name and Surname
      • Description
      • Loop through and display each section with details:
        • Title
        • Text
    • Display author card with details:
      • "About the author"
      • Profile Image
      • Bio
    • onClick of Author should open the “Author Profile Page” for author selected.

  • Author Profile Page

    • Display following details:
      • Name
      • Surname
      • Profile Image
      • Short Bio
      • "Author Blog Posts" Section:
        • Display all blog posts by author
          • Button '🗑' for author should open the "Delete Blog Modal".
          • Button '🖊' for author should open the "Edit Blog Modal".
    • Button '🖊' for author should open the "Edit Profile Modal" to update profile.

  • Login Page

    • Display Title:
      • "Please login"
    • Display input for the following:
      • Email Address
      • Password
    • Button "Sign in" on success should open the "Landing Page".
    • onClick "Register" should open the "Registration Page".

  • Registration Page

    • Display Title:
      • "Author registration"
    • Display input for the following:
      • First name
      • Last name
      • Bio
      • Email Address
      • Password
    • Button "Register" on success should open the "Landing Page".
    • onClick "Login" should open the "Login Page".

# Expected Frontend Pages

# Landing Page

Landing Page

# Blogs Page

All Blogs Page

# Blog Reading Page

Blog Reading Page

# Categories Page

Categories Page

# Author Profile Page

Author Profile Page

# Login Page

Login Page

# Registration Page

Registration Page

# Modals

  • Create Blog Modal

    • Display input for the following:
      • Image
      • Categories
        • On selection category should display
      • Title
      • Description
      • Content:
        • Button "+" to create new sections allowing the inputs:
          • Section Header
          • Section Text
          • Button "🗑" to delete section created above.
    • Button "Close"
    • Button "Save changes"

  • Edit Blog Modal

    • Display input with populated information for the following:
      • Image
      • Categories
        • On selection category should display.
      • Title
      • Description
      • Content:
        • Button "+" to create new sections allowing the inputs:
          • Section Header
          • Section Text
          • Button "🗑" to delete section created above.
    • Button "Close"
    • Button "Save changes"

  • Delete Blog Modal

    • Display the following:
      • "Are you sure"
      • Blog Image
      • Blog Title
    • Button "Close"
    • Button "Delete"

  • Create Category Modal

    • Display input for the following:
      • Title
      • Description
      • Color Hexadecimal
    • Button "Close"
    • Button "Save changes"

  • Edit Category Modal

    • Display input with populated information for the following:
      • Title
      • Description
      • Color Hexadecimal
    • Button "Close"
    • Button "Save changes"

  • Delete Category Modal

    • Display the following:
      • "Are you sure"
      • Category Colour
      • Category Title
    • Button "Close"
    • Button "Delete"

  • Edit Profile Modal

    • Display input with populated information for the following:
      • Image
      • First Name
      • Last Name
      • Bio
      • Email
    • Button "Close"
    • Button "Save changes

# Expected Frontend Modals

# Add Blog

Add Blog Modal

# Edit Blog

Edit Blog Modal

# Delete Blog

Delete Blog Modal

# Add Category

Add Category Modal

# Edit Category

Edit Category Modal

# Delete Category

Delete Category Modal

# Edit Profile

Edit Profile Modal

# Backend App

Expected Backend Structure

# Backend Actions and Routes

  • Authentication:

    • CRUD
      • Login User
        • login
      • Register New User
        • register
      • Update User
        • updateUser
      • Fetch User By ID
        • getUser

  • Categories:

    • CRUD
      • Create Category
        • createCategory
      • Edit Category
        • updateCategory
      • Delete Category
        • deleteCategory
      • Fetch Category
        • Fetch All
          • getCategories
        • Fetch By ID
          • getCategory

  • Blog Posts:

    • CRUD
      • Create Blog
        • createBlog
      • Edit Blog
        • updateBlog
      • Delete Blog
        • deleteBlog
      • Fetch Blog
        • Fetch All
          • getBlogs
        • Fetch By Blog ID
          • getBlog
        • Fetch By Author ID
          • getBlogsByAuthorId
        • Fetch By Category ID
          • getBlogsByCategoriesId

# Category Definition

Category: {
   id: string / ObjectId;
   title: string;
   description: string;
   color: string;
   createdAt: Date;
   updatedAt: Date;
}

# Blog Definition

Blog: {
   id: string / ObjectId;
   authorId: string / ObjectId;
   categoryIds: array / ObjectId;
   title: string;
   description: string;
   image: string;
   content: array;
   createdAt: Date;
   updatedAt: Date;
}

# Author Definition

Author: {
   id: string / ObjectId;
   firstName: string;
   lastName: string;
   email: string;
   bio: string;
   image: string;
   password: string;
}