Pohutukawa Personal Blogging System

A comprehensive personal blogging system with article publishing, comment interactions, user management, and more. Built with modern technology stack including web frontend, backend API, and desktop client.

🌟 Features

• Multi-platform Support: Web frontend + Desktop client
• Modern Tech Stack: Svelte + Node.js + SQLite
• Rich Text Editing: Integrated TinyMCE editor
• User System: Registration, login, profile management
• Social Features: Article likes, comment system, user following
• Responsive Design: Adapts to various device screens
• File Upload: Support for avatar and article cover image uploads

📋 Table of Contents

• Tech Stack
• Project Structure
• Features
• Installation
• Usage
• API Documentation
• Development Guide
• Team Information
• License

🛠 Tech Stack

Frontend (Web)

• Framework: Svelte 4.2 + SvelteKit
• Build Tool: Vite
• Styling: CSS3 + Responsive Design
• Editor: TinyMCE 7.6
• Utilities: Day.js, Lodash

Backend

• Runtime: Node.js 18+
• Framework: Express.js
• Database: SQLite3
• Authentication: JWT + Argon2 password hashing
• File Upload: Multer
• Validation: Yup
• Others: CORS, Morgan, Cookie-parser

Desktop Client

• Language: Java
• UI Framework: Java Swing
• JSON Processing: json-20210307.jar

📁 Project Structure

project-group-3/
├── backend/                 # Backend service
│   ├── src/
│   │   ├── app.js          # Main application entry
│   │   ├── data/           # Data access layer
│   │   ├── middleware/     # Middleware
│   │   ├── routes/         # Route definitions
│   │   └── sql/            # Database initialization
│   ├── public/             # Static files
│   └── package.json
├── frontend/               # Frontend application
│   ├── src/
│   │   ├── lib/            # Components and utilities
│   │   └── routes/         # Page routes
│   ├── static/             # Static resources
│   └── package.json
├── JavaSwingInterface/     # Desktop client
│   ├── src/ictgradschool/industry/
│   └── libs/               # Dependencies
└── README.md

✨ Features

🔐 User System

• User registration and login
• Personal profile management
• Avatar upload and display
• User following functionality
• Admin permission control

📝 Article Management

• Rich text article editing
• Article cover image upload
• Article categorization and tagging
• Article search and sorting
• Personal article management

💬 Social Features

• Article comment system
• Multi-level comment replies
• Article and comment likes
• User interaction statistics

🎨 Interface Design

• Responsive layout design
• Modern UI components
• Smooth animation effects
• Dark/Light theme support

🚀 Installation

Prerequisites

• Node.js 18.0 or higher
• npm or yarn package manager
• Java 8+ (for desktop client)

Backend Installation

1. Clone the repository

   git clone <repository-url>
   cd project-group-3
   

2. Install backend dependencies

   cd backend
   npm install
   

3. Configure environment variables

   # Create .env file
   echo "PORT=3000" > .env
   echo "FRONTEND_ORIGIN=http://localhost:5173" >> .env
   

4. Initialize database

   # Database will be automatically initialized with sample data
   npm run dev
   

Frontend Installation

1. Install frontend dependencies

   cd frontend
   npm install
   

2. Start development server

   npm run dev
   

Desktop Client

1. Compile Java project

   cd JavaSwingInterface
   # Use IDE or command line to compile
   javac -cp "libs/*" src/ictgradschool/industry/swing/*.java
   

2. Run client

   java -cp "libs/*:src" ictgradschool.industry.swing.Javaswinginterface
   

📖 Usage

Default Accounts

Admin Account:

• Username: admin
• Password: admin

Demo User:

• Username: example
• Password: example

Starting Services

1. Start backend service

   cd backend
   npm run dev
   # Service runs on http://localhost:3000
   

2. Start frontend service

   cd frontend
   npm run dev
   # Frontend runs on http://localhost:5173
   

3. Access the application

   • Open browser and visit http://localhost:5173
   • Use default accounts to login and experience features

Main Features Usage

1. Browse Articles: View latest articles on homepage
2. User Registration: Create new account and complete profile
3. Publish Articles: Use rich text editor to create and publish articles
4. Interactive Comments: Comment and reply to articles
5. Social Features: Follow other users, like articles and comments

📚 API Documentation

Authentication

• POST /api/auth/login - User login
• POST /api/auth/register - User registration
• GET /api/auth/profile - Get user information

Articles

• GET /api/articles - Get article list
• GET /api/articles/:id - Get article details
• POST /api/articles - Create new article
• PUT /api/articles/:id - Update article
• DELETE /api/articles/:id - Delete article

Comments

• GET /api/comments/:articleId - Get article comments
• POST /api/comments - Create comment
• DELETE /api/comments/:id - Delete comment

Users

• GET /api/users - Get user list
• PUT /api/users/:id - Update user information
• POST /api/users/:id/follow - Follow user

🛠 Development Guide

Development Environment Setup

1. Code formatting

   # Backend
   cd backend
   npm run format
   
   # Frontend
   cd frontend
   npm run format
   

2. Code linting

   # Frontend code linting
   cd frontend
   npm run lint
   

Database Management

The database uses SQLite, located at backend/src/data/database.db. Initialization script is in backend/src/sql/init-db.sql.

Adding New Features

1. Backend API: Add new routes in backend/src/routes/api/
2. Frontend Components: Add new components in frontend/src/lib/components/
3. Database: Modify init-db.sql to add new tables or fields

Deployment

1. Production build

   # Frontend build
   cd frontend
   npm run build
   
   # Backend start
   cd backend
   npm start
   

2. Environment configuration

   • Set NODE_ENV=production
   • Configure database connection
   • Set file upload paths

👥 Team Information

Team Pohutukawa - COMPSCI719 Final Project

Team Members:

• Kudakwashe Chinyanya
• Siqi Li
• Wei Zong
• Hairui Qiu

Project Timeline: January 2025

📄 License

This project is licensed under the ISC License.

🤝 Contributing

Issues and Pull Requests are welcome!

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📞 Contact

For questions or suggestions, please contact:

• Submit GitHub Issue
• Send email to project maintainers

---

Pohutukawa - New Zealand's Christmas tree, symbolizing the spiritual bridge connecting heaven and earth, just as our blogging system connects creators with readers.