Product Hunt Dev

TOP LAUNCH

Turn every design into a working React component

Ever spent hours manually copying design elements from websites, wishing there was a faster way? It’s a common struggle for designers and developers who just want to get the job done without all the tedious effort. The process of sifting through HTML, replicating styles, and tweaking them to fit your needs can turn a simple task into a drawn-out process that stifles creativity.

That’s where HTML to React comes in. This browser extension is designed to make your workflow more efficient by allowing you to take HTML elements from any website and instantly convert them into React components. It’s not just about copying—it’s about capturing inspiration and seamlessly integrating it into your project. You can even export these components to Figma, making it easier to bridge the gap between design and development.

Using it is straightforward: enable the extension, select the part of the page you want, and you’ll get React code ready to use in your project. If you need to customize the component, the Magic Patterns editor offers simple tools for refining the elements to suit your exact needs.

Check it out

TOP LAUNCH

Automate your PR reviews

Developers know code reviews are essential for catching bugs, buuuut they can also be a bit of a pain. They’re time-consuming and sometimes overwhelming. There have been a ton of tools to help keep your code quality high, but many require you to change or create a new workflow. 

PR-Agent by CodiumAI is designed to help developers streamline their PR process by integrating directly into GitHub and other git platforms, automatically analyzing PRs, and providing features like auto-generated descriptions, PR reviews, and committable code suggestions. PR-Agent can highlight potential issues, suggest improvements, and answer free-text questions related to pull requests. Commands like /describe can auto-generate summaries, and /review provides focused feedback on security or testing.

Check it out

CAT NIPS

AI

• Codium AI lets you integrate AI-powered code review and chat tools in GitHub to analyze PRs, automate reviews, highlight changes, suggest improvements, and ensure best practices.

• StructAI instantly captures your project structure and file contents and optimizes them to enhance your development workflow with smarter, context-aware AI assistance.

Front-End

• Screen Ruler is a browser extension that lets you quickly measure any element on a size. You can find and extract sizes, distances, margins, and paddings. 

Back-end

• Keet provides APIs for any website. Developers can use it to connect to customer accounts and perform actions on their behalf.

• undb is a local-first, offline-first no-code platform that empowers you to build and manage your own databases with ease. 

• Web Action SDK makes it easier to create web automations for popular sites like LinkedIn, Amazon, Uber, and more. 

Full Stack and Productivity

• Maxium gives you real-time insights on your engineering team by categorising code changes and estimating the effort required to put them together as a function.

• HackMD gives you a real-time Markdown editor for collaborative work that’s built as a central place for knowledge sharing amongst your team.

• Phase is an open source platform for fast-moving engineering teams to secure and deploy application secrets — from development to production.

Until next week

Written by Aaron O’Leary with Sarah Wright.

P.S. Someone awesome forward you this newsletter? Sign up here.