{"id":30874113,"url":"https://github.com/arnobt78/dev-bug-coder-blog--react-fullstack","last_synced_at":"2025-09-08T00:14:47.518Z","repository":{"id":298409037,"uuid":"999870236","full_name":"arnobt78/Dev-Bug-Coder-Blog--React-FullStack","owner":"arnobt78","description":"A modern, full-stack developer blog platform focused on sharing real-world coding errors and their solutions. Dev-Bug-Coder-Blog empowers developers to post, discuss, and resolve bugs, fostering a collaborative learning environment.","archived":false,"fork":false,"pushed_at":"2025-08-23T21:36:52.000Z","size":25871,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-24T09:11:45.055Z","etag":null,"topics":["axios","blog","blogpost","coder-blog","dev-bug-coder-blog","expressjs","jwt-bearer-tokens","middleware-authentication","mongodb-atlas","multer","nodemailer-smtp-transport","prisma-client","react-vite-typescript","render-deployment","reset-password","restful-api","tailwind-css","vercel-deployment"],"latest_commit_sha":null,"homepage":"https://dev-bug-coder-blog.vercel.app/","language":"TypeScript","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/arnobt78.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}},"created_at":"2025-06-10T23:22:37.000Z","updated_at":"2025-08-23T21:36:55.000Z","dependencies_parsed_at":"2025-08-24T09:44:43.654Z","dependency_job_id":null,"html_url":"https://github.com/arnobt78/Dev-Bug-Coder-Blog--React-FullStack","commit_stats":null,"previous_names":["arnobt78/dev-bug-coder-blog--reactvite","arnobt78/dev-bug-coder-blog--react","arnobt78/dev-bug-coder-blog--react-fullstack"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/arnobt78/Dev-Bug-Coder-Blog--React-FullStack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FDev-Bug-Coder-Blog--React-FullStack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FDev-Bug-Coder-Blog--React-FullStack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FDev-Bug-Coder-Blog--React-FullStack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FDev-Bug-Coder-Blog--React-FullStack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnobt78","download_url":"https://codeload.github.com/arnobt78/Dev-Bug-Coder-Blog--React-FullStack/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FDev-Bug-Coder-Blog--React-FullStack/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274113638,"owners_count":25224452,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-07T02:00:09.463Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["axios","blog","blogpost","coder-blog","dev-bug-coder-blog","expressjs","jwt-bearer-tokens","middleware-authentication","mongodb-atlas","multer","nodemailer-smtp-transport","prisma-client","react-vite-typescript","render-deployment","reset-password","restful-api","tailwind-css","vercel-deployment"],"created_at":"2025-09-08T00:14:42.493Z","updated_at":"2025-09-08T00:14:47.494Z","avatar_url":"https://github.com/arnobt78.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dev-Bug-Coder-Blog – A Full-Stack Developer Blog for Coding Errors \u0026 Solutions – React, Express, Prisma Website\n\n![Screenshot 2025-08-23 at 23 04 48](https://github.com/user-attachments/assets/d184b39a-e19d-48c4-8988-1b511b9f4924)\n![Screenshot 2025-08-23 at 23 06 25](https://github.com/user-attachments/assets/eeccee97-96e5-4d14-90c4-015716f5ac8d)\n![Screenshot 2025-08-23 at 23 06 52](https://github.com/user-attachments/assets/ea4cb0ab-0c2d-4e0b-a183-6fa0b785cbff)\n![Screenshot 2025-08-23 at 23 07 50](https://github.com/user-attachments/assets/988809c2-69a7-46ee-b7ed-e6368a30e29e)\n![Screenshot 2025-08-23 at 23 08 07](https://github.com/user-attachments/assets/ef6130cb-0411-4c81-b7de-d0e05abfc4c9)\n![Screenshot 2025-08-23 at 23 08 25](https://github.com/user-attachments/assets/3b8bc105-f1a4-4c23-84d3-329d9fff0d45)\n![Screenshot 2025-08-23 at 23 08 44](https://github.com/user-attachments/assets/e92de0c7-150c-4b4e-bc14-29630ab3e0e6)\n![Screenshot 2025-08-23 at 23 09 00](https://github.com/user-attachments/assets/b1702db5-8fab-4191-8cd4-01caaa3269a6)\n![Screenshot 2025-08-23 at 23 09 21](https://github.com/user-attachments/assets/0b6b151f-c5aa-49cb-a657-b93e4371856c)\n\n---\n\nDev-Bug-Coder-Blog is a full-stack blog platform where developers can document coding errors, share fixes, and learn from each other. It features authentication, real-time notifications, an admin dashboard, and a modern, responsive UI.\n\n- **Live-Demo:** [https://dev-bug-coder-blog.vercel.app/](https://dev-bug-coder-blog.vercel.app/)\n\n---\n\n## 📚 Table of Contents\n\n1. [Project Summary](#project-summary)\n2. [Features](#features)\n3. [Tech Stack](#tech-stack)\n4. [Project Structure](#project-structure)\n5. [How to Run Locally](#how-to-run-locally)\n6. [Deployment](#deployment)\n7. [Environment Variables](#environment-variables)\n8. [API \u0026 Backend](#api--backend)\n9. [Frontend Components](#frontend-components)\n10. [How to Reuse Components](#how-to-reuse-components)\n11. [Keywords](#keywords)\n12. [Conclusion](#conclusion)\n\n---\n\n## Project Summary\n\nDev-Bug-Coder-Blog is a modern, full-stack developer blog platform for sharing real-world coding errors and their solutions. It empowers developers to post, discuss, and resolve bugs, fostering a collaborative learning environment. The project is designed for both practical use and as a teaching resource for full-stack development with React, Node.js, Express, Prisma (MongoDB), and Tailwind CSS.\n\n---\n\n## Features\n\n- Post coding errors, solutions, code snippets, and screenshots\n- Like, mark as helpful, comment, and report posts\n- Save posts for later\n- User authentication (JWT-based)\n- Profile management (edit profile, avatar upload)\n- Admin dashboard for reports\n- Real-time notifications (likes, comments, helpful, reports)\n- Responsive, modern UI (Tailwind CSS)\n- Full REST API backend (Express, Prisma, MongoDB)\n- File uploads (Multer)\n- Secure routes and error handling\n\n---\n\n## Tech Stack\n\n**Frontend:**\n\n- React 18 (TypeScript)\n- Vite\n- Tailwind CSS\n- Axios\n- React Router DOM\n\n**Backend:**\n\n- Node.js\n- Express.js\n- Prisma ORM (MongoDB)\n- Multer (file uploads)\n- JWT (authentication)\n- Nodemailer (email)\n\n**Dev Tools:**\n\n- ESLint, Prettier\n- TypeScript\n- Vercel (frontend deploy)\n- Render (backend deploy)\n\n---\n\n## Project Structure\n\n```bash\ndev-bug-blog/\n├── src/\n│   ├── components/         # Reusable React components (PostCard, Sidebar, Navbar, LoadingSpinner, etc.)\n│   ├── pages/              # Main app pages (Posts, PostDetails, CreatePost, EditProfile, AdminReports, etc.)\n│   ├── api.ts              # Axios API logic and helpers\n│   ├── types/              # TypeScript types\n│   └── ...\n├── routes/                 # Express backend routes (posts, comments, users, auth, reports, notifications)\n├── middleware/             # Express middleware (authenticate)\n├── prisma/\n│   └── schema.prisma       # Prisma schema (MongoDB models)\n├── public/                 # Static assets\n├── uploads/                # Uploaded images/screenshots\n├── server.js               # Express server entrypoint\n├── package.json            # Project config and scripts\n├── tailwind.config.js      # Tailwind CSS config\n├── vite.config.ts          # Vite config\n└── ...\n```\n\n---\n\n## How to Run Locally\n\n1. **Clone the repository:**\n\n```sh\ngit clone https://github.com/arnobt78/dev-bug-blog.git\ncd dev-bug-blog\n```\n\n2. **Install dependencies:**\n\n```sh\nnpm install\n```\n\n3. **Set up environment variables:**\n\n- Copy `.env.example` to `.env` and fill in your MongoDB URI, JWT secret, etc.\n\n4. **Generate Prisma client:**\n\n```sh\nnpx prisma generate\n```\n\n5. **Start the backend server:**\n\n```sh\nnpm run dev:backend\n```\n\n6. **Start the frontend (Vite):**\n\n```sh\nnpm run dev:frontend\n```\n\n7. **Visit the app:**\n\n- Frontend: [http://localhost:5173](http://localhost:5173)\n- Backend API: [http://localhost:5000/api](http://localhost:5000/api)\n\n---\n\n## Deployment\n\n- **Frontend:** Deploy to Vercel (recommended)\n- **Backend:** Deploy to Render or any Node.js host\n- **Environment:** Set all required environment variables in your deploy dashboard\n\n---\n\n## Environment Variables\n\nCreate a `.env` file in the root with:\n\n```env\n\n# Database Configuration\nDATABASE_URL=\"your_mongodb_uri\"\n\n# JWT Configuration\nJWT_SECRET=\"your_jwt_secret\"\n\n# Admin Configuration\nADMIN_EMAIL=your_admin_email@example.com\nVITE_ADMIN_EMAIL=your_admin_email@example.com\n\n# Email Configuration for SMTP Authentication\nEMAIL_USER=your_email@example.com\nEMAIL_PASS=your_email_password_or_generated_app_password\n\n# Local Development URLs\nPORT=5001\nFRONTEND_URL=http://localhost:5173\nBACKEND_URL=http://localhost:5001\nVITE_FRONTEND_URL=http://localhost:5173\nVITE_BACKEND_URL=http://localhost:5001\nNODE_ENV=development\n\n```\n\n---\n\n## API \u0026 Backend\n\n### Main REST Endpoints (see `/routes/`)\n\n- `GET /api/posts` — List all posts\n- `GET /api/posts/:id` — Get post details\n- `POST /api/posts` — Create post (auth, file upload)\n- `PUT /api/posts/:id` — Edit post (auth)\n- `DELETE /api/posts/:id` — Delete post (auth)\n- `POST /api/posts/:id/like` — Toggle like (auth)\n- `POST /api/posts/:id/helpful` — Toggle helpful (auth)\n- `POST /api/posts/:id/save` — Save post (auth)\n- `POST /api/posts/:id/unsave` — Unsave post (auth)\n- `POST /api/comments/post/:postId` — Add comment (auth)\n- `PUT /api/comments/:id` — Edit comment (auth)\n- `DELETE /api/comments/:id` — Delete comment (auth)\n- `POST /api/comments/:id/like` — Toggle comment like (auth)\n- `POST /api/comments/:id/helpful` — Toggle comment helpful (auth)\n- `GET /api/users/me/saved-posts` — Get saved posts (auth)\n- `GET /api/notifications` — Get notifications (auth)\n- `POST /api/notifications/mark-all-read` — Mark all notifications as read (auth)\n- `POST /api/reports` — Report post (auth)\n\n### Prisma Schema (see `/prisma/schema.prisma`)\n\n- **User, Post, Comment, SavedPost, Like, Helpful, Report, Notification** models\n- MongoDB as the database\n- Relations: users \u003c-\u003e posts \u003c-\u003e comments, likes, helpful, saved, reports, notifications\n\n---\n\n## Frontend Components\n\nAll UI is built from reusable React components in `/src/components/`:\n\n- `PostCard` — Displays a post with actions (like, helpful, save, report, etc.)\n- `Sidebar` — Tag selector, recent posts, popular topics\n- `Navbar` — Top navigation, search, user menu, notifications\n- `CommentSection` — Nested comments, add/edit/delete, like/helpful\n- `LoadingSpinner` — Animated loading overlay (customizable text)\n- `TagSelector`, `PostHeader`, `PostStats`, `PostActionsBar`, `PostDropdownMenu`, etc.\n\n### Example: Using the LoadingSpinner\n\n```tsx\nimport LoadingSpinner from \"./components/LoadingSpinner\";\n\u003cLoadingSpinner text=\"Loading...\" /\u003e;\n```\n\n---\n\n## How to Reuse Components\n\n1. **Copy any component** from `/src/components/` into your own React project\n2. **Import and use** as shown in the example above\n3. **API logic** in `/src/api.ts` is reusable for any REST backend\n4. **TypeScript types** in `/src/types/` help with type safety\n5. **Follow the folder structure** for scalable, maintainable apps\n\n---\n\n## Keywords\n\n`developer blog`, `coding errors`, `bug fixes`, `React`, `Node.js`, `MongoDB`, `Prisma`, `Express`, `Vite`, `Tailwind CSS`, `JWT`, `REST API`, `full stack`, `community`, `notifications`, `admin`, `report`, `save post`, `comment`, `like`, `helpful`, `tag`, `search`, `responsive`, `modern`, `open source`\n\n---\n\n## Conclusion\n\nThis project is a complete, real-world example of a modern full-stack application. It’s designed for both practical use and as a learning resource. Study the code, experiment, and extend it for your own needs. Every feature is built with reusability, scalability, and developer experience in mind.\n\n---\n\n## Happy Coding! 🎉\n\nFeel free to use this project repository and extend this project further!\n\nIf you have any questions or want to share your work, reach out via GitHub or my portfolio at [https://arnob-mahmud.vercel.app/](https://arnob-mahmud.vercel.app/).\n\n**Enjoy building and learning!** 🚀\n\nThank you! 😊\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Fdev-bug-coder-blog--react-fullstack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnobt78%2Fdev-bug-coder-blog--react-fullstack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Fdev-bug-coder-blog--react-fullstack/lists"}