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.

📋 Table of Contents

• Architecture Overview
• Key Features
• Tech Stack
• Getting Started
  • Prerequisites
  • Installation
  • Running the Application
• Project Structure
• Showcase
• Contributing

🏗️ Architecture Overview

The project follows a modern microservices architecture:

1. Next.js Frontend (/next-web): Responsive web interface with server-side rendering
2. NestJS Backend (/dispatch): RESTful API service for business logic and data management
3. 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

Diagram

Architecture

Click to view Architecture

Database

Click to view Database

Components

Click to view Components

Routing

Click to view Routing

📸 Showcase

Landing Page

Click to view Landing Page

Homepage, Notification

Click to view Homepage

You will also receive email from notification

Article View

Click to view Article View

Markdown and Comment Example

Click to view Markdown and Comment Example

Search Interface

Click to view Search Interface

Admin Dashboard

Click to view Admin Dashboard

Account Dashboard

Click to view Account Dashboard

Edit Profile

Click to view Edit Profile

Credit System

Click to view Credit System

Payment with Momo

Click to view Payment with Momo

Message

Click to view Message

Saved Post

Click to view Saved Post

Text2Speech

Click to view Text2Speech

Follow

Click to view Follow

Followed account will receive credit from follower account in an interval of time

Profile Page

Click to view Profile Page

Edit Post

Click to view Edit Post

You can create, edit, and remove post (if you're admin or author, and must be a verified account)

Default Page

Click to view Default Page

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

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

📄 Licens

---

Built with ❤️ by Trungdangtapcode