Alan is available for hire
Hire AlanAlan Hadyk
Verified Expert in Engineering
React, TypeScript, and GraphQL Developer
Location
Myslowice, Poland
Toptal Member Since
April 2, 2021
Alan is a veteran front-end engineer with 14 years of impact. Alan orchestrated a SaaS revamp, accelerated a Next.js MVP to market, crafted a dashboard serving 22,000+ brands, and translated 60+ designs into eCommerce sites, generating over 2 million PLN in revenue.
Portfolio
SaaS for Content Writers
React, CSS, HTML, Tailwind CSS, JavaScript, TypeScript, Prisma, React Query...
Healthcare SaaS
Front-end, React, Tailwind CSS, TypeScript, Prisma, GraphQL, Apollo...
Real Estate Startup
JavaScript, TypeScript, React, Next.js, Tailwind CSS, Auth0, Webpack, Jest...
Experience
Availability
Full-time
Preferred Environment
JavaScript, TypeScript, React, Node.js, GraphQL, Jest, Cypress, React Query, Tailwind CSS
The most amazing...
...project I've worked on is an engine empowering community-led business. It was exciting to work on a product that enables communities to spark connections.
Work Experience
Front-end Engineer
2022 - 2023
SaaS for Content Writers
- Created a React SaaS with a WYSIWYG editor, improving the content creation process.
- Implemented a permission system by creating tailored UIs and user flows based on API permissions, improving security, and allowing user interactions based on their roles.
- Cut network requests by up to 70% with TanStack Query caching, eliminating a data-fetching bottleneck.
- Enabled real-time conversations between users with WebSocket, resulting in faster decision-making.
- Sped up UI development with Windi CSS, enabling the team to meet tight project deadlines.
Technologies: React, CSS, HTML, Tailwind CSS, JavaScript, TypeScript, Prisma, React Query, REST, Vite, CSS Frameworks, ECMAScript (ES6), Front-end, GitHub, Figma, Web Development, Architecture, REST APIs, JSON, SVG, Atomic Design, Front-end Development, Web, Axios, APIs
Senior React Developer
2022 - 2022
Healthcare SaaS
- Developed an AI-powered healthcare form that improves diagnostic accuracy.
- Reduced API costs by 30% with GraphQL, optimizing communication with back-end services.
- Implemented route lazy loading, reducing initial bundle size by 40%, leading to faster loading times.
Technologies: Front-end, React, Tailwind CSS, TypeScript, Prisma, GraphQL, Apollo, GraphQL Code Generator, React Apollo, Pixel Perfect, Responsive Web Apps, CSS, CSS3, HTML, HTML5, JavaScript, ECMAScript (ES6), GitHub, Figma, Web Development, JSON, SVG, Unit Testing, Front-end Development, Web
Front-end Engineer
2021 - 2022
Real Estate Startup
- Built a consumer-facing real estate platform MVP using Next.js, Apollo, and Auth0.
- Integrated a .NET back end using GraphQL, Auth0 for authentication, and Plaid for open banking.
- Implemented server-side rendering to optimize application performance by integrating Apollo Client for cache hydration, speeding up initial page loads on the client side.
- Used Sentry for real-time error tracking, minimizing the number of issues and increasing system reliability.
Technologies: JavaScript, TypeScript, React, Next.js, Tailwind CSS, Auth0, Webpack, Jest, React Testing Library, Cypress, Node.js, Apollo, GraphQL, Docker, Pixel Perfect, Responsive Web Apps, CSS, CSS3, HTML, HTML5, ECMAScript (ES6), Front-end, GitHub, Figma, Web Development, Architecture, JSON, SVG, Atomic Design, Front-end Development, Web, Server-side Rendering (SSR)
Full-stack Developer
2021 - 2021
Tribe Technologies
- Created a notification system by developing API endpoints in NestJS and integrating them into a Next.js UI, increasing user activity and improving retention rates.
- Resolved performance issues with large datasets by implementing virtualized lists that only render items in view, improving UI responsiveness and reducing load times.
- Improved the release and deployment processes by simplifying approval protocols to require only QA sign-off, resulting in a faster release cycle and feature deployment.
Technologies: JavaScript, TypeScript, React, Next.js, Tailwind CSS, Chakra UI, Webpack, Jest, React Testing Library, Cypress, Node.js, NestJS, Apollo, GraphQL, Docker, GitLab, GitLab CI/CD, Pixel Perfect, Responsive Web Apps, CSS, CSS5, HTML, ECMAScript (ES6), Front-end, Web Development, JSON, SVG, React Apollo, E2E Testing, Unit Testing, Front-end Development, React Query, Create React App, Web, Server-side Rendering (SSR), APIs
Full-stack Developer
2018 - 2021
Opn
- Architected a React merchant dashboard that served over 22,000 brands worldwide.
- Designed and implemented an API gateway with Express, Node.js, Apollo, and GraphQL, improving the speed, accuracy, and reliability of back-end communication.
- Collaborated with the CTO, product managers, and back-end engineers to provide integration and efficient data handling between the front end and a Node.js server via GraphQL.
- Integrated three banks with gRPC and Ruby microservices, extending payment capabilities.
- Improved security with cookie-based authentication and data retrieval speed through Apollo caching.
Technologies: JavaScript, Ruby, React, Ruby on Rails (RoR), Sinatra, Styled-components, Webpack, Jest, Enzyme, React Testing Library, Cypress, Node.js, Express.js, Apollo, GraphQL, Docker, Jenkins, Buildkite, Jira, Museums & Exhibits, Basecamp, HTML, Redux, REST, CSS, Confluence, Continuous Deployment, CSS3, CSS3 Animation, Git, Lighthouse, HTML5, PageSpeed, User Interface (UI), ECMAScript (ES6), Front-end, GitHub, Fintech, Full-stack, Agile, Architecture, REST APIs, SVG, Pixel Perfect, Atom, Responsive Web Apps, Web Development, JSON, Atomic Design, React Apollo, Apollo Server, Storybook, CSS-in-JS, E2E Testing, Unit Testing, Front-end Development, Create React App, Web, CI/CD Pipelines, APIs
Senior Front-end Developer
2017 - 2018
SHIJI
- Contributed to the development of a reservations module, streamlining hotel management processes.
- Showcased proactive R&D by introducing a React-based proof of concept (POC), expediting decision-making.
- Boosted product reliability and mentored juniors, enhancing team quality and growth.
Technologies: JavaScript, TypeScript, React, Redux, Ember.js, Sass, Docker, QUnit, Webpack, Node.js, REST, Zeplin, Jira, Jenkins, GitLab, Jest, HTML, Enzyme, Less, CSS, Continuous Deployment, CSS3, CSS3 Animation, Git, HTML5, Microsoft Teams, PageSpeed, User Interface (UI), ECMAScript (ES6), GitHub, Confluence, Front-end, Agile, Web Development, REST APIs, JSON, SVG, Pixel Perfect, Atom, SCSS, Responsive Web Apps, Storybook, E2E Testing, Unit Testing, Front-end Development, Create React App, Web
Front-end Developer
2015 - 2017
SAP
- Streamlined YaaS microservices with standardized Markdown, enhancing production efficiency.
- Developed the business portal's front-end, elevating stakeholder engagement.
- Delivered university lectures under "Hack Your Career," aiding in the recruitment of top-tier interns.
Technologies: JavaScript, CoffeeScript, React, Redux, CSS Modules, Webpack, Node.js, Docpad, Jest, Enzyme, Jira, Stash, Bamboo, HTML, Adobe Photoshop, Sass, REST, CSS, Confluence, Continuous Deployment, CSS3, CSS3 Animation, Git, HTML5, PageSpeed, User Interface (UI), ECMAScript (ES6), GitHub, Front-end, Agile, Web Development, REST APIs, JSON, SVG, Pixel Perfect, Atom, SCSS, Responsive Web Apps, Atomic Design, Unit Testing, Front-end Development, Create React App, Web
Front-end Developer
2010 - 2015
dih.pl
- Converted designs into 60+ eCommerce shops, generating an estimated 2+ million PLN in revenue.
- Spearheaded UI development processes, resulting in enhanced design consistency and streamlined development cycles.
- Introduced the use of Redmine as a project management tool, significantly reducing email-based communication and improving overall project management efficiency.
Technologies: JavaScript, Sass, Less, jQuery, PrestaShop, Redmine, HTML, Adobe Photoshop, CSS, CSS3, CSS3 Animation, HTML5, User Interface (UI), Front-end, Web Development, REST APIs, JSON, Pixel Perfect, SCSS, Responsive Web Apps, Front-end Development, Web
Freelance Developer
2008 - 2010
Self-employed
- Launched front-end career, gaining repeat business through quality work.
- Leveraged personal networks to secure small-scale projects, showcasing adaptability and gaining practical coding experience.
- Built a reputation in the local tech community through consistent delivery of quality work, leading to referrals and repeat projects.
Technologies: CSS, HTML, JavaScript, jQuery, Adobe Photoshop, CSS3, CSS3 Animation, User Interface (UI), Front-end, Web Development, REST APIs, JSON, Responsive Web Apps, Front-end Development, Web
Experience
Personal Website
https://alanhadyk.dev/My personal website is a cutting-edge web application built with Next.js and Tailwind CSS, demonstrating my proficiency in front-end development and design.
In terms of styling, I swapped out styled-components for Tailwind CSS. This utility-first CSS framework enabled me to craft a custom, responsive design while writing less CSS. It made my website more performant by reducing the amount of CSS delivered to the client.
The source code for this website is openly available on my GitHub profile, encouraging the ethos of open-source contribution and demonstrating my coding practices. This transparency allows others to learn from, contribute to, and even critique my work, fostering a collaborative learning environment.
In conclusion, my personal website is a testament to my front-end development and design skills. It highlights my ability to stay abreast of industry advancements and showcases my commitment to continuous learning and improvement. The site's success in attracting business opportunities also underscores the value of these skills in the marketplace.
In terms of styling, I swapped out styled-components for Tailwind CSS. This utility-first CSS framework enabled me to craft a custom, responsive design while writing less CSS. It made my website more performant by reducing the amount of CSS delivered to the client.
The source code for this website is openly available on my GitHub profile, encouraging the ethos of open-source contribution and demonstrating my coding practices. This transparency allows others to learn from, contribute to, and even critique my work, fostering a collaborative learning environment.
In conclusion, my personal website is a testament to my front-end development and design skills. It highlights my ability to stay abreast of industry advancements and showcases my commitment to continuous learning and improvement. The site's success in attracting business opportunities also underscores the value of these skills in the marketplace.
Cryptonetic
I am the founder of Cryptonetic. This project is not publicly available yet.
Why Cryptonetic?
• The top 100 wallets hold 18% of Bitcoin's value. The biggest players can easily control the market at the expense of millions of smaller investors. Join the revolution and defy the establishment!
How does Cryptonetic work?
• It's very simple—earn trust tokens on the Cryptonetic platform and spend them by voting for cryptocurrencies you believe in. Trust tokens reflect your belief in the value of a particular project. For 50% of the value of each deposit, we will purchase the cryptocurrency you voted for. At the end of each month, we will draw users to win cryptocurrencies purchased with trust tokens.
What is Cryptonetic?
• Cryptonetic is an infinite map that lists all cryptocurrencies, and cryptocurrency exchanges, sorted by the trust people have in them. You will find detailed information about cryptocurrencies such as trading volume, volume, exchange rate, and position on our list. We will help you decide which cryptocurrency exchange to choose based on information such as the number of cryptocurrencies available, stable coins, daily volume, and market/taker commission.
Why Cryptonetic?
• The top 100 wallets hold 18% of Bitcoin's value. The biggest players can easily control the market at the expense of millions of smaller investors. Join the revolution and defy the establishment!
How does Cryptonetic work?
• It's very simple—earn trust tokens on the Cryptonetic platform and spend them by voting for cryptocurrencies you believe in. Trust tokens reflect your belief in the value of a particular project. For 50% of the value of each deposit, we will purchase the cryptocurrency you voted for. At the end of each month, we will draw users to win cryptocurrencies purchased with trust tokens.
What is Cryptonetic?
• Cryptonetic is an infinite map that lists all cryptocurrencies, and cryptocurrency exchanges, sorted by the trust people have in them. You will find detailed information about cryptocurrencies such as trading volume, volume, exchange rate, and position on our list. We will help you decide which cryptocurrency exchange to choose based on information such as the number of cryptocurrencies available, stable coins, daily volume, and market/taker commission.
Tribe
https://tribe.so/Tribe is an engine empowering community-led businesses, such as IBM, ASUS, and Pipedrive, and a customizable community platform.
I was deeply involved in the process of developing various features for the front-end and back-end layers of Tribe's social platform. Features such as setting custom domain, following posts, or FullStory integration allowed Tribe to gain new customers and increase revenue.
I was deeply involved in the process of developing various features for the front-end and back-end layers of Tribe's social platform. Features such as setting custom domain, following posts, or FullStory integration allowed Tribe to gain new customers and increase revenue.
Skills
Languages
JavaScript, TypeScript, GraphQL, HTML, Less, CSS, CSS3, HTML5, ECMAScript (ES6), SCSS, Sass, Ruby, CoffeeScript
Frameworks
Jest, Redux, Next.js, Tailwind CSS, React Native, Express.js, Cypress, Ruby on Rails (RoR), Sinatra, Ember.js, QUnit, NestJS
Libraries/APIs
React, jQuery, REST APIs, Node.js
Tools
Adobe Photoshop, Confluence, Git, React Apollo, Create React App, Webpack, Jira, GitLab, GitHub, Figma, GitLab CI/CD, Atom, Canvas 2D, Jenkins, Basecamp, Zeplin, Docpad, Stash, Bamboo, PrestaShop, Redmine, Microsoft Teams, PageSpeed, Canvas, Sequelize, Auth0, Prisma
Paradigms
REST, E2E Testing, Unit Testing, Continuous Deployment, Agile, Test-driven Development (TDD)
Platforms
Web, Docker, Buildkite, Firebase
Storage
JSON, PostgreSQL, MongoDB
Other
Styled-components, Sound Editing, Enzyme, React Testing Library, Apollo, CSS Modules, CSS3 Animation, User Interface (UI), Front-end, Web Development, SVG, Atomic Design, Apollo Server, Pixel Perfect, Storybook, CSS-in-JS, Front-end Development, Responsive Web Apps, Server-side Rendering (SSR), Museums & Exhibits, Architecture, Progressive Web Applications (PWA), APIs, Mastering, Mixing, Service Workers, Lighthouse, Fintech, Full-stack, NodeMailer, WebSockets, Chakra UI, GraphQL Code Generator, API Integration, React Query, Vite, CSS Frameworks, CSS5, CI/CD Pipelines, Axios
Education
2008 - 2010
Associate's Degree in Sound Engineering
Regionalny Ośrodek Edukacji - Katowice, Poland
2004 - 2007
High School Diploma in Information Technology
SOSW - Tarnowskie Góry, Poland