My Best Web Development and Design Resources for 2025

Shatlyk — Sat, 26 Jul 2025 08:55:23 +0000

I believe that every developer has a curated list of resources they rely on daily. Whether you're a beginner or a seasoned pro, these resources can elevate your workflow. Here's my handpicked list of the best frontend and design resources I use daily.

Design Inspiration

These platforms provide a wealth of creative ideas to fuel your next project:

Minimal Gallery: Discover minimalist website designs with intuitive filtering, perfect for clean and modern aesthetics.
Cosmos: A treasure trove of unique images and innovative UI/UX ideas to inspire your designs.
Unsection: Explore over 1,000 categorized web pages with easy filtering for quick inspiration.
Supahero: Find top-tier hero sections to make your website’s first impression unforgettable.
Stack Sorted: Browse a curated collection of the best web designs, organized by elements for easy reference.
Awwwards: A showcase of the world’s finest websites, recognized for their creativity and craftsmanship.

Catalog of Ready Made Components

Save time for development with these open-source resources:

Built At Light: A marketplace offering free and paid UI kits, templates, and components with excellent filtering options.
Codrops: High-quality, open-source components primarily built with HTML, CSS, and JavaScript.
Aceternity UI: Stunning components for React, powered by Tailwind and Framer Motion for seamless animations.
Edil Ozi: A robust library of React components using Tailwind, Framer Motion, and GSAP for dynamic designs.
Shad CN: Customizable components for React and Tailwind, ideal for building your own component library.
Motion Primitives: Beautifully animated components leveraging Framer Motion and Tailwind.
UI Verse: A daily-updated collection of UI components built with HTML and CSS/Tailwind.
Olivier Larose: Expert tutorials and components focusing on motion design with GSAP, Framer Motion, and React.

You can find this list in my github, which I update periodically with new links 🙂

Stock Images

High-quality visuals to elevate your projects:

Lummi AI: AI-generated images and illustrations, perfect for unique visuals.
Unsplash: A vast library of professional, royalty-free photos.
Pexels: Free stock photos contributed by a global community of photographers.

Pro Tip: Optimize your images with Squoosh to ensure fast-loading websites without sacrificing quality.

Artificial Intelligence for Various Use Cases

AI tools to supercharge your development process:

Ideogram: Generate high-quality images with a free tier, ideal for custom visuals.
Grok AI: My preferred AI for coding assistance, offering practical and accurate solutions.
Leonardo AI: Create stunning images with a daily-refreshed free tier.
Easy With AI: A curated collection of AI tools for diverse use cases, from design to development.

Other Useful Sources

Wappalyzer: Analyze the technologies powering any website, perfect for competitive research.
Jitter Video: Create and customize video templates for engaging web content.
Squoosh: Google Chrome Labs’ image compression tool for optimizing visuals effortlessly.

Check out my YouTube video where I showcase these resources in action

Ashpez - Food Delivery App

Shatlyk — Thu, 27 Feb 2025 11:37:06 +0000

Building something useful and sharing it with the world is one of the joys of being a developer. That’s why I’m thrilled to introduce Ashpez, an open-source, full-stack food delivery application I created using Next.js 14 and Payload CMS. It’s a responsive, feature-packed app that handles everything from ordering food to managing restaurants—all in one place. Whether you’re a developer looking for a practical project to explore, a business owner dreaming of a custom food delivery platform, or just a curious tinkerer, Ashpez is here for you to dive into. Oh, and here’s a cool bonus—it comes with a Figma file packed with a ready-to-go design

Food Delivery, Simplified

Ashpez is user-facing app where people can register, browse menus, order food, and track their deliveries. On the other, it’s a powerful admin panel where restaurant owners can manage their menus and orders, while admins oversee the whole system. It’s fully responsive, meaning it looks great on your phone or desktop, and it’s built with modern tools to keep things fast and flexible.

Why Next.js and Payload CMS?

I chose Next.js 14 (recently upgraded to 15) because it’s a powerhouse for full-stack development. The App Router, built-in i18n for multilingual support, and seamless server-side rendering made it perfect for a dynamic app like this. Plus, its ecosystem—think TanStack Query for data fetching, Jotai for state management, and ShadCN for gorgeous UI components—let me focus on features instead of reinventing the whee

For the backend, Payload CMS stole the show. It’s a flexible, TypeScript-friendly CMS that integrates beautifully with Next.js. Paired with MongoDB, it handles everything from user authentication to restaurant data with ease. No need for a bulky custom backend—Payload gives me an admin panel and API out of the box, which I’ve tailored to support multivendor food delivery.

What’s Under the Hood?

Here’s a taste of what Ashpez offers:

Client Features: Sign up, log in, order food, track deliveries, and view your order history—all with real-time updates and a responsive design.
Admin Panel: Manage restaurants, assign owners, tweak menus, and update order statuses. It supports roles like Admin (full control), Restaurant Owner (their own domain), and Guest (view-only).
Tech Highlights: Next.js 14, Payload CMS, MongoDB, GraphQL, TanStack Query, Jotai, Zod with react-hook-form, and Tailwind via ShadCN. It’s SEO-friendly, accessible (A11Y), and multilingual-ready with next-intl.
Multivendor Support: One platform, many restaurants—perfect for a scalable food delivery network.

Check it out on GitHub.

Try It Out Yourself

Want to see it in action? The live demo here, with the admin panel at /admin. Use these guest accounts to poke around _(just don’t log into both client and admin in the same browser session—check the docs for why):

Guest 1: guest1@gmail.ru / guest123
Guest 2: guest2@gmail.ru / guest456

Let’s Cook Up Something Great

Head to the repo, try the demo, and let me know what you think. Got a feature in mind? Found a bug? Open an issue or send a PR—I’d love to see where we can take this together.

Bon appétit, and happy coding!

DEV Community: Shatlyk