WataBlog - Blog Forum Platform

language	files	code	comment	blank	total
TypeScript	132	14,893	5,504	2,362	22,759
TypeScript JSX	113	13,833	437	1,478	15,748
Markdown	5	296	2	106	404
PostCSS	3	177	0	20	197
Python	8	176	15	34	225
YAML	2	103	0	2	105
JavaScript JSX	5	72	12	17	101
JSON with Comments	2	52	1	2	55
JavaScript	3	44	0	5	49

WataBlog is a full-stack blog and forum platform designed to connect writers, readers, and enthusiasts in meaningful conversations. The platform provides a modern, feature-rich environment for creating and sharing content, engaging in discussions, and discovering new ideas.

🏗️ Architecture Overview

The project follows a modern microservices architecture:

Next.js Frontend (/next-web): Responsive web interface with server-side rendering
NestJS Backend (/dispatch): RESTful API service for business logic and data management
Python Services (/services):
- Text-to-Speech Service: Converting blog content to audio
- Search Service: Advanced search capabilities using BM25 algorithm

✨ Key Features

User Management

Authentication: Secure login and registration via Auth0
User Profiles: Customizable profiles with avatars and bio
Follow System: Follow other users and keep track of their content
Dashboard: User statistics, analytics, and activity tracking
Payment with Momo: You can use money to get more credit

Content Creation & Management

Rich Post Editor: Create and edit blog posts with Markdown support
Categories & Tags: Organize content by topics and tags
Media Embedding: Include images and rich media in posts
Save for Later: Bookmark posts to read later
Draft System: Save drafts and publish when ready (not verified)

Engagement & Interaction

Comments & Discussions: Engage with content through nested comments
Like/Dislike System: Express reactions to posts and comments
Notifications: Real-time notifications for interactions
Direct Messaging: Private communication between users

Discovery & Search

Advanced Search: Find content by keywords, authors, categories, or tags
Personalized Recommendations: Content suggestions based on user preferences
Featured Content: Highlighting trending and popular posts
Text-to-Speech: Convert blog posts to audio for accessibility

Administration

Admin Dashboard: Moderate content, manage users, and monitor platform activity
Content Verification: Review and verify posts for quality
User Management: Manage user accounts and permissions
Bulk Notifications: Send announcements to users
Credit Editing: Change account credit, and interval of auto sending credit

🛠️ Tech Stack

Frontend

Next.js: React framework for server-side rendered pages
TypeScript: Type-safe JavaScript
Redux Toolkit: State management
Tailwind CSS: Utility-first CSS framework
Shadcn UI: Component library
Framer Motion: Animations and transitions
Auth0: Authencication Token-based + Oauth 2.0

Backend

NestJS: Progressive Node.js framework
TypeScript: Type-safe JavaScript
MongoDB: NoSQL database with Mongoose ODM
Passport.js: Authentication middleware
JWT: Token-based authentication

Services

FastAPI: Python API framework for microservices
BM25: Search ranking algorithm
Text-to-Speech: Audio conversion service
NLTK: Natural Language Processing library
Conda: Environment management for Python services

DevOps

Docker: Containerization
Redis: Caching
Nginx: Reverse proxy

🚀 Getting Started

Prerequisites

Node.js (v16+)
Python 3.8+ with Conda
MongoDB
Redis (optional, for production)

Installation

1. Clone the repository

git clone https://github.com/yourusername/blog_forum_project.git
cd blog_forum_project

2. Setup Next.js Frontend

cd next-web
npm install

3. Setup NestJS Backend

cd ../dispatch
npm install

4. Setup Python Services

Search Service

cd ../services/searching
conda env create -f environment.yml
conda activate se104-bm25-search-api
python -m nltk.downloader punkt

Text-to-Speech Service

cd ../text2speak
conda env create -f environment.yml
conda activate se104-fastapi-tts

Running the Application

1. Start the NestJS Backend

cd dispatch
npm run start:dev

2. Start the Next.js Frontend

cd next-web
npm run dev

3. Start the Python Services

Search Service

cd services/searching
conda activate se104-bm25-search-api
uvicorn main:app --host 0.0.0.0 --port 8000 --reload

Text-to-Speech Service

cd services/text2speak
conda activate se104-fastapi-tts
uvicorn main:app --host 0.0.0.0 --port 8001 --reload

Visit http://localhost:3000 to access the application.

📂 Project Structure

blog_forum_project/
├── dispatch/ # NestJS Backend
│ ├── src/
│ │ ├── account/ # User authentication and profiles
│ │ ├── blog/ # Blog post management
│ │ ├── mailer/ # Email notification service
│ │ ├── message/ # Direct messaging system
│ │ ├── search/ # Search integration
│ │ └── utils/ # Utility functions
│ └── ...
├── next-web/ # Next.js Frontend
│ ├── public/ # Static assets
│ │ └── showcase/ # Preview images
│ └── src/
│ ├── app/ # Pages and routes
│ ├── components/ # UI components
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utilities and configurations
│ └── utils/ # Helper functions
└── services/ # Python Microservices
├── searching/ # Search service
└── text2speak/ # Text-to-Speech service