The MWECAU ICT Club Portfolio Website is a modern Flask web application that serves as the official online presence for the ICT Club at Mwenge Catholic University (MWECAU) in Tanzania. The website showcases the club's projects, team members, mission, and provides a platform for prospective members to learn about and contact the club. Built with a focus on user experience and responsive design, it demonstrates the technical capabilities of the club members while serving practical communication and promotional purposes.
Preferred communication style: Simple, everyday language.
The frontend follows a template-based architecture using Flask's Jinja2 templating engine. The design implements a modern, responsive layout with:
- Base Template Pattern: All pages extend from a centralized
base.htmltemplate ensuring consistent navigation, styling, and structure - Component-Based CSS: Modular CSS architecture with custom properties for theming and reusable components
- Progressive Enhancement: Core functionality works without JavaScript, with enhanced features added through progressive enhancement
- Responsive Design: Mobile-first approach using Bootstrap 5 framework with custom CSS overrides
The backend uses a simple but effective Flask application structure:
- Single Application Instance: Centralized Flask app configuration in
app.pywith environment-based settings - Route Separation: Clean separation of concerns with routes defined in
routes.pyseparate from app configuration - Template Rendering: Server-side rendering using Flask's template system for all user-facing pages
- Error Handling: Basic error handling with user feedback through Flask's flash messaging system
The application includes integrated email functionality for contact form submissions:
- Flask-Mail Integration: SMTP email sending capability configured for Gmail by default
- Environment Configuration: Email credentials and settings managed through environment variables
- Contact Form Processing: Form submissions are validated and sent via email to the club's official address
Static assets are organized using Flask's built-in static file serving:
- CSS Architecture: Custom CSS with CSS custom properties for theming and component styling
- JavaScript Modules: Modular JavaScript with separate files for animations and main functionality
- External Dependencies: CDN-based delivery for Bootstrap, Font Awesome, and Google Fonts for performance
Basic security measures are implemented:
- Session Management: Configurable session secret key with development/production environment support
- Proxy Support: ProxyFix middleware for deployment behind reverse proxies
- Form Validation: Server-side validation for contact form submissions
- Environment Variables: Sensitive configuration stored in environment variables
- Bootstrap 5.3.0: Primary CSS framework for responsive design and component styling
- Font Awesome 6.4.0: Icon library for user interface elements
- Google Fonts: Inter and Space Grotesk font families for typography
- AOS (Animate On Scroll): Animation library for scroll-triggered animations
- Flask: Core web framework for Python-based web application
- Flask-Mail: Email integration library for contact form functionality
- Werkzeug: WSGI utilities including ProxyFix middleware for deployment
- SMTP Integration: Configured for Gmail SMTP service (smtp.gmail.com:587) with TLS encryption
- Configurable Email Provider: Email server settings can be modified through environment variables
- Python Runtime: Application designed for Python 3.x environment
- Environment Variables: Configuration through environment variables for production deployment
- Static File Serving: Utilizes Flask's development server for static assets in development mode
- CDN Delivery: External libraries served via CDN for improved loading times
- Font Preloading: Preconnect directives for external font resources
- Modular JavaScript: Separate files for different functionality to enable selective loading