Welcome to YoCodex! 🎉 This is a feature-rich, modern blogging website built to empower creators to share their stories, ideas, and expertise with the world. Powered by the MERN stack, YoCodex offers a seamless, scalable, and engaging experience for bloggers and readers alike. 📝✨
YoCodex is a dynamic blogging platform designed for:
- Content Creators: Write, edit, and publish blogs with a rich text editor. 🖋️
- Readers: Discover, like, comment, and share posts. ❤️💬
- Admins: Moderate content and analyze site performance. 🛠️📊
Built with MongoDB, Express.js, React, and Node.js, YoCodex ensures a robust and responsive experience across devices. 🌐
| Feature Category | Description | Emoji |
|---|---|---|
| User Management | Register/login with email or OAuth, customize profiles, follow users. | 👤 |
| Blog Management | Create, edit, publish posts with a WYSIWYG editor, add media, tags, and categories. | 📝 |
| Social Interaction | Like, comment, share posts, and get personalized feeds. | ❤️💬 |
| Search & Discovery | Full-text search, filter by tags/categories, view trending posts. | 🔍 |
| Customization | Choose themes, toggle dark/light mode, personalize profiles. | 🎨 |
| Admin Tools | Moderate content, manage users, view analytics. | 🛡️ |
| SEO & Analytics | Auto-generated sitemaps, meta tags, Google Analytics integration. | 📈 |
| Extras | Multi-language support, RSS feeds, email newsletters, 2FA. | 🌍✉️ |
| Component | Technology | Purpose |
|---|---|---|
| Frontend | React, Tailwind CSS | Responsive, modern UI |
| Backend | Node.js, Express.js | RESTful APIs, server logic |
| Database | MongoDB (BlogSphereDB) | Scalable data storage |
| Media | Cloudinary | Image/video uploads |
| SendGrid | Notifications, newsletters | |
| Analytics | Google Analytics | Traffic tracking |
Follow these steps to set up YoCodex locally. 🖥️
- Node.js (v16 or higher) 🟢
- MongoDB Atlas account 📦
- Cloudinary account for media uploads ☁️
- SendGrid account for emails ✉️
- Git for version control 🗂️
-
Clone the Repository:
git clone https://github.com/your-username/yocodex.git cd yocodex -
Set Up Backend:
- Navigate to
backend/:cd backend npm install - Create a
.envfile inbackend/:MONGO_URI=mongodb+srv://<username>:<password>@cluster0.mongodb.net/ JWT_SECRET=your_jwt_secret CLOUDINARY_URL=your_cloudinary_url SENDGRID_API_KEY=your_sendgrid_key
- Start the backend:
npm start
- Navigate to
-
Set Up Frontend:
- Navigate to
frontend/:cd frontend npm install - Start the frontend:
npm start
- Navigate to
-
Access YoCodex:
- Backend:
http://localhost:5000 - Frontend:
http://localhost:3000
- Backend:
Here’s how YoCodex is organized for clarity and scalability. 📚
yocodex/
├── backend/ # Backend codebase 🛠️
│ ├── config/ # Configuration files ⚙️
│ │ ├── database.js # MongoDB setup
│ │ ├── cloudinary.js # Cloudinary config
│ │ ├── sendgrid.js # SendGrid config
│ │ └── env.js # Environment variables
│ ├── models/ # MongoDB schemas 📋
│ │ ├── User.js # User data
│ │ ├── Post.js # Blog posts
│ │ ├── Comment.js # Comments
│ │ ├── Category.js # Categories
│ │ ├── Tag.js # Tags
│ │ └── Notification.js # Notifications
│ ├── routes/ # API routes 🌐
│ │ ├── auth.js # Authentication
│ │ ├── posts.js # Post CRUD
│ │ ├── comments.js # Comments
│ │ ├── users.js # User profiles
│ │ ├── search.js # Search
│ │ └── admin.js # Admin tools
│ ├── middleware/ # Middleware functions 🔒
│ │ ├── auth.js # JWT verification
│ │ ├── admin.js # Admin access
│ │ ├── error.js # Error handling
│ │ └── upload.js # Media uploads
│ ├── controllers/ # Business logic 🧠
│ │ ├── authController.js # Auth logic
│ │ ├── postController.js # Post logic
│ │ ├── commentController.js # Comment logic
│ │ ├── userController.js # User logic
│ │ ├── searchController.js # Search logic
│ │ └── adminController.js # Admin logic
│ ├── services/ # Reusable services 🛠️
│ │ ├── notification.js # Notifications
│ │ ├── email.js # Email service
│ │ └── seo.js # SEO tools
│ ├── utils/ # Utility functions 🧰
│ │ ├── logger.js # Logging
│ │ ├── validator.js # Input validation
│ │ └── helpers.js # Helpers
│ ├── app.js # Express setup
│ └── server.js # Server entry
├── frontend/ # Frontend codebase 🎨
│ ├── public/ # Static assets
│ │ ├── index.html # HTML entry
│ │ └── favicon.ico # Favicon
│ ├── src/ # React source
│ │ ├── components/ # Reusable components
│ │ │ ├── PostEditor.js # WYSIWYG editor
│ │ │ ├── PostCard.js # Post preview
│ │ │ ├── Comment.js # Comment UI
│ │ │ ├── Navbar.js # Navigation
│ │ │ └── ThemeToggle.js # Theme switch
│ │ ├── pages/ # Page components
│ │ │ ├── Home.js # Homepage
│ │ │ ├── Post.js # Single post
│ │ │ ├── Profile.js # User profile
│ │ │ ├── Search.js # Search results
│ │ │ └── Admin.js # Admin dashboard
│ │ ├── hooks/ # Custom hooks
│ │ │ ├── useAuth.js # Auth hook
│ │ │ └── usePosts.js # Post fetching
│ │ ├── context/ # React context
│ │ │ └── ThemeContext.js # Theme context
│ │ ├── assets/ # Images, styles
│ │ ├── App.js # Main app
│ │ └── index.js # React entry
│ ├── package.json # Frontend deps
│ └── tailwind.config.js # Tailwind config
├── tests/ # Test suites 🧪
│ ├── unit/ # Unit tests
│ ├── integration/ # API tests
│ └── e2e/ # End-to-end tests
├── docs/ # Documentation 📖
│ ├── api.md # API docs
│ └── setup.md # Setup guide
├── .env # Env variables
├── .gitignore # Git ignore
├── README.md # This file 😊
└── package.json # Backend deps
YoCodex is built in phases to ensure a smooth development process. 🚧
| Phase | Duration | Tasks | Tools |
|---|---|---|---|
| Foundation | 1-2 months | Backend setup, user auth, basic post CRUD, simple React UI | MongoDB Atlas, Express, React, Vercel |
| Core Features | 2-3 months | Rich text editor, media uploads, social features, basic search | Cloudinary, Quill, MongoDB |
| Advanced Features | 2-3 months | Admin panel, notifications, SEO, analytics, themes | Socket.IO, Chart.js, Google Analytics |
| Polish & Scale | 1-2 months | Multi-language, dark mode, bookmarks, newsletters, optimization | i18next, SendGrid, Lighthouse |
| Deployment | Ongoing | Deploy to Heroku/Vercel, CI/CD, monitoring, updates | GitHub Actions, New Relic |
We welcome contributions to YoCodex! 🙌 Follow these steps:
- Fork the repository. 🍴
- Create a feature branch (
git checkout -b feature/YourFeature). 🌿 - Commit changes (
git commit -m 'Add YourFeature'). 💾 - Push to the branch (
git push origin feature/YourFeature). 🚀 - Open a Pull Request. 📬
Check docs/setup.md for detailed setup instructions. 📖
YoCodex prioritizes security and compliance:
- JWT for secure authentication 🔐
- bcrypt for password encryption 🛡️
- GDPR/CCPA compliance for data privacy 📜
- WCAG 2.1 for accessibility ♿
Got questions or ideas? Reach out! 📧
- Email: [email protected]
- GitHub Issues: Create an issue in this repo 🐛
- MERN Stack for powering YoCodex 💻
- Tailwind CSS for sleek styling 🎨
- Cloudinary & SendGrid for media and emails ☁️✉️
- You, for exploring YoCodex! 🙌
Let’s build the future of blogging together! 🚀