Project Proposal: Frontend Web App for interactive banner design
About Me
My name is Adeleke Vanessa, a passionate Frontend Developer with interest and passion towards Front-End development using HTML, CSS (Tailwind CSS), JavaScript, and React.js and other frameworks to create intuitive, responsive, and visually engaging web applications. My work on the Frontend Web App for interactive banner design is a demonstration of my commitment to simplifying complex workflows through clean, user-friendly interfaces.
Beyond frontend development, I have a foundational understanding of backend concepts, enabling me to appreciate full-stack development. I thrive in collaborative environments and am open to flexible scheduling to ensure seamless teamwork and project success.
Project Overview
The Frontend Web App for interactive banner design is a web-based tool designed to streamline the creation of MediaWiki banners by offering:
✔ Real-time customization with live preview
✔ User-friendly interface for effortless design
✔ Accessibility-focused components
✔ Responsive design for cross-platform compatibility
This tool eliminates the complexities of traditional banner creation, making it accessible to both technical and non-technical users.
Problem Statement
Creating MediaWiki banners currently involves:
❌ Manual coding (HTML/CSS) with no instant feedback
❌ Limited customization options without deep technical knowledge
❌ No centralized tool for quick, dynamic banner generation
The Frontend Web App for interactive banner design solves these challenges by providing:
✅ Drag-and-drop or form-based customization
✅ Live preview for immediate visual feedback
✅ Pre-built templates for rapid deployment
Key Deliverables (Completed & Proposed)
Implemented Features
Current Usage:
Click the link above to download the demo video.
Customize Background:
- Upload an image or choose a solid color
- Adjust banner dimensions using sliders
Add Text:
- Type your text in the input field
- Choose from 40+ fonts
- Customize color, style, and transformations
Add Images:
- Upload images via the upload button
- Drag thumbnails onto the banner
- Right-click to delete unwanted images
Use Drawing Tools:
- Select pen, marker, brush, or eraser
- Adjust stroke width and transparency
- Click "Clear Drawings" to start over
Save Your Design:
- Right-click the banner and select "Save Image As"
- Or use browser screenshot tools
Customization Options
| Feature | Options Available |
|---|---|
| Background | Color picker, Image upload |
| Text | 40+ fonts, 12+ styles, Color picker |
| Banner Dimensions | Width (100–1200px), Height (50–800px), Border radius (0–100px) |
| Drawing Tools | Pen, Marker, Brush, Eraser with adjustable settings |
Future Enhancements
- Advanced Customization: Gradient/texture backgrounds, animated elements.
- AI-Powered Suggestions: Auto-layout and design recommendations.
- Collaboration Mode: Multi-user editing and version control.
- Plugin System: Extend functionality with third-party integrations.
Technical Implementation
| Tech Stack | Purpose |
|---|---|
| React.js (with Hooks) | Dynamic UI with reusable components. |
| Framer Motion | For animations. |
| CSS3 and Tailwind CSS (utility classes) | Utility-first styling for rapid customization. |
| react-icons | For icon library. |
| react-color | For color pickers |
Project Roadmap (13-Week Timeline)
(Aligned with Wikimedia’s development cycles and feedback loops)
| ✅ Weeks | Dates | Goals | Deliverables |
|---|---|---|---|
| Week 1–2 | June 2–13 | - Finalize project roadmap with mentors - Address initial feedback on existing implementation | Technical: - Integrate MediaWiki API for auth/user preferences - Add SVG sanitization (security audit), Community: - Draft user documentation in Wikimedia’s technical style |
| Week 3–4 | June 16–27 | - Implement Wikimedia-specific template presets | Features: - 5+ preset templates (e.g., "Fundraising", "Community Vote") - Template import/export (JSON), Testing: - User tests with 2+ wiki communities |
| Week 5–6 | June 30–July 11 | - Make tool globally accessible | Localization: - Spanish/French translations (priority wikis) - RTL language support, A11y: - Full keyboard navigation - Screen reader testing with NVDA |
| Week 7–8 | July 14–25 | - Optimize for high-traffic wikis | Technical: - Canvas rendering optimizations (20% faster load) - Asset compression (SVGO integration), Documentation: - Video tutorials for non-technical users |
| Week 9–10 | July 28–Aug 8 | - Deploy for real-world use | Deployment: - PAWS/Gadget integration - "Beta" announcement on wikitech-l, Feedback: - Iterate based on 5+ user reports |
| Week 11–12 | Aug 11–22 | - Prepare for long-term maintenance | Code: - Comprehensive Jest tests (80% coverage) - Dockerized deployment setup, Community: - Host Q&A session for maintainers |
| Week 13 | Aug 25–29 | - Ensure project sustainability | Final: - Archival on Wikimedia GitLab - Mentorship wiki page for future contributors |
Why This Project Matters
- Empowers non-coders to create professional banners.
- Saves time for wiki administrators.
- Encourages creativity with flexible design options.
Screenshot: Tap on the link bellow to view a screenshot preview of the Front-end Web-app for Interactive Banner Design.
Interactive Banner Preview
(Attached: Interactive Banner Image.png)
Conclusion:
I’m excited to collaborate with mentors Michelle Horsey, Elliott Eggleston and the Wikimedia community to refine this tool. Let’s make banner creation effortless, creative, and scalable!
Project GitHub Repo: Frentend Web App for Interractive Banner Design
Github profile: @AdelekeVanessa
Design is not just what it looks like—it’s how it works
— Steve Jobs