Wordwalker is a full-stack MERN (MongoDB, Express.js, React, Node.js) blogging platform built to serve as a personal publishing hub with scalable content management.
Its standout capability is AI-powered cover image generation: creators can generate article visuals from prompts (via OpenAI) and store them through Imgur integration, making content production faster and more engaging.
Designed around a creator-centric, reader-focused model, Wordwalker supports role-based workflows:
Core user-facing features include:
Overall, Wordwalker combines modern full-stack architecture with practical creator tools to deliver a streamlined publishing and reading experience.
🔗 Live Demo: https://myblogpost-frontend-static-site.onrender.com/
︎ Github: https://github.com/MagicDogGuo/Wordwalker
Role in the project: Full-stack Developer
Its standout capability is AI-powered cover image generation: creators can generate article visuals from prompts (via OpenAI) and store them through Imgur integration, making content production faster and more engaging.
Designed around a creator-centric, reader-focused model, Wordwalker supports role-based workflows:
- Administrators oversee platform-wide content, comments, and subscriber management.
- Registered users can create and manage their own posts, update profiles, and interact with content.
- Readers/visitors enjoy clean article browsing with responsive UX across devices.
Core user-facing features include:
- Secure JWT-based authentication and profile management
- Post creation/editing/deletion with tag-based organization
- Personalized engagement tools such as favorites and likes
- Commenting system for community interaction
- Newsletter subscription support for audience retention
Overall, Wordwalker combines modern full-stack architecture with practical creator tools to deliver a streamlined publishing and reading experience.
🔗 Live Demo: https://myblogpost-frontend-static-site.onrender.com/
︎ Github: https://github.com/MagicDogGuo/Wordwalker
Role in the project: Full-stack Developer
Landing Page
Posts Page
Post Detail Page
User Posts & Favorite Posts Page
Tage Posts Page
User Profile Page
System Overview
1. User Browser (Client)
Everything starts in the user’s browser.-
SPA (Single-page app) —
A Single-page application built with React, Material UI, and React Router. Users navigate smoothly through the app without full page reloads.
- AuthContext —
Manages the global login state (including user, token, login, logout). Components can instantly access this state using the useAuth() hook, eliminating the need to pass props down through multiple layers.
-
localStorage — After a successful login, the JWT is stored in the browser as a token. When the page is refreshed, the application reads this token and calls /api/auth/me to automatically restore the user's session.
The browser does not talk to MongoDB or OpenAI directly. It only calls your backend API.
2. Frontend (port 3000)
The React app is organized roughly as:- Pages — route-level screens: favorites, my posts, profile, posts by tag.
- Components — reusable UI: login, post list, post detail, comments, subscribe dialog.
- config/api.js — base URL (
REACT_APP_API_URL) and endpoint constants (/auth/login,/posts,/ai/generate-image, etc.).
How it calls the backend: Axios requests with: ‘ Authorization: Bearer <JWT> ’ for protected routes (create post, like, AI image, etc.).
3. Backend Express (port 5000)
The API server is the center of the system.- app.js (Entry Point) — Main entry point. Loads env, connects MongoDB, runs initData.js, configures CORS/JSON parsing, mounts routes, and handles global 404/500 errors.
-
middleware/auth.js —
Auth guard for protected endpoints. Validates JWT from Authorization: Bearer ... using JWT_SECRET and attaches the user data to req.user.
- Routes
— Modular RESTful APIs prefixed with /api. Domains include: /api/auth, /api/posts, /api/comments, /api/subscribers, and /api/ai.
- Mongoose Models —
Defines database schemas and handles CRUD operations for four core collections: User, Post, Comment, and Subscriber.
- scripts/initData.js — Database seeder that runs on startup. Automatically pre-populates default admin/user roles along with sample posts and comments.
The backend is the only layer that should hold secrets (
JWT_SECRET, OPENAI_API_KEY, IMGUR_CLIENT_ID, MONGODB_URI).4. MongoDB (Database)
- User — accounts, roles (
admin/user), hashed passwords, favorites. - Post — title, content, author, tags, likes, image URL.
- Comment — linked to post and user.
- Subscriber — email subscriptions.
Mongoose sits between Express routes and MongoDB (ODM: schemas, validation, queries like
find, populate).AI Image Generation Flow
This sequence shows how a user generates an AI featured image and how the backend handles the Imgur fallback.
other projects: