ARTICLE-SERVER-FULL-STACK-BLOGGING-PLATFORM

Empowering Creators, Inspiring Readers, Unleashing Ideas

Built with the tools and technologies:

---

📄 Table of Contents

• Overview
• UI Preview
• Features
• Project Structure
  • Project Index
• Getting Started
  • Prerequisites
  • Installation
  • Usage
  • Testing
• Learning Outcomes
• Roadmap
• Contributors
• Acknowledgments
• License

---

✨ Overview

article-server-full-stack-blogging-platform is an open-source project featuring a Vue 3 + Vite frontend and a Node.js + Express backend. The repository provides a clear full-stack structure for building, testing, and running blogging-style applications using a modern JavaScript ecosystem.

📚 Summary

• 🟢 Frontend: Vue 3 + Vite with Bootstrap styling
• 🔵 Backend: Express + Node.js with SQLite database
• 🟣 Testing: Mocha + Chai unit tests included
• 🟠 Structure: Two distinct folders for frontend and backend separation
• ⚪ Database: Local SQLite integration for lightweight persistence

---

🎨 UI Preview

Frontend View	Admin / Dashboard View

---

📌 Features

	Component	Details
⚙️	Architecture	Full-stack MVC pattern Frontend: Vue.js Backend: Express.js REST API Database: SQLite (local-file storage)
📰	Core Features	Blog article management — Create, Read, Update, Delete (CRUD) Tag-based article categorisation & filtering Markdown-style or WYSIWYG editor for writing posts Responsive UI optimised for both desktop & mobile
👤	User & Auth System	User registration & login (JWT / cookie-based authentication) Author profile page displaying bio & authored posts Role-based access control (Standard User / Author / Admin)
🔌	Integrations	Vue Router for smooth client-side navigation Axios (or Fetch API) for RESTful communication dotenv for environment variable configuration Custom npm/Yarn scripts for dev, build & testing
🧩	Modularity	Reusable Vue components (e.g., PostList.vue, PostEditor.vue, Navbar.vue) Backend routes modularised by domain (Auth, Posts, Users) Shared utility modules for validation, sanitisation & helpers
🔩	Code Quality	Consistent linting with ESLint / JSHint Clean and readable folder structure for scalability Inline code comments and clear documentation blocks
🧪	Testing	Backend unit tests with Mocha & Chai HTTP integration tests via chai-http Automated test scripts in package.json (npm test)
⚡️	Performance	Fast builds using Vite bundler Optimised SQLite queries for lightweight operations Client-side performance tuning with code-splitting & lazy loading
🛡️	Security	Input validation using Joi Basic sanitisation and profanity filtering CORS middleware enabled Protected routes & authentication middleware for content editing
📄	Documentation	Comprehensive README with setup, usage & contribution guide Inline API documentation within backend routes Example environment config (.env.example)
📦	Dependencies	Frontend: Vue.js, Vue Router, Axios, Vite Backend: Express, SQLite3, body-parser, Joi, dotenv Dev Tools: @vitejs/plugin-vue, ESLint, JSHint, Mocha, Chai

---

📁 Project Structure

└── article-server-full-stack-blogging-platform/
├── Article Server Backend/
│   ├── app/
│   │   ├── controllers/
│   │   │   ├── articles.controllers.js
│   │   │   ├── comments.controllers.js
│   │   │   └── user.controllers.js
│   │   ├── lib/
│   │   │   └── authentication.js
│   │   ├── models/
│   │   │   ├── articles.models.js
│   │   │   ├── comments.models.js
│   │   │   └── user.models.js
│   │   └── routes/
│   │       ├── articles.routes.js
│   │       ├── comments.routes.js
│   │       └── user.routes.js
│   ├── database.js
│   ├── db.sqlite
│   ├── package-lock.json
│   ├── package.json
│   ├── README.md
│   └── server.js
├── frontend-app/
│   ├── vue-project/
│   │   ├── src/
│   │   │   ├── components/
│   │   │   │   ├── Article.vue
│   │   │   │   ├── CreateArt.vue
│   │   │   │   ├── deleteArt.vue
│   │   │   │   ├── deleteComment.vue
│   │   │   │   ├── UpdateArt.vue
│   │   │   │   ├── usersCreate.vue
│   │   │   │   └── UsersGetAll.vue
│   │   │   ├── pages/
│   │   │   │   ├── Dashboard.vue
│   │   │   │   ├── Home.vue
│   │   │   │   └── Login.vue
│   │   │   ├── router/
│   │   │   │   └── index.js
│   │   │   ├── Services/
│   │   │   │   ├── article.service.js
│   │   │   │   ├── comments.service.js
│   │   │   │   └── users.service.js
│   │   │   ├── Views/
│   │   │   │   └── App.vue
│   │   │   └── main.js
│   │   ├── .gitignore
│   │   ├── index.html
│   │   ├── package-lock.json
│   │   ├── package.json
│   │   ├── README.md
│   │   └── vite.config.js
│   ├── package-lock.json
│   ├── package.json
│   └── screencast.mp4
├── .gitignore
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
└── SECURITY.md

---

📑 Project Index

ARTICLE-SERVER-FULL-STACK-BLOGGING-PLATFORM/

__root__

• .gitignore — File.
• CODE_OF_CONDUCT.md — File.
• CONTRIBUTING.md — File.
• LICENSE — File.
• README.md — Project documentation, overview and setup instructions.
• SECURITY.md — File.

.github

• CODEOWNERS — File.

ISSUE_TEMPLATE

• bug_report.yml — File.
• config.yml — File.
• feature_request.yml — File.

PULL_REQUEST_TEMPLATE

• pull_request_template.yml — File.

scripts

• update-contributors.js — JavaScript file.

workflows

• ci.yml — File.
• update-contributors.yml — File.
• update-project-index.yml — File.
• update-project-structure.yml — File.
• update-tech-badges-single-repo.yml — File.

Article Server Backend

• database.js — JavaScript file.
• db.sqlite — File.
• package-lock.json — Lockfile with exact dependency versions.
• package.json — Npm manifest (dependencies & scripts).
• README.md — Project documentation, overview and setup instructions.
• server.js — Server-side JavaScript.

app

controllers

• articles.controllers.js — WebSocket-related JavaScript.
• comments.controllers.js — JavaScript file.
• user.controllers.js — WebSocket-related JavaScript.

lib

• authentication.js — JavaScript file.

models

• articles.models.js — WebSocket-related JavaScript.
• comments.models.js — JavaScript file.
• user.models.js — WebSocket-related JavaScript.

routes

• articles.routes.js — JavaScript file.
• comments.routes.js — JavaScript file.
• user.routes.js — JavaScript file.

tests

• test.a.database.refresh.js — JavaScript file.
• test.b.users.creation.js — JavaScript file.
• test.c.users.retrieval.js — JavaScript file.
• test.d.users.login.and.logout.js — JavaScript file.
• test.e.articles.creation.js — JavaScript file.
• test.f.articles.retrieval.js — JavaScript file.
• test.g.articles.edit.and.delete.js — JavaScript file.
• test.i.comments.creation.js — JavaScript file.
• test.j.comments.retrieval.js — JavaScript file.
• test.k.comments.delete.js — JavaScript file.

data

• mock_articles_bad.json — File.
• mock_articles_good.json — File.
• mock_comments_good.json — File.
• mock_users_bad.json — File.
• mock_users_good.json — File.

frontend-app

• package-lock.json — Lockfile with exact dependency versions.
• package.json — Npm manifest (dependencies & scripts).
• screencast.mp4 — File.

vue-project

• .gitignore — File.
• index.html — HTML page.
• package-lock.json — Lockfile with exact dependency versions.
• package.json — Npm manifest (dependencies & scripts).
• README.md — Project documentation, overview and setup instructions.
• vite.config.js — JavaScript file.

public

• favicon.ico — File.

src

• main.js — WebSocket-related JavaScript.

components

• Article.vue — File.
• CreateArt.vue — File.
• deleteArt.vue — File.
• deleteComment.vue — File.
• UpdateArt.vue — File.
• usersCreate.vue — File.
• UsersGetAll.vue — File.

pages

• Dashboard.vue — File.
• Home.vue — File.
• Login.vue — File.

router

• index.js — Main server entrypoint that wires HTTP and WebSocket servers.

Services

• article.service.js — JavaScript file.
• comments.service.js — JavaScript file.
• users.service.js — JavaScript file.

Views

• App.vue — File.

---

🚀 Getting Started

📋 Prerequisites

This project requires the following dependencies:

• Programming Language: JavaScript
• Package Manager: Npm

⚙️ Installation

Build article-server-full-stack-blogging-platform from the source and install dependencies:

1. Clone the repository:

   ❯ git clone https://github.com/MA1002643/article-server-full-stack-blogging-platform

2. Navigate to the project directory:

   ❯ cd article-server-full-stack-blogging-platform

3. Install the dependencies:

Using npm:

❯ npm install

💻 Usage

Run the project with:

Using npm:

npm start

🧪 Testing

Article-server-full-stack-blogging-platform uses the {test_framework} test framework. Run the test suite with:

Using npm:

npm test

---

🎓 Learning Outcomes

• Designed and implemented a full-stack blogging platform using Vue.js, Express.js, and SQLite, following the MVC pattern.
• Strengthened understanding of RESTful API development, client–server communication, and state management in modern web apps.
• Gained hands-on experience in authentication and authorization, including protected routes and JWT-based sessions.
• Improved proficiency with frontend frameworks (Vue.js) and backend technologies (Node.js/Express) for real-world production setups.
• Practiced database design and integration with SQLite, including CRUD operations, schema management, and relational logic.
• Applied modular software architecture principles to achieve maintainable, scalable, and testable code across both frontend and backend.
• Developed and executed unit and integration tests using Mocha, Chai, and chai-http to ensure system reliability.
• Enhanced understanding of secure web application development, implementing input validation, sanitisation, and CORS protection.
• Experienced complete Dev–Build–Test workflow using modern tooling (Vite, ESLint, npm scripts) and CI-friendly practices.
• Strengthened teamwork and professional GitHub practices through version control, branching strategies, and clear documentation.

---

📈 Roadmap

• Task 1: Implement feature one.
• Task 2: Implement feature two.
• Task 3: Implement feature three.

---

🤝 Contributors

---

✨ Acknowledgments

• Inspired by modern publishing platforms such as Medium, Hashnode, and Dev.to, which influenced the app’s clean design and user-centric experience.
• Developed as part of a full-stack software engineering initiative, focused on mastering scalable web architecture and practical project delivery.
• Grateful to the open-source community behind Node.js, Express.js, Vue.js, and SQLite for providing the tools and frameworks that made this project possible.
• Appreciation to mentors, peers, and online contributors whose feedback and shared resources helped refine both technical and architectural decisions.
• Created to demonstrate industry-relevant full-stack development skills — including REST API design, authentication systems, modular architecture, and end-to-end testing.

---

📜 License

This project is licensed under the MIT License. See the LICENSE file for full details.

© 2025 Muhammad Abdullah
Developed with 💙 using Vue 3, Vite, Vue Router, Bootstrap, Express (Node.js) & SQLite