TechBlog is a modern, sleek tech-focused website designed to keep users updated on the latest trends, news, and insights in the world of technology. Built with Flask, HTML, CSS, and JavaScript, this site provides a seamless user experience with features like a dynamic event calendar, category filtering, and a responsive layout optimized for all devices.
Check out the live site here:
- Features
- Recent Updates
- Installation
- Admin Access
- Tech Stack
- Contributing
- Code of Conduct
- Issues
- License
- Acknowledgments
- Responsive Design: Fully optimized for all screen sizes, including desktops, tablets, and smartphones.
- Dark/Light Theme Toggle: User-controlled theme preference that persists across sessions.
- Dynamic Event Calendar: Browse and filter tech events by category (Conferences, Workshops, Webinars, Hackathons).
- Blog Post Filtering: Find articles by category with interactive filtering.
- Related Articles: Smart suggestions for related content based on the current post's category.
- Post Navigation: Easy navigation between previous and next posts.
- Comment System: Leave comments on blog posts with persistent storage across sessions.
- Sleek Navigation: Sticky header with a navigation bar that collapses into a mobile-friendly menu.
- Admin Dashboard: Secure administrative interface for content management.
- Content Management: Create, edit, and delete blog posts and events through the admin panel.
- Comment Moderation: Review and manage user comments from the admin interface.
- Added fully responsive admin interface
- Implemented secure session management with Flask
- Enhanced comment system for cross-session persistence
- Fixed mobile navigation issues
- Improved form validation across admin interfaces
To run this project, ensure you have the following installed:
- Python 3.x
- Flask
- Virtual environment (optional but recommended)
git clone https://github.com/mayen007/TechBlog.git
cd TechBlogpython -m venv venv
source venv/bin/activate # On Windows use `venv\Scripts\activate`pip install -r requirements.txtpython populate_db.pyflask runThe application will be available at http://127.0.0.1:5000/.
TechBlog includes a secure admin dashboard for content management. The admin interface allows authorized users to create, edit, and delete blog posts, events, and moderate comments.
- Navigate to
/admin/loginor click the "Admin" link in the page footer. - Enter the default credentials:
- Username:
admin - Password: Contact the repository owner for the default password
- Username:
For security reasons, it's recommended to change the default password:
python generate_password.pyFollow the prompts to create a new secure password hash, then update the ADMIN_PASSWORD variable in admin.py.
- Dashboard: Overview of site content with stats and recent activity
- Post Management: Create, edit, and delete blog posts
- Event Management: Create, edit, and delete upcoming tech events
- Comment Moderation: Review and remove user comments
- Responsive Interface: Fully mobile-responsive admin dashboard with collapsible sidebar
- Secure authentication using Werkzeug's password hashing
- Session-based login system with secure secret key
- Protected routes with login_required decorator
- CSRF protection for all forms
vercel login
vercelCreate a new Web Service on Render, connect your GitHub repository, and set:
- Build Command:
pip install -r requirements.txt - Start Command:
gunicorn app:app
- Flask - Backend web framework.
- SQLAlchemy - ORM for database management.
- Flask-Migrate - Database migrations.
- HTML5 - For structuring content.
- CSS3 - Styled with modern CSS techniques including CSS variables for theming.
- JavaScript (ES6+) - For interactive features like filtering and theme toggling.
- FontAwesome - Icons used throughout the site.
- Gunicorn - WSGI HTTP Server for deployment.
- Vercel & Render - Hosting platforms for deployment.
We welcome contributions to improve TechBlog! To contribute:
-
Fork the repository.
-
Create a new branch for your feature:
git checkout -b feature-name
-
Make your changes and commit:
git commit -m "Add new feature" -
Push to your branch:
git push origin feature-name
-
Open a pull request describing your changes.
- Ensure your code follows best practices and is well-documented.
- Keep pull requests small and focused on one feature/fix at a time.
- Check for open issues before starting new features.
- Be respectful and constructive in discussions.
By contributing to TechBlog, you agree to follow our Code of Conduct to foster an open and welcoming environment.
If you find a bug or have a feature request, please check the issues tab or create a new issue with a clear description.
This project is licensed under the MIT License. See the LICENSE file for details.
- Special thanks to the open-source community for providing inspiration and code snippets.
- Icons provided by FontAwesome.
- High-quality images sourced from Freepik and Unsplash.
- Deployed on Vercel and Render platforms.
TechBlog/
├── app.py # Main application file
├── admin.py # Admin blueprint with authentication and CRUD operations
├── extensions.py # Flask extensions
├── generate_password.py # Tool for creating secure admin passwords
├── models.py # Database models
├── populate_db.py # Database initialization
├── requirements.txt # Dependencies
├── vercel.json # Vercel deployment configuration
├── static/ # Static assets
│ ├── css/ # Stylesheets
│ ├── img/ # Images
│ └── js/ # JavaScript files
└── templates/ # HTML templates
├── admin/ # Admin interface templates
│ ├── layout.html # Admin base template
│ ├── dashboard.html # Admin dashboard
│ ├── login.html # Admin login
│ ├── posts.html # Post management
│ ├── post_form.html # Post editing form
│ ├── events.html # Event management
│ ├── event_form.html # Event editing form
│ └── comments.html # Comment moderation
├── base.html # Base template
├── index.html # Homepage
├── blogs.html # Blog listing
├── post.html # Single blog post
├── events.html # Events listing
├── about.html # About page
└── contact.html # Contact page