{"id":28929450,"url":"https://github.com/lazarusrolando/Tech-Blogger-Developer-Blog","last_synced_at":"2026-04-18T01:01:30.191Z","repository":{"id":300021689,"uuid":"1003049233","full_name":"lazarusrolando/Tech-Blogger-Developer-Blog","owner":"lazarusrolando","description":"Discover the Future of Tech - Join our community of innovators, developers, and tech enthusiasts. Get access to cutting-edge insights, tutorials, and expert knowledge.","archived":false,"fork":false,"pushed_at":"2025-07-12T13:46:44.000Z","size":4006,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-03T20:51:03.226Z","etag":null,"topics":["blog","blogging","css3","js","python3","pythonsqlite","reactjs","sqlite3"],"latest_commit_sha":null,"homepage":"https://lr19-boy.github.io/Tech-Blogger-Developer-Blog/","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/lazarusrolando.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-16T14:42:06.000Z","updated_at":"2025-07-15T04:13:10.000Z","dependencies_parsed_at":"2025-08-03T20:51:05.022Z","dependency_job_id":"c479b3a2-dffb-4bd2-af25-51c64fbb630c","html_url":"https://github.com/lazarusrolando/Tech-Blogger-Developer-Blog","commit_stats":null,"previous_names":["lr19-boy/react-project","lazarusrolando/tech-blogger-developer-blog"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lazarusrolando/Tech-Blogger-Developer-Blog","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lazarusrolando%2FTech-Blogger-Developer-Blog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lazarusrolando%2FTech-Blogger-Developer-Blog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lazarusrolando%2FTech-Blogger-Developer-Blog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lazarusrolando%2FTech-Blogger-Developer-Blog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lazarusrolando","download_url":"https://codeload.github.com/lazarusrolando/Tech-Blogger-Developer-Blog/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lazarusrolando%2FTech-Blogger-Developer-Blog/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31952206,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T00:39:45.007Z","status":"ssl_error","status_checked_at":"2026-04-18T00:39:20.671Z","response_time":62,"last_error":"SSL_read: 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":["blog","blogging","css3","js","python3","pythonsqlite","reactjs","sqlite3"],"created_at":"2025-06-22T14:16:46.702Z","updated_at":"2026-04-18T01:01:30.153Z","avatar_url":"https://github.com/lazarusrolando.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TechBlogger\n\nTechBlogger is a modern, full-stack blogging platform designed for tech enthusiasts, writers, and administrators. It provides a seamless experience for both regular users and admins, featuring user authentication, post management, analytics, and a robust API key system for integrations.\n\n## 🌟 Features\n\n- **User Dashboard**: Personalized dashboard for users to manage their posts, view analytics, and update their profile.\n- **Admin Panel**: Powerful admin interface for managing users, admins, reports, and platform settings.\n- **Role-Based Access Control**: Secure, protected routes for users and admins, with visual alerts and auto-redirects for unauthorized access.\n- **Pricing \u0026 Subscription Tiers**: Multiple plans (Basic, Starter, Professional, Enterprise) with feature comparison and modern pricing UI.\n- **API Key System**: Both users and admins can generate, view, and use API keys for secure API access, with copy/regenerate functionality and usage code snippets.\n- **Authentication**: Secure login system with role-based access control (user/admin).\n- **Post Management**: Create, edit, and delete blog posts. Users see their own posts; admins can manage all users.\n- **Analytics**: Visual charts and stats for both users and admins.\n- **Profile Customization**: Upload avatars, update bio, and manage account settings.\n- **Modern UI/UX**: Animated stats, feature cards, and improved CSS for a beautiful, responsive experience.\n\n## 🛠️ Tech Stack\n\n- **Frontend**: React.js (with Chart.js, Recharts for analytics, Lucide React for icons)\n- **Backend**: Flask (Python) with RESTful API endpoints\n- **Database**: SQLite (default, can be swapped for MySQL)\n- **Styling**: Custom CSS\n\n## 🧩 Architecture Overview\n\n### Front-End (React)\nThe front-end is built with React.js, providing a dynamic and responsive user interface. It features:\n- **User Dashboard**: Allows users to manage posts, view analytics, and update their profile.\n- **Admin Panel**: Enables admins to manage users, admins, reports, and platform settings.\n- **API Key Management**: Both users and admins can view, copy, and regenerate their API keys from the settings tab.\n- **Charts \u0026 Analytics**: Uses Chart.js for visualizing data and statistics.\n- **Custom Styling**: All UI components are styled with custom CSS for a modern look.\n\nThe React app communicates with the backend via RESTful API calls (using `fetch`).\n\n### Back-End (Flask)\nThe backend is powered by Flask (Python), exposing RESTful API endpoints for all core functionalities:\n- **Authentication**: Handles login and role-based access (user/admin).\n- **User \u0026 Admin Management**: CRUD operations for users and admins.\n- **Post Management**: Endpoints for creating, editing, and retrieving blog posts.\n- **API Key Endpoints**: Secure endpoints for generating, retrieving, and updating API keys for both users and admins.\n- **CORS Enabled**: Uses `flask-cors` to allow cross-origin requests from the React frontend.\n\nThe backend validates API keys for protected endpoints, ensuring secure access.\n\n### Database (SQLite)\nThe default database is SQLite, a lightweight file-based database ideal for development and small deployments. It stores:\n- **Users**: User credentials, profile info, and API keys.\n- **Admins**: Admin credentials, roles, and API keys.\n- **Posts**: Blog post content, metadata, and author info.\n- **Reports/Analytics**: Data for generating charts and statistics.\n\nYou can easily swap SQLite for MySQL or PostgreSQL by updating the backend configuration and models.\n\n## 🚀 Getting Started\n\n### Prerequisites\n- Node.js \u0026 npm\n- Python 3.x\n- (Optional) Virtualenv for Python\n\n### 1. Clone the Repository\n```bash\ngit clone \u003crepo-url\u003e\ncd react-example\n```\n\n### 2. Install Frontend Dependencies\n```bash\nnpm install\n```\n\n### 3. Install Backend Dependencies\n```bash\ncd src/components\npip install flask flask-cors\n# Or, if requirements.txt is present:\n# pip install -r requirements.txt\n```\n\n### 4. Run the Backend\n```bash\npython app.py\n# or the relevant backend file\n# Backend runs on http://localhost:5000 by default\n```\n\n### 5. Run the Frontend\n```bash\ncd ../..\nnpm start\n# Frontend runs on http://localhost:3000 by default\n```\n\n### 6. Build for Production\n```bash\nnpm run build\n```\n\n### 7. Run Tests\n```bash\nnpm test\n```\n\nThe app will be available at [http://localhost:3000](http://localhost:3000).\n\n## 🏷️ Pricing \u0026 Subscription Tiers\n\nTechBlogger now offers multiple subscription plans:\n- **Basic**: Free access to public blog posts, community forum, newsletter, and analytics.\n- **Starter**: Adds web development consultation, more posts per month, and email support.\n- **Professional**: Advanced web development, priority support, 1-on-1 calls, and custom project planning.\n- **Enterprise**: Full-scale solutions, unlimited posts, dedicated support, and priority features.\n\nCompare features and choose a plan in the **Services** section of the app.\n\n## 🛡️ Role-Based Access Control\n\n- **Protected Routes**: Only users with the correct role can access user/admin dashboards.\n- **Visual Alerts**: Unauthorized access triggers animated alerts and auto-redirects.\n- **Manual Redirect**: \"Go Now\" button for immediate navigation.\n- **Security**: All role checks are validated on both frontend and backend.\n\n## 🏠 Enhanced Home \u0026 Community Features\n\n- **Animated Stats**: See live stats for readers, articles, authors, and views.\n- **Featured Articles**: Curated list of trending and new articles.\n- **Community Support**: Connect with developers worldwide.\n\n## 🏗️ Code Structure\n\n```\nreact-example/\n├── public/                # Static assets (images, icons, etc.)\n├── src/\n│   ├── components/\n│   │   ├── Admin.js       # Admin dashboard (user/admin management, reports, settings)\n│   │   ├── User.js        # User dashboard (posts, analytics, settings)\n│   │   ├── ...            # Other React components \u0026 backend scripts\n│   ├── App.js             # Main React app\n│   └── index.js           # React entry point\n├── package.json           # Frontend dependencies\n└── ...\n```\n\n## 🔑 API Key System\n\nBoth admins and users have access to a personal API key, which can be used to authenticate requests to protected API endpoints.\n\n- **View API Key**: In the settings tab, users and admins can see their API key.\n- **Copy/Regenerate**: Buttons allow copying or regenerating the key. Regeneration updates the backend.\n- **Example Usage**: Code snippets are provided for Node.js (axios) and Python (requests) to show how to use the API key.\n\n**Sample usage:**\n```js\n// Node.js (axios)\nconst axios = require('axios');\naxios.get('http://localhost:5000/api/protected', {\n  headers: { 'x-api-key': 'YOUR_API_KEY' }\n})\n.then(res =\u003e console.log(res.data));\n```\n```python\n# Python (requests)\nimport requests\nresponse = requests.get(\n    'http://localhost:5000/api/protected',\n    headers={'x-api-key': 'YOUR_API_KEY'}\n)\nprint(response.json())\n```\n\n## 👤 User Experience\n- **Users**: Can manage their posts, view analytics, update their profile, and use their API key for integrations.\n- **Admins**: Have full control over users, admins, reports, and platform settings. Admins can also manage their own API key.\n\n## 📂 Backend API Endpoints (Sample)\n- `/api/users` - Get all users\n- `/api/users/\u003cusername\u003e/apikey` - Get or update a user's API key\n- `/api/admins` - Get all admins\n- `/api/admins/\u003cadmin_id\u003e/apikey` - Get or update an admin's API key\n- `/api/posts/user/\u003cusername\u003e` - Get posts for a user\n- `/auth/user-only` - Authenticate user\n- `/auth/admin` - Authenticate admin\n\n## 📝 Customization\n- Update styles in `*.css` files for your branding.\n- Extend backend endpoints as needed for more features.\n- Swap SQLite for another database if desired.\n\n## 🤝 Contributing\nPull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.\n\n## 📄 License\nMIT \n\n## 🚢 Deployment\n\nYou can deploy the frontend and backend separately. For example:\n\n### Deploying the Backend (Flask) to Heroku\n1. Add a `Procfile`:\n   ```\n   web: python src/components/app.py\n   ```\n2. Commit your code and push to Heroku.\n\n### Deploying the Frontend (React) to Vercel/Netlify\n1. Push your code to GitHub.\n2. Connect your repo to Vercel or Netlify and follow their deployment steps.\n\n\u003e Make sure to update API URLs to use your deployed backend! \n\n## 🙏 Credits\n\n- [React](https://reactjs.org/)\n- [Flask](https://flask.palletsprojects.com/)\n- [Chart.js](https://www.chartjs.org/)\n- [Random User API](https://randomuser.me/) (for demo avatars) \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flazarusrolando%2FTech-Blogger-Developer-Blog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flazarusrolando%2FTech-Blogger-Developer-Blog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flazarusrolando%2FTech-Blogger-Developer-Blog/lists"}