Before we dive in, quick word: everything you're about to read gets built, tested, and taken further inside Bestapps Academy, our Skool community. It's where we drop the actual skills, walk through the builds live, and troubleshoot each other's projects, so instead of just reading about a 3D hero, you ship one with people looking over your shoulder. If this guide clicks for you, that's the room where it goes from "interesting" to "in production."
Bestapps Academy
1. Thinking Orbs
Create animated thinking states for AI products
Thinking Orbs is a collection of animated components designed for AI assistants, agents and intelligent applications.
Instead of showing users a generic loading spinner, you can use visual states for actions like thinking, solving, searching, listening, working or connecting. These small details can make an AI product feel much more responsive and alive.
It is especially useful for developers building chatbots, AI dashboards, copilots or agent-based software.
Website:
https://orbs.jakubantalik.com
2. Typeface.fyi
Identify the typography used on any website
Typeface.fyi is a browser extension that helps you inspect the typography of a webpage without digging through complicated developer tools.
You can quickly discover the font family, size, line height, letter spacing, weight and color used on almost any piece of text.
It is useful for developers and designers who find a website they like and want to understand what makes its typography work.
Website:
https://www.typeface.fyi
3. CodeFronts
Copy ready-made CSS components and animations
CodeFronts is a large collection of free CSS components, layouts, animations, navigation patterns and visual effects.
You can browse working examples, preview them and copy the code directly into your own project. The library includes buttons, cards, menus, loaders, dashboards, forms, hover effects, page layouts and much more.
It is a great resource when you want a polished interaction without spending hours rebuilding it from scratch.
Website:
https://codefronts.com
4. Yerd
Run local PHP projects without Docker
Yerd is a lightweight, open-source development environment for running PHP projects locally on macOS and Linux.
It lets you create local .test domains, use HTTPS, manage different PHP versions and run multiple projects from one interface. It is designed for developers who want a simpler alternative to heavy Docker-based local environments.
This is particularly valuable for Laravel and PHP developers who want to spend less time configuring their environment and more time building.
Website:
https://yerd.app
5. BagUI
Build SaaS pages with production-ready UI sections
BagUI provides reusable React and shadcn/ui sections for SaaS websites and applications.
Instead of giving you only individual buttons or inputs, it focuses on complete sections such as hero areas, pricing tables, feature grids, testimonials, calls to action and dashboards. The components can be added to a project and customized while keeping control of the underlying code.
It is a strong resource for developers, founders and vibe coders who want to launch a polished landing page faster.
Website:
https://www.bagui.pro
6. Ray.so
Turn ordinary code into beautiful visuals
Ray.so lets you transform a code snippet into a clean, professional image.
Paste your code, select the programming language and customize the theme, background, padding and window style. You can then export the result and use it in social posts, documentation, presentations or tutorials.
It is one of the easiest ways to make technical content look more polished and easier to share.
Website:
https://ray.so
7. Responsively App
Test your website across multiple screen sizes at once
Responsively App is a browser made specifically for responsive web development.
It allows you to preview a website on several device sizes simultaneously, so you can immediately see how a design behaves on mobile, tablet and desktop. It is free, open source and available for macOS, Windows and Linux.
This can save developers from constantly resizing browser windows or checking every device individually.
Website:
https://responsively.app
8. Excalidraw
Sketch product ideas, systems and user flows
Excalidraw is a collaborative online whiteboard for creating diagrams, wireframes, flowcharts and technical explanations with a hand-drawn style.
You can use it to map an application, explain a database, plan user flows, brainstorm features or communicate a complicated idea to your team. It works directly in the browser and does not require an account for basic use.
It is valuable even for non-developers because it makes technical concepts much easier to understand visually.
Website:
https://excalidraw.com
9. Can I Use
Check whether a web feature works across browsers
Can I Use provides browser-support information for HTML, CSS and JavaScript features.
Before using a new CSS property or browser API, you can search for it and see whether it works in Chrome, Safari, Firefox, Edge and mobile browsers. The site also shows partial support, known limitations and historical compatibility.
It helps developers avoid shipping features that work perfectly on their computer but break for a large portion of users.
Website:
https://caniuse.com
10. DevToys
Access everyday developer utilities in one place
DevToys is a collection of practical utilities for repetitive development tasks.
Tools like this are useful when you need to format JSON, encode or decode text, generate hashes, test regular expressions, inspect timestamps or transform data without searching for a different website every time.
It is essentially a digital toolbox for developers and can remove dozens of small interruptions from your workflow.
Website:
https://devtoys.app
Build Something With Them
Bookmarking useful websites is a good start, but the real advantage comes from using them to create something.
Inside Bestapps Academy, we teach you how to use AI to design, vibe code and launch real software—even without a traditional programming background.
You will learn how to turn an idea into a working product, improve its design, connect the right tools and start finding your first users alongside a growing community of builders.
Join Bestapps Academy and start building your first product.