Full name

Ndi Lionel Afanyu

Short biography

I am a 3+ years experienced Full Stack Developer with more than three years of experience who can craft scalable, dynamic applications. My skills include expertise in React.js, TypeScript, Next.js, and Tailwind CSS for the front end and Node.js, Python, and Laravel for the back end. I hold a record of delivering RESTful and GraphQL APIs, database performance optimization, and secure, responsive user interface deployment. My experience varies from freelance to volunteer work, and I'm eager to create smooth user experiences and efficient computer systems.

Timezone

UTC+1

Contact details

emai:afanyulionel@gmail.com, linkedin:https://linkedin.com/in/ndilionel

Programming experience

I have built numerous web and mobile applications using the latest frameworks. Some of the primary experiences are:

• Creating RESTful and GraphQL APIs using Node.js.
• Creating friendly frontends using React.js, Next.js, and Tailwind CSS.
• Refactored database queries and schemas for high data volume systems.
• Implementing performance optimization and security features across projects

Version control

Yes

Contributions to Project

Project

A React-based dashboard for creating customized banners with various styling options, built with Vite and TypeScript.

!Image

Features

• Style Selection: Choose between image or color backgrounds
• Image Upload: Drag-and-drop or click-to-upload functionality
• Overlay Controls: Adjust opacity and background color
• Text Customization:
  • Title and description inputs
  • Real-time character counters
  • Typing indicators
• Preset Management: Pre-configured style combinations
• Responsive Design: Mobile-friendly interface

source code: Frontend Microtask

Goals

Abstract

Central Notice is a tool that enables Wikimedia communities to effectively advertise events, activities, and other content using easily tailored banners. The project aims to audit existing design and best practices and modernize or remake the current web application. The outcome will be a responsive, intuitive interface with a library of tailorable banner templates that meet strict design and content standards without disrupting the Wikipedia reader experience.

Motivation

Wikimedia relies on clear, engaging communication to inform its global community. The existing Central Notice system, while feature-rich, is in need of an innovative solution that balances endless design customization with the consistency that Wikimedia's visual and accessibility standards require. This project is motivated by the wish to simplify banner creation, ensuring that every design adheres to best practices while enhancing usability and responsiveness.

• 1. Benefits to the Community
• Improved Communication: By providing a modern, interactive banner-creation tool, Wikimedia communities are able to deploy quickly timely, effective announcements.
• Coherent Design: Standardized yet customizable approach helps to maintain a professional look and feel between disparate banners, enhancing the Wikimedia brand and ensuring adherence to accessibility standards.
• Enhanced Usability: Re-engineering the web application will make the banner creation process easier, allowing all contributors, irrespective of technical expertise, to create effective and visually appealing banners.
• Community Involvement: Open-source development allows for community participation in the development process, so the tool can keep up with user feedback and cater to the diverse needs of Wikimedia users.

• 1. Personal Objectives
• Technical Growth: Learn new web technologies like CSS, HTML, and JavaScript, along with responsive design and UX testing.
• Design Insight: Learn how to abstract and apply best design principles from existing Central Notice banners to create an application that is not only aesthetically pleasing but also functional.
• User-Centered Development: Become skilled at testing and evaluating user experience so that the final product is usable and easy to access for a broad base of users.
• Community Impact: Have a meaningful impact on a project that directly affects how Wikimedia communities communicate and engage with their readers.

• 1. Deliverables
• Modernized Web Application: A revamped or rebuilt web application containing a collection of customizable banner templates so that it aligns with Wikimedia's content and design principles.
• Responsive and Accessible Design: Use of best practices in responsive design and compliance with W3C accessibility guidelines, ensuring the banners are usable on any device and accessible to all.
• UX Testing and Documentation: Comprehensive testing of user experience for the banner templates and the web app overall, with complete documentation covering design decisions, user guidelines, and technical specifications.
• Open-Source Repository: A well-documented, version-controlled codebase open to the public for contribution, fostering openness and community improvement.

---

• 1. Recommendations
• Iterative User Testing: Conduct a cycle of continuous user testing sessions with Wikimedia community members to gather feedback on usability and design, making the tool functional and easy to use.
• Scalability Roadmap: Develop a roadmap for adding more banner templates and features, such as advanced customization options, analytics, and integration with existing Wikimedia systems.
• Coordination with Design Teams: Work in coordination with Wikimedia design teams on a continuous basis to refine the appearance and feel as well as the utility of the tool to maintain it in accordance with the evolving Wikimedia brand.
• Accessibility Audits: Conduct rigorous accessibility audits periodically to maintain ongoing compliance with W3C standards and to serve all users.
• Documentation and Training Materials: Enhance the README and accompanying documentation with step-by-step tutorials and guides, facilitating easier onboarding and encouraging broader community participation and contributions.
• Open-Source Community Engagement: Build an active community around the project by sponsoring regular code reviews, open discussions, and contribution sprints, making the project more robust and more broadly adopted. ---

This project not only moves a vital communications tool for Wikimedia into the present but is also a learning experience in frontend development, UX design, and open-source collaboration.

Why This Project?

This project is much more than a technical redesign—it is a transformative initiative with deep and far-reaching implications for both the Wikimedia community and my own growth as a developer and contributor.

Impact on the Community

• Improved Communication:

Central Notice is a platform for community announcements, events, and calls to action. By refining the tool, the project ensures that significant messages are conveyed to users in a clear, visually appealing, and consistent manner. This leads to better engagement, faster dissemination of information, and a more unified community experience.

• Design Consistency and Accessibility:

The new app is built on accessibility best practices and responsive design (following W3C guidelines) so that banners are not only visually engaging but also accessible to every member of the community, including those with disabilities. This emphasis on accessibility is part of Wikimedia's mission of inclusivity and universal access to information.

• Streamlined Workflow:

The project simplifies the design, updating, and maintenance of banners. The simplification reduces technical barriers, enabling contributors with varying levels of technical expertise to produce effective and consistent communications. It enables the community to react quickly to breaking events or announcements without being hampered by complex processes.

• Open-Source Collaboration:

Hosting the project as an open-source initiative under the Wikimedia umbrella fosters active contribution from the global Wikimedia community. Continued contribution, feedback, and shared learning foster the tool's evolution in a collaborative spirit, propelling its functionality while enhancing Wikimedia's culture of openness and collaborative improvement.

• Scalability and Future-Proofing:

By establishing a new, modular foundation, the project opens the door to future innovation. It delivers a platform that is extensible to support future enhancements—such as advanced customization, analytics, and integration with other Wikimedia systems—that will enable the tool to continue meeting the changing needs of the community.

Impact on Me as an Individual

• Technical Mastery and Growth:

Working on this project has compelled me to advance my skills in modern web technologies like React, TypeScript, and Vite. By solving real-world problems—from responsive design to accessibility and UX testing—I have honed my skills in creating robust, user-friendly applications. This project has been an excellent learning experience, bridging theoretical knowledge with real-world practice.

• Enhanced Problem-Solving and Adaptability:

The need to balance design flexibility with strict community standards has encouraged innovative problem-solving. This has reinforced my ability to adapt to changing requirements and to develop solutions that are not just aesthetically pleasing but also functional, a key skill in today's fast-paced tech world.

• Community Engagement and Collaboration:

Working with Wikimedia mentors, designers, and members exposed me to the potential of collaborative development. The project has been a unique opportunity to grow in an open-source environment where feedback and collaboration are everything, making me even more appreciative of how collective effort can bring about phenomenal innovation in digital communication tools.

• Contribution to a Greater Cause:

Aside from the technical lessons, this project has allowed me to develop an initiative that has immediate value to a vast, global community. Knowing that my work is contributing to enhancing how Wikimedia shares valuable information gives a sense of pride and purpose. It reinforces my motivation to leverage technology for positive social impact.

• Portfolio and Professional Development:

Successfully modernizing a key communication tool such as Central Notice brings significant value to my portfolio. It showcases my capability to lead and deliver high-impact projects, positioning me as a more competitive candidate for future opportunities in the tech sector and open-source communities as well.

---

In effect, this project bridges the gap between technical innovation and community empowerment. It not only transforms the manner in which Wikimedia interacts with its audience but also stimulates my own development as a developer committed to doing good.

Qualifications

I am especially qualified to perform this project due to my extensive web development, open-source background, and user-focused design experience. My front-end technology expertise and experience in building scalable and accessible web applications are complementary to the requirements of maintaining the Central Notice tool.

• 1. Technical Skills and Experience
• Frontend Development: I have three years of experience with TypeScript, JavaScript, and React, as well as frameworks like Next.js and utilities like Vite, which I am utilizing within my implementation.
• Responsive Design & UI/UX: I have a rich background in designing responsive, user-friendly applications that are flawlessly adaptable on devices, keeping accessibility and usability at the forefront.
• CSS & Accessibility Standards: I am familiar with modern styling techniques using CSS, TailwindCSS, and SCSS, and I am also aware of W3C accessibility guidelines, which are crucial while making Wikimedia banners accessible to all users.
• Testing & Performance Optimization: I am aware of unit testing libraries (Jest, React Testing Library) and performance optimizations to improve usability.
• Open Source & Version Control: I have worked proactively with open-source projects, kept and contributed repositories with GitHub, Git, and CI/CD pipelines.

• 1. Relevant Projects and Experience
• Template Repository for Scalable Frontend Projects – Created an reusable front-end boilerplate using Redux, React, i18n, and TailwindCSS, which is comparable to what this project requires.
• HNG Internship Challenges – Successfully completed a number of technical challenges, including backend API development and CI/CD setup, which confirmed my ability to solve actual web development scenarios.
• Smart Irrigation System (University Project) – Developed a project using AI-driven analytics and data visualization, which confirmed my ability to develop user-oriented applications with a focus on usability and functionality.

By committing to these projects, I have gained the skills to build user-friendly interfaces, enhance performance, and make them accessible—skills which are immediately transferable to the Central Notice project.
ents during the Outreachy duration, guaranteeing my availability and steady commitment to providing a high-quality, effective solution.

Commitment

I am fully committed to contributing meaningfully to this project and will allocate 20 hours per week to ensure steady progress. My schedule allows for deep focus on development, testing, and engaging with mentors and the Wikimedia community.

• 1. Time Allocation:
• Before Outreachy (Pre-Internship Phase):
• 10-15 hours a week learning the Central Notice system, contributing early on, and honing my grasp of Wikimedia's design ethos.
• During the Internship:
  • 20 hours a week, spread between development, community engagement, UX testing, and documentation.
  • Active involvement in discussions, feedback loops, and iteration on the basis of community requirements.
• Post Outreachy:
• Ongoing contributions, bug fixes, and enhancements after the internship duration to maintain long-term maintainability.
  • Helping new contributors with onboarding and familiarization with the system.

I have no conflicting commitm

Schedule

Timeline

• 1. Community Bonding Period (Weeks 1-3)
• Familiarize yourself with the Wikimedia community, communication channels, and contribution workflows.
• Study the existing Central Notice banners and their best practices.
• Set up the local development environment and familiarize yourself with the existing project structure.
• Discuss the finalized implementation plan with mentors.
• Create wireframes and mockups for the redesigned banner tool.
• Identify key accessibility requirements for different Wikimedia communities.

---

• 1. Week 1
• Implement the project structure using React, TypeScript, and Vite.
• Set up state management and routing.
• Create the initial UI layout for the interactive banner editor.
• Define accessibility and responsive design goals.
• Collect community input on planned UI elements.

• 1. Week 2
• Implement banner template picking feature.
• Implement UI for editable banner parts (text, background, images).
• Incorporate real-time preview feature for instant feedback.
• Implement unit testing and snapshot testing for main components.
• Chronicle development and solicit feedback at this stage.

• 1. Week 3
• Offer extensive styling possibilities (opacity, overlays, font choice).
• Ensure all the banner components are W3C accessibility standards compliant.
• Add save and load banner presets functionality.
• Conduct usability testing for the initial cut of the interface.

---

• 1. Week 4
• Create dynamic banner customization logic using JavaScript.
• Refine user interactions for a seamless experience.
• Implement validation for text input fields (character limits, preview updates).
• Review and test responsive design across different devices.
• Engage the community for additional input.

• 1. Week 5
• Optimize performance and improve image upload handling.
• Work on error handling for banner editing.
• Refine UI elements based on user feedback.
• Improve keyboard navigation and screen reader compatibility.

---

• 1. Week 6 (Midterm Evaluation)
• Ensure core functionalities are complete and stable.
• Submit progress update and demo to mentors.
• Make improvements based on midterm feedback.

---

• 1. Week 7
• Implement export/import functionality for banner templates.
• Continue improving accessibility and testing with different assistive technologies.
• Work on improving localization support (multi-language support).

• 1. Week 8
• Conduct community testing and gather additional feedback.
• Optimize banner rendering and UI performance.
• Refine UI animations and interactions.

• 1. Week 9
• Conduct another round of UX testing and make necessary refinements.
• Work on integrating better error-handling mechanisms.
• Ensure seamless user experience for both advanced and beginner users.

• 1. Week 10
• Work on the final polish for UI/UX.
• Write detailed user documentation.
• Finalize test cases and conduct extensive testing.

---

• 1. Week 11 (Code Freeze Begins)
• Final debugging and improvements.
• Ensure all features work as expected.
• Perform final accessibility and performance testing.

• 1. Week 12
• Author final project documentation and create a detailed report.
• Create a walkthrough or video demonstration of the system.
• Perform final mentor review and implement any last-minute enhancements.

---

• 1. Final Week
• Present the final project.
• Share findings and contributions with the Wikimedia community.
• Finish any outstanding documentation.
• Talk about post-Outreachy contributions and long-term maintenance strategies.