🐺 MindWolf – Personal Blog App
A full-stack personal blogging platform where users can create, edit, and manage their own blog posts. Built as my very first MERN stack project, MindWolf was a challenging yet rewarding experience that introduced me to the real workflow of full-stack development.
📸 Preview
🚀 Quick Navigation
📚 New to MindWolf? Check out LEARN.md – architecture, setup, and contribution guide.
⚡ Want to get started fast? Jump to Getting Started .
📑 Table of Contents
🔧 Tech Stack
✨ What I Learned
🌱 My Experience
🚀 Getting Started
📦 Installation
🔧 Development Setup
📁 Project Structure
🧰 Scripts
📝 Notes
🤝 Contributing
📄 License
🔧 Tech Stack 🖥️ Frontend
React.js – User Interface
React Router DOM – Page navigation
CKEditor 5 – Rich text editor for blog posts
CSS (custom styling)
🌐 Backend
Node.js + Express.js – REST API server
Multer – File upload handling
CORS & JSON Middleware – Cross-origin & data parsing
🗄️ Database
MongoDB + Mongoose – Data storage and schema modeling
MongoDB Atlas – Cloud hosting
✨ What I Learned
Creating multiple pages with React Router
Designing and structuring a responsive frontend
Setting up a Node + Express backend from scratch
Handling file uploads with Multer
Implementing a rich text editor (CKEditor 5)
Connecting a project to a cloud database (MongoDB Atlas)
Understanding how frontend & backend connect together
🌱 My Experience
At first, I thought creating a blog app would be simple, but I quickly realized there was a lot to learn.
Every step — from React routing, backend APIs, database modeling, and image uploads — taught me something new. It was challenging, but also exciting because I got to build something real.
💡 MindWolf is not just a blog app — it’s a milestone in my web development journey.
🚀 Getting Started 📦 Installation
Clone the repository:
git clone https://github.com/YOUR_USERNAME/MindWolf.git cd MindWolf
Install dependencies for both frontend & backend:
cd backend npm install
cd frontend npm install
🔧 Development Setup
Start the backend:
cd backend npm start
Start the frontend:
cd frontend npm run dev
App will be running at: 👉 http://localhost:5173 (Frontend) 👉 http://localhost:5000 (Backend API)
📁 Project Structure MindWolf/ │── backend/ # Express server, routes, models │── frontend/ # React app │── uploads/ # Uploaded images (via Multer) │── package.json │── README.md
🧰 Scripts
npm run dev → Run frontend (Vite)
npm start → Run backend server
📝 Notes
This is my first MERN stack project 🎉
Built to learn full-stack development basics
Not production-ready yet, but a solid foundation
🤝 Contributing
Contributions, feedback, and suggestions are always welcome!