Dattu is available for hire
Hire DattuDattu Patel
Verified Expert in Engineering
Full-stack Developer
Toronto, ON, Canada
Toptal member since April 13, 2022
Bio
Dattu has been building websites for 15+ years. He's been a front end focused full-stack developer for most of his career and recently specialized in front-end development with React, JavaScript, HTML, and CSS. In the last three years, Dattu has led, coded, and performed code reviews on all the front-end development work of his teams and mentored junior developers. His enterprise experience includes Hearst, Altus Group, CBC Radio Canada, The Source, TD Bank, and Seneca College.
Portfolio
Gartner - Engineering
React, Webpack, JavaScript, TypeScript, HTML, Express.js, Redux, MUI CSS...
KEV Group
HTML5, CSS3, JavaScript, ECMAScript (ES6), React, Redux, React Redux...
Hearst - eCommerce Tower Project
React, Next.js, Headless Software, Front-end, HTML, CSS, JavaScript...
Experience
- JavaScript - 15 years
- CSS3 - 15 years
- HTML5 - 15 years
- WCAG - 5 years
- React - 4 years
- Lerna - 3 years
- Redux - 3 years
- Storybook - 3 years
Availability
Part-time
Preferred Environment
Visual Studio Code (VS Code), JetBrains Rider, Visual Studio, MacOS, Windows
The most amazing...
...and most challenging project I've worked on was when my team delivered a dynamic form builder application in React.
Work Experience
Front-end Engineer (via Toptal)
2023 - PRESENT
Gartner - Engineering
- Developed and enhanced features in the AskGartner UI, an AI-generative chat app with React, Redux, and Material UI.
- Refactored code to separate functionalities into separate files, extensively added unit tests, and improved the application's efficiency.
- Integrated Storybook to visually interact with each component.
Technologies: React, Webpack, JavaScript, TypeScript, HTML, Express.js, Redux, MUI CSS, Material UI, Storybook, Jest
Senior Front-end Developer
2020 - 2024
KEV Group
- Acted as the lead developer for the company's React library project. Developed several libraries as Lerna packages and published them as Azure Artifacts. Wrote extensive documentation for each library as stories with Storybook.
- Served as the lead front-end developer for the React-based KEV forms, an in-house application for a dynamic form builder. The application enabled users to create forms with drag-and-drop features and preview mobile and desktop layouts.
- Led the front-end development for the React-based District Catalog. Added proper widget context to be able to easily add new widgets. Utilized the existing structure to work concurrently with the existing District Catalog.
- Refactored the user interface and experience for all other React-based projects in KEV Group to meet the excellent code quality and user experience.
- Integrated the React testing with Jest and Enzyme in some React projects. Worked closely with the graphics designer to provide the best possible user experience and interface and create a company-wide standard for UI.
- Performed code reviews on all React-based pull requests. Provided constructive feedback and various code-sharing sessions to improve the company's quality of React code.
- Mentored junior developers with their React and developer growth and conducted regular meetings with them to get them to their next learning stage based on reviewing their current capabilities.
- Led the development of a React-based lunch management app. It featured robust and interactive monthly calendar views, displayed a large interactive data set via virtualized tables, and had basic CSS animation (via keyframes) to some visual elements.
Technologies: HTML5, CSS3, JavaScript, ECMAScript (ES6), React, Redux, React Redux, Redux Thunk, Axios, Material UI, Sass, Lerna, Storybook, Azure Artifacts, Webpack, Rollup.js, Babel, Testing, Jest, Enzyme, JSON, User Experience (UX), Code Review, Agile, React-Intl, i18n, PropTypes, Node.js, ADO.NET, Monorepos, Full-stack, NoSQL, Front-end, HTML, CSS, Software Engineering, Software Architecture, Web Development, REST APIs, SVG, Figma, Front-end Development, Responsive Web Design (RWD), Technical Leadership, User Interface (UI), Architecture, Mobile First
React Engineer
2022 - 2023
Hearst - eCommerce Tower Project
- Built and enhanced various React components and hooks per the business requirements. Worked with a back-end developer to create and modify existing GraphQL queries to retrieve the appropriate data points from the databases.
- Created the front-end React application with Tailwind CSS and worked extensively on enhancing the accessibility standards to meet a near-perfect WCAG score.
- Built scripts to generate various Contentful types and data models, prepared a master environment with aliases, merged content from one across environments, validated various properties in each content model, and enhanced Hearst Contentful apps.
- Performed extensive research and provided detailed responses to various questions with summarized key takeaway points.
Technologies: React, Next.js, Headless Software, Front-end, HTML, CSS, JavaScript, Software Engineering, Web Development, REST APIs, SVG, Figma, Tailwind CSS, WCAG 2, Accessibility, AODA Compliance, GraphQL, Front-end Development, Responsive Web Design (RWD), eCommerce, Technical Leadership, React Query, User Interface (UI), Architecture, Mobile First
Front-end (React) Developer
2022 - 2022
DocuSign Inc - Main
- Added new features and modified existing components to add additional functionalities in React, TypeScript, and styled-components.
- Added detailed storybook stories with proper descriptions and controls as a way to document the components and how to use them fully.
- Reviewed pull requests and provided appropriate feedback and suggestions.
Technologies: React, TypeScript, Next.js, Storybook, Netlify, Front-end, HTML, CSS, JavaScript, Software Engineering, Web Development, Figma, Front-end Development, Technical Leadership, User Interface (UI)
Senior Developer
2019 - 2020
Informco
- Developed the enterprise-wide iLibrary web application to manage PDFs, permissions, and roles. This application is used to maintain client PDF forms and documents, which get processed and sent over to the print shop.
- Built new features to manage a list of subscriptions and options available throughout the application by adding new UIs and related APIs. Added and updated API endpoints to CRUD data based on user and client permissions and roles.
- Acted as the lead developer for a centralized PDF system microservice with PDFsharp and Pdfium. This microservice is used to extract fillable fields, add watermark to PDF documents, and rasterize documents.
- Enhanced the existing email microservice and added email queue processing, link tracking, and open tracking.
- Maintained a previous version of the iLibrary web application and the legacy system that used database first code and ported it over to a code first project.
Technologies: HTML5, CSS3, Angular, TypeScript, Angular Material, AG Grid, C#.NET, .NET Core, Entity Framework Core, LINQ, JSON, Microsoft SQL Server, Webpack, Babel, PDFSharp, Code Review, .NET, C#, Full-stack, Front-end, HTML, CSS, JavaScript, Software Engineering, Software Architecture, Web Development, REST APIs, Front-end Development, Technical Leadership, User Interface (UI)
Senior Developer
2018 - 2019
Altus Group
- Developed the multilingual enterprise-wide Altus Group tax appeal and recommendation portal used to maintain numerous data points for client properties and appeals for property taxations.
- Enhanced the Elasticsearch generation, search code in C#.NET, UI, and UX based on the provided requirements and feedback.
- Reviewed pull requests and created release code for deployment to various environments, more specifically, the front end of the website.
Technologies: HTML5, CSS3, AngularJS, Angular, C#.NET, ADO.NET, Entity Framework, Microsoft SQL Server, TypeScript, MongoDB, Git, Grunt, Webpack, Babel, Sass, Jenkins, Kendo UI, Bootstrap, Code Review, Agile, .NET, C#, Full-stack, NoSQL, Front-end, HTML, CSS, JavaScript, Software Engineering, Software Architecture, Web Development, REST APIs, SVG, Front-end Development, Technical Leadership, User Interface (UI), Architecture
Application Developer
2017 - 2018
DAC
- Developed and maintained the social media engagement web portal, specifically the front end. This application periodically retrieved content from clients' various social media accounts and displayed it in a single portal for easy engagement.
- Architected and acted as the lead developer of a centralized email notifications microservice with audit logging. This microsystem was crated with C# scripting, SQL (including sharding), Azure elastic pool, Azure Function app, and Azure Service Bus.
- Developed and architected the second version of the social media engagement API, a microsystem crated with C# scripting, SQL (including sharding), Azure elastic pool, Azure Function app, and Azure Service Bus.
- Performed tasks as a team lead, including distributing tasks and guiding and mentoring junior developers. Completed periodic code reviews for quality control of code, conducted QA tests, and assisted the QA tester with various testing scenarios.
Technologies: C#.NET, .NET Core, JSON, Scripting, HTML5, CSS3, JavaScript, jQuery, Angular, Microsoft SQL Server, Blob Storage, Redis Cache, RabbitMQ, Hangfire, Git, Webpack, Babel, Microservices, Team Mentoring, Code Review, Agile, Bootstrap, User Experience (UX), Azure, Azure Functions, Azure Service Bus, C#, .NET, Full-stack, NoSQL, Front-end, HTML, CSS, Software Engineering, Software Architecture, Salesforce, Web Development, REST APIs, SVG, Figma, Elasticsearch, Front-end Development, Responsive Web Design (RWD), Technical Leadership, User Interface (UI), Architecture, Mobile First
Senior Developer
2015 - 2017
CBC
- Developed the main internal news and resource portal for CBC employees, including a basic CMS. The main content was hosted in Polopoly CMS, and we queried content via the Polopoly APIs and Solr queries in C#.NET API.
- Architected and coded the new HR portal for CBC employees, including a basic CMS. This portal included all the features of the existing portals and new features. Maintained strict security measures for accessing only authorized data.
- Acted as the lead developer and architected an idea accelerator web application initially for CBC employees but eventually for all Canadians. It had an admin panel where admins could manage new seasons and facilitate judging and announcements.
- Developed and architected the pbi2016.ca website, a one-stop information and registration portal for the 2016 Public Broadcasters International conference.
Technologies: HTML5, CSS3, JavaScript, AngularJS, Angular, C#.NET, Microsoft SQL Server, MongoDB, jQuery, Git, Solr, Polopoly, JSON, Agile, ECMAScript (ES6), Bootstrap, Code Review, C#, .NET, Full-stack, NoSQL, Front-end, HTML, CSS, Software Engineering, Software Architecture, Web Development, REST APIs, SVG, Elasticsearch, Accessibility, AODA Compliance, WCAG 2, Front-end Development, Responsive Web Design (RWD), Technical Leadership, User Interface (UI), Architecture, Mobile First
Web Developer
2014 - 2015
The Source
- Led the development of the front-end of a web-based portal for customer representatives. The front end was created using HTML5, CSS3 (Stylus), and JavaScript.
- Collaborated with a partner team on the front end of the new thesource.ca website. We attended the Hybris training since the back end was based on Hybris.
- Ensured front-end best practices were followed and that the product was of the highest standards and quality.
Technologies: HTML5, CSS3, Stylus, jQuery, Git, Agile, LINQ, Full-stack, Front-end, HTML, CSS, JavaScript, Software Engineering, Software Architecture, Web Development, SVG, Front-end Development, Responsive Web Design (RWD), User Interface (UI), Mobile First
UI Solutions Designer
2014 - 2014
TD Bank Group
- Created various smaller AngularJS library packages to be used in a larger AngularJS project while developing the front end of a web-based portal for customer representatives.
- Delivered a front-end solution that was crucial for the management to make proper decisions and create business requirements.
- Followed the strict TD standards for code, design, and accessibility.
Technologies: HTML5, CSS3, JavaScript, AngularJS, AODA Compliance, W3C, WCAG, Git, Front-end, HTML, CSS, Software Engineering, Web Development, REST APIs, Front-end Development, User Interface (UI)
Web Developer
2011 - 2014
Yconic
- Architected and coded various bilingual small-scale to mid-scale enterprise web applications in HTML5, CSS3, JavaScript, jQuery, C#.NET, and MS SQL. Worked directly with business analysts and graphics designers to provide the best user experiences.
- Developed various web service APIs to get and post JSON data with C#.NET JSON and MS SQL. The most notable services tracked email opens and email clicks.
- Created various front-end templates for the Yconic and UThink websites to be integrated with Sitecore and helped maintain some existing sites in classic ASP.
- Designed a Visual Studio template for a project type that was repeatedly created, decreasing the time to roll out a new project from a few days to half a day. The template had standard UI, back end, database schema, and scripts.
- Ensured that all websites were W3C, WCAG, and AODA compliant, and some sites passed the requirements to be accessible by text-to-speech applications such as JAWS, as set forth by ami.ca. Improved the existing SEO practices.
- Developed numerous HTML and inline CSS emails and sent these emails after querying the members based on strict requirements. Generated reports for email engagements by querying data from the MS SQL database.
- Maintained the fundyourfuture.ca website and the French counterpart for our client Scotiabank. The site followed strict guidelines as set forth by Scotiabank.
Technologies: C#, C#.NET, HTML5, CSS3, jQuery, jQuery UI, Microsoft SQL Server, JSON, JavaScript, Active Server Pages (ASP), Less, Bootstrap, Search Engine Optimization (SEO), WCAG, AODA Compliance, W3C, User Experience (UX), .NET, Full-stack, Front-end, HTML, CSS, Software Engineering, Software Architecture, Web Development, REST APIs, SVG, Accessibility, Front-end Development, Responsive Web Design (RWD), User Interface (UI), Architecture
Web Developer
2008 - 2011
Seneca College (Faculty of Continuing Education)
- Developed the front end of the new Faculty of Continuing Education and Training (FCET) website. Provided the JSP templates integrated with OpenCMS. Followed strict W3C, WCAG, AODA, and institutional standards.
- Maintained the existing FCET website and interacted with the staff and faculty members to keep the information up-to-date.
- Built a live search FAQ integrated with advanced search capabilities through keywords with Google. Worked closely with the graphics designer to ensure the best possible user experience and interface and added responsive capabilities.
Technologies: HTML, CSS, JavaScript, jQuery, jQuery UI, Jakarta Server Pages (JSP), W3C, WCAG, AODA Compliance, User Experience (UX), Search Engine Optimization (SEO), Front-end, Software Engineering, Software Architecture, Web Development, Accessibility, Front-end Development, Responsive Web Design (RWD), User Interface (UI), Architecture
Technical Support Agent
2006 - 2008
Seneca College (Student Help Desk)
- Led the development of the Seneca Student Help Desk website and ResNet website in HTML, CSS, and JavaScript. Adhered to the W3C, WCAG, AODA, and institutional standards mandated by the Government.
- Provided technical support to Seneca students, faculty members, and Seneca resident guests in person, on the phone, and via email.
- Assisted the computer technologists with maintaining more than 1,000 workstations at four major campuses of the College.
Technologies: HTML, CSS, JavaScript, WCAG, AODA Compliance, W3C, Helpdesk, IT Helpdesk, Front-end, Software Engineering, Software Architecture, Web Development, Accessibility, Front-end Development
Experience
Lerna and Storybook-based React Libraries
I created a React library project with Lerna and Storybook to capture and collect all the various common components developed for different projects in the company. It allowed the developers of other projects to focus on implementing the business requirements of their projects.
The common library included packages for form fields (enhanced Material-UI-based form components), Material-UI theme with company branding, common React and JavaScript utilities, dialog prompts, icons package, React-based authentication package, form validation package (to be used by React and Node.js.-based servers) and other company-specific components.
The largest package was the form-field package containing fully customizable but self-contained controls for a text field, date and time field, dropdown field, checkbox field, and radio button list field. It had complex controls for a WYSIWYG editor, address field, full name field, image upload or cropper field, signature, and custom company-specific fields. These fields took care of the error handling, validation, and styling.
We also provided all the documentation via Storybook.
The common library included packages for form fields (enhanced Material-UI-based form components), Material-UI theme with company branding, common React and JavaScript utilities, dialog prompts, icons package, React-based authentication package, form validation package (to be used by React and Node.js.-based servers) and other company-specific components.
The largest package was the form-field package containing fully customizable but self-contained controls for a text field, date and time field, dropdown field, checkbox field, and radio button list field. It had complex controls for a WYSIWYG editor, address field, full name field, image upload or cropper field, signature, and custom company-specific fields. These fields took care of the error handling, validation, and styling.
We also provided all the documentation via Storybook.
KEV Forms
A React-based bilingual dynamic form builder, enabling users to create a dynamic form with various properties for the 16 form fields. The user can drag and drop form fields and preview them in mobile and desktop views. There was a complex error handling mechanism and indicators for errors and warnings.
The code was set up to easily change a form field's dynamic, static, and dependent properties. For example, a date field can have a minimum and maximum date, so we ensured that the minimum date was at least a day before the maximum date.
I created a code with future enhancements and focused on the application's front end using HTML5, SASS, React, React-Redux, Material-UI, Node.js, Axios, C#.NET, .NET Core, SQL, MongoDB, webpack, and Babel.
The code was set up to easily change a form field's dynamic, static, and dependent properties. For example, a date field can have a minimum and maximum date, so we ensured that the minimum date was at least a day before the maximum date.
I created a code with future enhancements and focused on the application's front end using HTML5, SASS, React, React-Redux, Material-UI, Node.js, Axios, C#.NET, .NET Core, SQL, MongoDB, webpack, and Babel.
Next.js and React-based Website
https://github.com/dattu-caIn developing my personal blog, I leveraged advanced web technologies, including Next.js v13 App Router, Tailwind CSS with daisyUI, and Sanity CMS. The project incorporates use-hook-form for form handling, NextAuth.js for authentication, and MongoDB for data management, all meticulously tested and hosted on Vercel.
Education
2005 - 2008
Diploma in Computer Programming and Analysis
Seneca College of Applied Arts and Technology - Toronto, Ontario, Canada
Skills
Libraries/APIs
jQuery, jQuery UI, React, React Redux, REST APIs, Rollup.js, Entity Framework, AG Grid, LINQ, PDFSharp, React-Intl, Redux-Saga, Node.js, React Query, daisyUI, Formik
Tools
Redux Thunk, Lerna, JetBrains Rider, Git, Figma, Stylus, Solr, RabbitMQ, Hangfire, Webpack, Babel, Grunt, Jenkins, Visual Studio, Mongoose
Languages
HTML, CSS, JavaScript, HTML5, CSS3, TypeScript, Sass, ECMAScript (ES6), C#.NET, Less, Active Server Pages (ASP), GraphQL, C#
Frameworks
Bootstrap, Redux, AngularJS, Angular, .NET Core, Jest, Next.js, Tailwind CSS, Jakarta Server Pages (JSP), ADO.NET, Kendo UI, Angular Material, Entity Framework Core, Material UI, .NET, Express.js, MUI CSS
Paradigms
Responsive Web Design (RWD), Search Engine Optimization (SEO), W3C, Agile, Testing, Microservices
Storage
JSON, Microsoft SQL Server, MongoDB, NoSQL, Redis Cache, Elasticsearch
Platforms
Visual Studio Code (VS Code), Contentful, Azure, Azure Functions, Netlify, MacOS, Windows, Salesforce, RouterOS, Vercel
Other
User Experience (UX), Code Review, Storybook, Full-stack, Front-end, Software Engineering, Web Development, Front-end Development, Technical Leadership, User Interface (UI), Architecture, Mobile First, WCAG, AODA Compliance, Helpdesk, IT Helpdesk, Team Mentoring, Axios, Enzyme, Scripting, Software Architecture, SVG, eCommerce, Polopoly, Blob Storage, Azure Artifacts, i18n, PropTypes, Sagas, Styled-components, SEO Content, Azure Service Bus, Monorepos, Headless Software, WCAG 2, Accessibility, Fauna, NextAuth.js, reCAPTCHA, Apps
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