BlogSpace

Overview

BlogSpace is a simple blogging platform built with vanilla web technologies that allows users to both write and display blogs in a clean, user-friendly interface. The project focuses on providing a minimal yet functional blogging experience within Web Development.

Live: blogspace.ashwin.co.in
Source code: Explore Repo

Goals & Problems Solved

• Provide a simple platform for users to write and publish their own blogs.
• Enable blog display in a structured, easy-to-read format.
• Focus on clean design and straightforward user flow without overengineering.
• Showcase practical application of core web technologies (HTML, CSS, JavaScript).

Architecture & Tech Stack

Layer	Technology / Library	Purpose
Frontend	HTML, CSS, JavaScript	Structure, styling, and interactivity
Hosting	Vercel	Deployment and live hosting

Key Features & UX Flow

1. Blog Display

   • Users can view existing blogs in a clean and readable format.

2. Blog Writing

   • Built-in editor lets users create and publish their own blog posts.

3. Validation & Publishing

   • Ensures proper input validation before allowing post submission.

4. Dynamic Interface

   • Posts are instantly reflected on the UI once published.

Code Walkthrough & Notable Modules

• index.html: Serves as the main entry point with blog display and editor sections.
• styles.css: Handles layout, typography, and responsiveness.
• script.js: Implements blog creation logic, form validation, and UI updates.
• assets/screenshots/: Contains visuals of various screens for documentation.

UI / Responsiveness & Design Decisions

• Simple two-section layout: one for browsing blogs, another for writing.
• Responsive design ensures accessibility across desktops and mobile devices.
• Minimalist color palette to keep the focus on blog content.

Challenges & Learnings

• Designing a seamless user flow for both reading and writing blogs in the same interface.
• Handling DOM updates dynamically to reflect new posts.
• Ensuring responsiveness without using frameworks.

Future Improvements

• Add persistent storage (localStorage or backend integration).
• Include categories, tags, and search functionality.
• Add support for rich text formatting (bold, italics, links).
• User authentication for personalized blogging.

Screens & Visuals

Landing Page

Full Interface

Footer

Publish Post

Post Validation

Writing a Post

New Post Added