Ishan Madhusanka, Developer in Colombo, Western Province, Sri Lanka
Ishan is available for hire
Hire Ishan

Ishan Madhusanka

Verified Expert  in Engineering

Bio

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

SPH Media
Next.js, Material UI, React, User Interface (UI), User Experience (UX)...
TopCoder Inc.
Adobe Illustrator, Adobe Photoshop, CSS, Node.js, React, JavaScript, TypeScript...
Thropic Inc
JavaScript, CSS, HTML, User Interface (UI), Front-end, Landing Pages...

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

Part-time

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

2023 - PRESENT
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.
Technologies: Next.js, Material UI, React, User Interface (UI), User Experience (UX), UI Components, Responsive Design, CSS3 Animation, UI Animation, Responsive Web Design (RWD), Tailwind CSS, Context API, Redux, Role-based Access Control (RBAC)

Design and Development Competitor

2009 - PRESENT
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.
Technologies: Adobe Illustrator, Adobe Photoshop, CSS, Node.js, React, JavaScript, TypeScript, jQuery, Data Visualization, User Experience (UX), CSS3, UX Design, UI Design, Design, UI Animation, Responsive Web Design (RWD)

Front-end UI/UX Designer and Animator

2022 - 2022
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.
Technologies: JavaScript, CSS, HTML, User Interface (UI), Front-end, Landing Pages, Landing Page Design, Three.js, TypeScript, Text Animation, 3D, Clean Design, CSS3, Front-end Development, UX Design, UI Design, Design, Interactive UI, UI Animation, Responsive Web Design (RWD)

UX Developer

2021 - 2022
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.
Technologies: Django, Bootstrap, Python, Figma, Front-end, JavaScript, Google Maps SDK, MongoDB, Single Sign-on (SSO), SVG, TypeScript, Webpack, User Experience (UX), CSS3, REST APIs, Front-end Development, UX Design, UI Design, CSS Animations, Design, Interactive UI, Responsive Design, CSS3 Animation, Responsive Web Design (RWD), Mobile Web

Full-stack Engineer

2020 - 2022
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.
Technologies: Amazon Web Services (AWS), JavaScript, Flutter, Node.js, TypeScript, Jest, APIs, User Experience (UX), Minimum Viable Product (MVP), Rapid Prototyping, REST APIs

Senior UI/UX Developer

2017 - 2020
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%.
Technologies: Vue, MySQL, JavaScript, Amazon S3 (AWS S3), Rust, Go, HTML5, Java, Bash, Python, React, Node.js, CSS, HTML, jQuery, Ajax, Responsive, Storybook, Jest, APIs, Data Visualization, NoSQL, User Experience (UX), CSS3, Minimum Viable Product (MVP), Rapid Prototyping, REST APIs, Front-end Development, UX Design, UI Design, Design, Interactive Design, Interactive UI, Responsive Design, CSS3 Animation, Responsive Web Design (RWD), Mobile Web, Context API, Redux

Senior UI/UX Developer

2015 - 2017
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.
Technologies: MySQL, Socket.IO, Express.js, JavaScript, CodeIgniter, CSS, HTML5, Node.js, HTML, jQuery, PHP, Responsive, User Experience (UX), CSS3, Minimum Viable Product (MVP), REST APIs, Front-end Development, UX Design, UI Design, Interactive Design, CSS3 Animation, Responsive Web Design (RWD)

Designer and Animator

2012 - 2016
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.
Technologies: Socket.IO, JavaScript, HTML5, Adobe Animate, Adobe Photoshop, CSS, HTML, jQuery, PHP, Responsive, User Experience (UX), CSS3, UX Design, UI Design, Design, CSS3 Animation

Personal Website

https://live.imadhusanka.me/
live.imadhusanka.me includes a live interface with micro-interactions which also enables the visitors to see how others are interacting with the site. Visitors can also chat with each other anonymously.

Maptionary

https://maptionary.com/
Maptionary is a dictionary that doesn't just tell you what a word means; it shows you what it means.

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/
Vuulr is a global content marketplace for film and TV rights, where I was responsible for overlooking user experience (UX) and component development, as the application included heavy use of form inputs and validations. I worked on the initial phase of front-end development for the project in the Laravel back-end smart contract-based project.

myPrices.lk

myPrices.lk is a project I worked on to test out framework features on SolidJS on the front end. The application uses Firebase as a back end and uses some Heroku apps in the background for the long-running crawling services to collect required pricing data on demand, which is then cached with Firebase.

AdEka.lk

AdEka.lk is a free online Craigslist platform for Sri Lanka to test out the framework features of Svelte. The application used Firebase on its back end and was primarily focused on the front-end implementation with Svelte.

myStay.lk

myStay.lk was an example project created to test out the Vue framework for the front end. The application uses firebase as a back end and has a few integrations with Cloudinary for image uploads. The project aims to provide information on places to stay within the country.

Kloudmart

https://www.youtube.com/watch?v=OLHMablBQ3A
I had the opportunity to design the front end of Kloudmart. This online platform aimed to provide a user-friendly interface for building telco applications without prior programming knowledge. By incorporating the latest UX design practices, I ensured that the platform was easy to navigate and that the drag-and-drop interface was intuitive, making it accessible to a broad user base; where the application simulator that I developed, which allows users to simulate apps built using the platform, ensured that the user experience (UX) was smooth and efficient.

Habitto

https://www.habitto.com/
Habitto is a landing page for a fintech startup built with Next.js. I optimized the content with the help of a designer to ensure a rich user experience (UX) for the local user base in Japan, and end-to-end tests were written with Cypress.io for the project to support this UX.

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.
2013 - 2017

Bachelor's Degree in Computer Engineering

University of Peradeniya - Peradeniya, Sri Lanka

MAY 2022 - PRESENT

Fintech

Harvard University VPAL

SEPTEMBER 2021 - SEPTEMBER 2024

AWS Solutions Architect Associate

Amazon Web Services Training and Certification

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

Collaboration That Works

How to Work with Toptal

Toptal matches you directly with global industry experts from our network in hours—not weeks or months.

1

Share your needs

Discuss your requirements and refine your scope in a call with a Toptal domain expert.
2

Choose your talent

Get a short list of expertly matched talent within 24 hours to review, interview, and choose from.
3

Start your risk-free talent trial

Work with your chosen talent on a trial basis for up to two weeks. Pay only if you decide to hire them.

Top talent is in high demand.

Start hiring