Ishan Madhusanka
Verified Expert in Engineering
Software Developer
Colombo, Western Province, Sri Lanka
Toptal member since January 8, 2019
Ishan, a technical lead, blends his passion for UI/UX design and user research skills to create visually stunning and functional designs, enhancing user experiences. He's a skilled full-stack developer with a background in computer engineering. Ishan established best practices in CI/CD and contributed to projects from the design/prototype phase, supporting teams across their development stack.
Portfolio
Experience
- Adobe Illustrator - 9 years
- JavaScript - 9 years
- Adobe Photoshop - 9 years
- HTML5 - 8 years
- Adobe Animate - 5 years
- Bootstrap - 5 years
- React - 4 years
- Vue - 3 years
Availability
Preferred Environment
Amazon Web Services (AWS), Docker, Git, Linux
The most amazing...
...project was improving the performance of a distributed report generation microservice from two minutes to four seconds, easily supporting heavier workloads.
Work Experience
Front-end Tech Lead
SPH Media
- Created the foundation for two front-end applications that work with a single back end to support maintainability, given the complexity of the requirements.
- Developed critical custom components, such as the unique scheduler components (with calendars/date pickers), to support the project's custom requirements.
- Customized the Material UI theme to match the style guide based on Figma to ensure reusability and maintainability.
Design and Development Competitor
TopCoder Inc.
- Competed as a designer and developer for the competitions hosted at TopCoder Inc.
- Selected for the onsite finals as one of the top 10 designers worldwide from Design Studio Track at TopCoder Open 2013, held in Washington DC.
- Won eight tracks within the year in competitions related to web application designs, mobile screen designs, icon designs, and print media designs, also placing 2nd and 3rd in several other tracks.
- Created several brand UX guides for new clients.
- Followed existing branding guidelines of clients (such as TopCoder, Hewlett Packard, Salesforce, etc.) in creating their novel web applications.
- Created a great UX with user-friendly layouts and effective usage of white space, finding inspiration from other top designers worldwide.
Front-end UI/UX Designer and Animator
Thropic Inc
- Created the WebGL-based 3D assets based on the client's design feedback.
- Generated mouse-based interactions on the generated artwork to animate the text based on mouse position.
- Optimized lighting and materials to have a balance in trade-offs between quality and performance.
- Developed an example page to showcase the splash screen with the generated 3D text animation.
UX Developer
Dodo Data LLC dba Audantic
- Created a consistent UI framework to be used across multiple web applications based on the UI designs on Figma. The UI framework was built with React, was responsive, and tested with Jest and the React Testing Library.
- Elevated the UX by implementing intuitive micro-interactions on UI components.
- Enabled automated builds for the UI framework to publish npm packages for the patch, minor, and major versions, which other applications can then use by installing the npm package of the required version.
- Integrated the built UI screens with the existing Django-based back-end, replacing the jQuery-based UI screens.
- Enhanced the user experience (UX) by creating a map view for one of the products, enabling users to search for properties inside a free-hand drawn area by integrating with the Google Maps SDK.
- Aimed for a better UX by optimizing the filter/search functionality by moving away from the legacy logic and using Redux for state management.
- Generated artwork and animations for welcome and loading screens to match the existing UI look and feel. Artworks were created mainly with Figma, and the exported SVG images were animated with SVG/CSS and JavaScript as appropriate.
Full-stack Engineer
Railsbank
- Single-handedly developed a production-grade Flutter application to demonstrate the capabilities of Railsbank API, which was used for customer demonstrations and internal testing on user flows.
- Built integrations between the Railsbank core and other banking systems in the US, SG, and AU regions enabling international payments for Railsbank API users.
- Designed and implemented architecture designs for AWS cloud services related to serverless integration infrastructure for the integrations in the AU region.
- Started work at Railsbank as a senior engineer and got promoted internally within the two years to a tech lead and a senior tech lead.
Senior UI/UX Developer
SyscoLABS
- Created custom UI components such as calendars, with React/Moment.js, with micro-interactions, transitions, and options to enable range selections and dual calendars via props to match the look and feel of the new branding guidelines.
- Worked closely with stakeholders and the designers to create a design that would optimize the user experience (UX) while working on the UI component libraries.
- Built a custom chart component using React, Chartist.js, SVG, and plugins to support interactivity on expanding overlapping data points, etc., aligning with the new branding guidelines, which resulted in a better UX.
- Developed a high-performant Excel file generator that generates sorted 10M cells excel files in approximately 4 seconds, which replaced the legacy system, taking around 54 seconds to generate an unsorted file of similar data size.
- Performed proof of concepts for the Excel file-generating service using Python, Node.js, Bash, Go, and Rust for generating Excel files, of which Node.js and Bash solution and the Rust solution were the most promising.
- Implemented UI widgets from scratch for a download manager based on a React front-end application.
- Worked with a team to transform a jQuery and Kendo UI front end to a React-based front end.
- Optimized real-time inputs on the front-end applications by bulking and throttling requests sent to the server reducing the request count by approximately 95%.
Senior UI/UX Developer
Kloudmart.lk
- Conducted user research and designed the playground for no-code app creation within Kloudmart's application, incorporating intuitive user interactions, seamless user flow, and fluid animations and transitions.
- Crafted the initial branding for the site and skillfully themed the front-end user interface to ensure a visually appealing and cohesive design that enhanced the UX.
- Created an advanced application simulator, leveraging Node.js with Express and Socket.io on the back end, to enable real-time app testing for multiple concurrent users.
- Developed an eye-catching HTML5 canvas artwork for the homepage that reacted dynamically to user interactions, further improving the UX.
- Designed custom UI components for editing application data in place of built apps and implemented bespoke loading indicators that perfectly matched the theme and branding of the application.
Designer and Animator
Freelance design projects
- Created HTML5 and Flash advertisements back in the day, with smooth transitions and animations. Made the 2D graphical assets from scratch based on client requirements.
- Designed and revamped websites for clients based on their requirements and delivered them consistently within the project timelines.
- Designed animated artworks and corporate presentations using Adobe Flash.
- Created graphical assets and sprites for 2D to be used for game development.
Experience
Personal Website
https://live.imadhusanka.me/Maptionary
https://maptionary.com/I developed Maptionary, an application built with Vue on the front end, which uses orchestration between multiple services to compile the dataset required to construct a map explaining the input word. The built app uses SVG and Vue components to visualize the word on the front end. My user research skills enabled me to create a dictionary that not only tells users what a word means but shows them what the word means through a dynamic and interactive interface. User behavior visualization tools were integrated with Maptionary to understand how the users interact with the application, enabling me to reduce friction on the user flow.
Vuulr
http://vuulr.com/myPrices.lk
AdEka.lk
myStay.lk
Kloudmart
https://www.youtube.com/watch?v=OLHMablBQ3AHabitto
https://www.habitto.com/The web project is exported as static content. It fetches the dynamic content, such as blog posts, from an external CMS (initially Contentful to be migrated to DatoCMS) using a GraphQL API during the build time. The export content is statically served through a CDN.
Education
Bachelor's Degree in Computer Engineering
University of Peradeniya - Peradeniya, Sri Lanka
Certifications
Fintech
Harvard University VPAL
AWS Solutions Architect Associate
Amazon Web Services Training and Certification
Skills
Libraries/APIs
Node.js, Vue, Socket.IO, React, jQuery, CreateJS, Lodash, Chartist.js, Moment.js, REST APIs, Context API, Vuex, D3.js, Three.js, Leaflet, Highcharts, Chart.js, Backbone.js, Solid, Google Maps SDK
Tools
Git, GitHub, GitHub Pages, Bitbucket, GitLab, Adobe Animate, Adobe Photoshop, Adobe Illustrator, CorelDRAW X6, Gravit Designer, Figma, Vagrant, SourceTree, Adobe After Effects, Adobe Premiere Pro, MQTT, Amazon Elastic Container Service (ECS), MATLAB, Canvas, NGINX, Webpack, React Apollo
Languages
CSS, TypeScript, JavaScript, Python 3, Python, HTML5, Bash, HTML, CSS3, Rust, Go, PHP, Java, C, C#, C++, MDL, Lua, OCaml, SCSS, GraphQL
Frameworks
Express.js, Bootstrap, Jest, Next.js, Tailwind CSS, Redux, Materialize, Bulma, CodeIgniter, Flask, Flutter, Laravel, .NET, AngularJS, Phaser.io, Django, Svelte, Cypress, Material UI
Paradigms
Responsive, Rapid Prototyping, UX Design, UI Design, Responsive Web Design (RWD), Role-based Access Control (RBAC), Functional Programming, Interactive Design
Platforms
Docker, Firebase, Amazon EC2, Android, Universal Windows Platform (UWP), Heroku, Linux, Amazon Web Services (AWS), Meteor, Arduino, AWS Cloud Computing Services, Algolia, Contentful, Google Cloud Platform (GCP)
Storage
MongoDB, Amazon S3 (AWS S3), NoSQL, Cloud Firestore, MySQL, SQLite, PostgreSQL, RethinkDB
Other
Vue Router, SVG Animation, Axios, Operating Systems, Software Architecture, Data Structures, WebSockets, NATS, Ajax, Storybook, APIs, Data Visualization, Front-end, User Interface (UI), User Experience (UX), Minimum Viable Product (MVP), Front-end Development, CSS Animations, CSS3 Animation, Mobile Web, Firebase Hosting, Semantic UI, Tornado, Artificial Intelligence (AI), Graph Theory, Embedded Systems, UI Animation, Machine Learning, Cloudinary, Vite, Cloud Architecture, Cloud Infrastructure, Cloud Services, Fintech, Single Sign-on (SSO), SVG, Landing Pages, Landing Page Design, Text Animation, 3D, Clean Design, Cloudflare, Apollo, Design, Interactive UI, UI Components, Responsive Design
How to Work with Toptal
Toptal matches you directly with global industry experts from our network in hours—not weeks or months.
Share your needs
Choose your talent
Start your risk-free talent trial
Top talent is in high demand.
Start hiring