{"id":48586688,"url":"https://github.com/flexycode/myblog","last_synced_at":"2026-04-08T18:13:02.521Z","repository":{"id":327742155,"uuid":"1110586110","full_name":"flexycode/myblog","owner":"flexycode","description":"MyBlog is powerful like a fruit juice or holy spaghetti matching with holy macaroni","archived":false,"fork":false,"pushed_at":"2025-12-17T07:52:44.000Z","size":4280,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-20T21:11:21.196Z","etag":null,"topics":["express","javascript","mern-stack-development","mongodb","nodejs","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flexycode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-05T12:18:59.000Z","updated_at":"2025-12-17T07:52:49.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/flexycode/myblog","commit_stats":null,"previous_names":["flexycode/myblog"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/flexycode/myblog","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flexycode%2Fmyblog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flexycode%2Fmyblog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flexycode%2Fmyblog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flexycode%2Fmyblog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flexycode","download_url":"https://codeload.github.com/flexycode/myblog/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flexycode%2Fmyblog/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31567645,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["express","javascript","mern-stack-development","mongodb","nodejs","react"],"created_at":"2026-04-08T18:13:01.191Z","updated_at":"2026-04-08T18:13:02.508Z","avatar_url":"https://github.com/flexycode.png","language":"JavaScript","readme":"\u003c!-- Background github cover with short introduction down below --\u003e\n\u003cimg src=\"https://github.com/flexycode/flexycode/blob/main/assets/ragnarok-online.png\" /\u003e\n\n\n# 📝 MyBlog\n\nA full-stack blogging platform built with **React**, **Node.js**, **Express**, and **MongoDB**. Create, share, and manage your blog posts with a modern, responsive interface.\n\n![React](https://img.shields.io/badge/React-19.2.0-blue?logo=react)\n![Node.js](https://img.shields.io/badge/Node.js-Express-green?logo=node.js)\n![MongoDB](https://img.shields.io/badge/MongoDB-Atlas-success?logo=mongodb)\n![License](https://img.shields.io/badge/License-MIT-yellow)\n\n---\n\n## 📋 Table of Contents\n\n- [✨ Features](#-features)\n- [🛠️ Tech Stack](#️-tech-stack)\n- [📁 Project Structure](#-project-structure)\n- [⚙️ Prerequisites](#️-prerequisites)\n- [🚀 Getting Started](#-getting-started)\n- [🔐 Environment Variables](#-environment-variables)\n- [📜 Available Scripts](#-available-scripts)\n- [🔗 API Endpoints](#-api-endpoints)\n- [📮 Postman Testing](#-postman-testing)\n- [🤝 Contributing](#-contributing)\n- [📄 License](#-license)\n\n---\n\n## ✨ Features\n\n| Feature | Description |\n|---------|-------------|\n| 🔐 **User Authentication** | Secure login and registration with role-based access (Admin/User) |\n| ✍️ **Blog Management** | Create, read, update, and delete blog posts |\n| 💬 **Comments System** | Add and view comments on blog posts |\n| 📊 **Dashboard** | Personal dashboard to manage your content |\n| 👤 **Role-Based Users** | Support for Admin and User roles |\n| 🎨 **Responsive Design** | Beautiful UI that works on all devices |\n\n---\n\n## 🛠️ Tech Stack\n\n### Frontend\n- ⚛️ **React 19** - Modern UI library\n- 🎨 **Bootstrap 5** - Responsive CSS framework\n- 🔀 **React Router DOM** - Client-side routing\n\n### Backend\n- 🟢 **Node.js** - JavaScript runtime\n- 🚂 **Express 5** - Web framework\n- 🍃 **MongoDB** - NoSQL database\n- 🔗 **Mongoose** - MongoDB ODM\n\n### Dev Tools\n- 🔄 **Concurrently** - Run multiple scripts simultaneously\n- 🔥 **Nodemon** - Auto-restart server on changes\n\n---\n\n## 📁 Project Structure\n\n```\nmyblog/\n├── 📂 backend/\n│   ├── 📄 server.js          # Express server \u0026 MongoDB connection\n│   ├── 📄 authRoutes.js      # Authentication routes (register/login)\n│   ├── 📄 blogRoutes.js      # Blog post CRUD routes\n│   ├── 📄 commentRoutes.js   # Comments routes\n│   ├── 📄 userModel.js       # User schema (with role)\n│   ├── 📄 blogPostModel.js   # Blog post schema\n│   ├── 📄 commentModel.js    # Comment schema\n│   └── 📄 .env               # Environment variables\n├── 📂 src/\n│   ├── 📂 components/\n│   │   ├── 📄 AppNavbar.js     # Navigation bar\n│   │   ├── 📄 Dashboard.js     # Dashboard component\n│   │   ├── 📄 HomePage.js      # Landing page\n│   │   ├── 📄 Login.js         # Login form\n│   │   ├── 📄 Register.js      # Registration (with role selector)\n│   │   ├── 📄 Services.js      # Blog articles list\n│   │   ├── 📄 ArticleDetail.js # View post with comments\n│   │   ├── 📄 About.js         # About page\n│   │   ├── 📄 Contact.js       # Contact page\n│   │   └── 📄 Footer.js        # Footer component\n│   ├── 📄 App.js             # Main application with routes\n│   ├── 📄 App.css            # Application styles\n│   └── 📄 index.js           # React entry point\n├── 📄 package.json           # Dependencies and scripts\n└── 📄 README.md              # Project documentation\n```\n\n---\n\n## ⚙️ Prerequisites\n\nBefore you begin, ensure you have the following installed:\n\n- 📦 **Node.js** (v18 or higher) - [Download](https://nodejs.org/)\n- 🍃 **MongoDB Atlas Account** - [Sign Up](https://www.mongodb.com/atlas)\n- 💻 **Git** - [Download](https://git-scm.com/)\n- 📮 **Postman** (optional) - [Download](https://www.postman.com/downloads/)\n\n---\n\n## 🚀 Getting Started\n\n### 1️⃣ Clone the Repository\n\n```bash\ngit clone https://github.com/flexycode/myblog.git\ncd myblog\n```\n\n### 2️⃣ Install Dependencies\n\n```bash\nnpm install\n```\n\n### 3️⃣ Configure Environment Variables\n\nCreate a `.env` file in the `backend/` directory (see [Environment Variables](#-environment-variables)).\n\n### 4️⃣ Run the Application\n\n```bash\nnpm run dev\n```\n\n🎉 **That's it!** \n- Frontend: [http://localhost:3000](http://localhost:3000)\n- Backend API: [http://localhost:5000](http://localhost:5000)\n\n---\n\n## 🔐 Environment Variables\n\nCreate a `.env` file in the `backend/` directory:\n\n```env\n# MongoDB Configuration\nMONGO_URI=mongodb+srv://\u003cusername\u003e:\u003cpassword\u003e@\u003ccluster\u003e.mongodb.net/myblog?retryWrites=true\u0026w=majority\n\n# Server Port\nPORT=5000\n\n# JWT Secret Key\nJWT_SECRET=your_jwt_secret_key_here\n```\n\n\u003e ⚠️ **Important:** Whitelist your IP address in MongoDB Atlas Network Access!\n\n---\n\n## 📜 Available Scripts\n\n| Command | Description |\n|---------|-------------|\n| `npm run dev` | 🚀 Runs frontend + backend concurrently |\n| `npm start` | ⚛️ Runs React frontend only (port 3000) |\n| `npm run backend` | 🖥️ Runs Express backend only (port 5000) |\n| `npm run build` | 📦 Builds for production |\n| `npm test` | 🧪 Runs test suite |\n\n---\n\n## 🔗 API Endpoints\n\n### 🔐 Authentication\n\n| Method | Endpoint | Description |\n|--------|----------|-------------|\n| `POST` | `/api/auth/register` | Register new user (with role) |\n| `POST` | `/api/auth/login` | Login and get user info |\n\n### 📝 Blog Posts\n\n| Method | Endpoint | Description |\n|--------|----------|-------------|\n| `GET` | `/api/blog` | Get all blog posts |\n| `GET` | `/api/blog/:id` | Get single blog post |\n| `POST` | `/api/blog` | Create new blog post |\n| `PUT` | `/api/blog/:id` | Update blog post |\n| `DELETE` | `/api/blog/:id` | Delete blog post |\n\n### 💬 Comments\n\n| Method | Endpoint | Description |\n|--------|----------|-------------|\n| `GET` | `/api/comments/:postId` | Get comments for a post |\n| `POST` | `/api/comments` | Create new comment |\n| `DELETE` | `/api/comments/:id` | Delete comment |\n\n---\n\n## 📮 Postman Testing\n\n### Register Admin User\n```\nPOST http://localhost:5000/api/auth/register\nContent-Type: application/json\n\n{\n  \"username\": \"admin\",\n  \"email\": \"admin@example.com\",\n  \"password\": \"password123\",\n  \"role\": \"admin\"\n}\n```\n\n### Login\n```\nPOST http://localhost:5000/api/auth/login\nContent-Type: application/json\n\n{\n  \"email\": \"admin@example.com\",\n  \"password\": \"password123\"\n}\n```\n\n### Create Blog Post\n```\nPOST http://localhost:5000/api/blog\nContent-Type: application/json\n\n{\n  \"title\": \"My First Blog Post\",\n  \"content\": \"This is the content of my blog post...\",\n  \"author\": \"admin\"\n}\n```\n\n### Get All Posts\n```\nGET http://localhost:5000/api/blog\n```\n\n### Add Comment\n```\nPOST http://localhost:5000/api/comments\nContent-Type: application/json\n\n{\n  \"postId\": \"\u003cblog-post-id\u003e\",\n  \"user\": \"admin\",\n  \"text\": \"Great post!\"\n}\n```\n\n---\n\n## 🤝 Contributing\n\nContributions are welcome! \n\n1. 🍴 Fork the repository\n2. 🌿 Create a feature branch (`git checkout -b feature/AmazingFeature`)\n3. 💾 Commit your changes (`git commit -m 'Add AmazingFeature'`)\n4. 📤 Push to the branch (`git push origin feature/AmazingFeature`)\n5. 🔃 Open a Pull Request\n\n\n\u003c!-- Contributors down below, kindly paste your github URL thanks and also you can revise your suited job title position --\u003e\n### 👋 Contributors\n### Special thanks to all my groupmates: \n * ####  😎 [Jay Arre Talosig](https://github.com/flexycode) - Machine Learning Engineer | Blockchain Developer | Bioinformatics Scientist    \n * ####  🕵️ [Alexander Castilo](https://github.com/xandercastillo0305-dev) - Penetration Tester | Software Engineer | Threat Researcher\n * ####  🧑‍💻 [Mark Jhoshua Taberna](https://github.com/MjTaberna) - Digital Forensics Analyst | UI Specialist | Full Stack Engineer \n * ####  🧑‍💻 [Charles Medio](https://github.com/charles41onlyy) - Machine Learning Engineer | Software Engineer\n * ####  🕵️ [Tristan Jhay Salamat](https://github.com/tristanjhay) - Full Stack Engineer | Forensics Analyst | QA Engineer\n\n\n * ####  🕵️‍♀️ [Rinoah Venedict Dela Rama](https://github.com/Noah-dev2217) - Forensic Analyst | QA Engineer | Data Engineer \n * ####  🥷 [Nicko Nehcterg Dalida](https://github.com/nicknicndin) - Digital Forensics Analyst | QA Engineer | Smart Contract Auditor\n---\n\n## 📄 License\n\nThis project is licensed under the **MIT License**.\n\n#### Git Commit Message: 🌿 My Macaroni Fruit Salad\n---\n\n\u003cp align=\"center\"\u003e\n  Made with ❤️ by \u003ca href=\"https://github.com/flexycode\"\u003eflexycode\u003c/a\u003e\n\u003c/p\u003e\n\n\u003c!-- End point line insert Thanks for visiting enjoy your day, feel free to modify this  --\u003e\n---\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://readme-typing-svg.demolab.com/?lines=Thanks+For+Visiting+Enjoy+Your+Day+~!;\" alt=\"mystreak\"/\u003e\n\u003c/p\u003e\n\n\u003c!-- Genshin Impact --\u003e\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZGxxeWR5bzJjajBnc3o5YTc5dGhzc2xsYWJ4aW5rOGZuamNtMjdnayZlcD12MV9naWZzX3NlYXJjaCZjdD1n/1rL7L4GaUTe55s5Sfm/giphy.gif\" width=\"300\"\u003e\n\u003cimg src=\"https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExdXk2cnByenBzdHR2Y2plYmxyYnVoY2pjaWRlOTRjcTBrMWV3czI0diZlcD12MV9naWZzX3NlYXJjaCZjdD1n/TH1EAFhvE2ucRSMkPC/giphy.gif\" width=\"300\"\u003e\n\u003c/div\u003e\n\n\u003c!-- End point line insert Comeback again next time, feel free to modify this  --\u003e\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://readme-typing-svg.demolab.com/?lines=Come+Back+Again+next+time\" alt=\"mystreak\"/\u003e\n\u003c/p\u003e\n\n\u003c/p\u003e\n    \n\u003cbr\u003e\n\u003c!-- End point insert background effect line of sight color red --\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/74038190/212284100-561aa473-3905-4a80-b561-0d28506553ee.gif\" width=\"1000\"\u003e\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflexycode%2Fmyblog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflexycode%2Fmyblog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflexycode%2Fmyblog/lists"}