正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

Next.js Dashboard (Financial Edition)! built with - Next.js 16. - Tailwind CSS 4. - Framer Motion. - Next-intl (RTL support) Comes with Dark / Light mode, Charts & analytics, Drag & Drop widgets, JWT auth and multilingual support. Demo + Source Code (First comment) 👇

Mohamed Djoudir

1,445 subscribers

198,367 次观看 • 6 个月前 •via X (Twitter)

科学技术财经

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

Next.js SaaS Template (2026 Edition) built with - Next.js 16 & React 19 - Tailwind CSS 4 - Framer Motion - Next-intl (RTL support) Comes with Dark-themed design, i18n (EN + AR), Pricing pages, Blog, Auth pages, Charts & animations. Demo + Source Code (First comment) 👇

Next.js SaaS Template (2026 Edition) built with - Next.js 16 & React 19 - Tailwind CSS 4 - Framer Motion - Next-intl (RTL support) Comes with Dark-themed design, i18n (EN + AR), Pricing pages, Blog, Auth pages, Charts & animations. Demo + Source Code (First comment) 👇

Mohamed Djoudir

107,279 次观看 • 5 个月前

Next.js Admin Dashboard with AI Assistant! built with - Next.js 16 - Tailwind CSS - TanStack Query - Framer Motion - next-intl (Full RTL support) Comes with NestJS backend, TypeORM, JWT auth, RBAC, real-time WebSocket updates, AI assistant powered by Gemini & DeepSeek APIs, and multilingual support. Demo + Source Code First comment 👇

Next.js Admin Dashboard with AI Assistant! built with - Next.js 16 - Tailwind CSS - TanStack Query - Framer Motion - next-intl (Full RTL support) Comes with NestJS backend, TypeORM, JWT auth, RBAC, real-time WebSocket updates, AI assistant powered by Gemini & DeepSeek APIs, and multilingual support. Demo + Source Code First comment 👇

Mohamed Djoudir

87,658 次观看 • 5 个月前

Admin dashboard With Ai AI assistant ! built with - Next.js 16. - Tailwind CSS 4. - TanStack Query. - Framer Motion. Comes with NestJS backend, TypeORM, JWT auth, RBAC, WebSocket-powered updates, AI assistant, and multilingual support. Demo + Source Code (Not Free) :

Admin dashboard With Ai AI assistant ! built with - Next.js 16. - Tailwind CSS 4. - TanStack Query. - Framer Motion. Comes with NestJS backend, TypeORM, JWT auth, RBAC, WebSocket-powered updates, AI assistant, and multilingual support. Demo + Source Code (Not Free) :

Mohamed Djoudir

113,879 次观看 • 7 个月前

FINALLY!!! Built this Exclusive Fully Responsive Animated Multifunctional Portfolio Website with Light/Dark mode using HTML, CSS & Javascript How's it? Drop your comments 😊 SOURCE CODE 👇

FINALLY!!! Built this Exclusive Fully Responsive Animated Multifunctional Portfolio Website with Light/Dark mode using HTML, CSS & Javascript How's it? Drop your comments 😊 SOURCE CODE 👇

Raja - impeccify.com 🚀

192,258 次观看 • 3 年前

🚀 Ship in record time with the new Metronic! The all-in-one template kit for React Vite, Next.js, and vanilla JS - trusted by 117,000+ developers. Key Features: - 10 unique app layouts - RTL/Dark mode support - 1000+ UI elements - 40+ UI components - 120+ pages - 50+ Prebuilt UI blocks CRUDs/forms/flows - User Management app(next.js) - Store - Client concept - More concepts cooking... Tech Stack: - Tailwind CSS 4 - ReUI components - shadcn compatible - @reactjs19 with App Router - Vite ⚡ with React Router - Next.js 15.3 - Auth.js - Supabase Auth - Radix by WorkOS - TANSTACK Table & Query - Prisma Postgres ORM - PostgreSQL - Vanilla JS/TypeScript - KtUI components - Bootstrap 5 legacy version Live preview: Purchase link:

🚀 Ship in record time with the new Metronic! The all-in-one template kit for React Vite, Next.js, and vanilla JS - trusted by 117,000+ developers. Key Features: - 10 unique app layouts - RTL/Dark mode support - 1000+ UI elements - 40+ UI components - 120+ pages - 50+ Prebuilt UI blocks CRUDs/forms/flows - User Management app(next.js) - Store - Client concept - More concepts cooking... Tech Stack: - Tailwind CSS 4 - ReUI components - shadcn compatible - @reactjs19 with App Router - Vite ⚡ with React Router - Next.js 15.3 - Auth.js - Supabase Auth - Radix by WorkOS - TANSTACK Table & Query - Prisma Postgres ORM - PostgreSQL - Vanilla JS/TypeScript - KtUI components - Bootstrap 5 legacy version Live preview: Purchase link:

KeenThemes Market

12,692 次观看 • 1 年前

🌟 Introducing Apple News! Built with JavaScript and Tailwind CSS 🚀 💣Works on Android, iOS, and Web  iOS Live Activities, Home Widgets 🎵 Podcast Player Watch support 🤏 Swipe actions like 𝕏 ↕️ Drag/sort favorites, RSC + much more! ⭐ Link to React Native code below👇

🌟 Introducing Apple News! Built with JavaScript and Tailwind CSS 🚀 💣Works on Android, iOS, and Web  iOS Live Activities, Home Widgets 🎵 Podcast Player Watch support 🤏 Swipe actions like 𝕏 ↕️ Drag/sort favorites, RSC + much more! ⭐ Link to React Native code below👇

Saúl

77,018 次观看 • 1 年前

Introducing Prism Templates ✨ Ready to use pages for your application built on shadcn and run on Next.js How it works: ◆ Go to Prism UI ◆ Download templates ◆ Run and edit your new website I have wanted to make something like this for everyone for a while, hope you like it 🪄 What is under the hood: ⚡️ Next.js 15 with App Router 🎨 Tailwind CSS for styling 📦 Shadcn UI components 🔒 TypeScript for type safety 🎯 ESLint & Biome for code formatting 🚀 Optimized for SEO 🌓 Dark mode support 📱 Responsive design 🔥 Modern and clean UI Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry Biome #opensource #buildinpublic

Introducing Prism Templates ✨ Ready to use pages for your application built on shadcn and run on Next.js How it works: ◆ Go to Prism UI ◆ Download templates ◆ Run and edit your new website I have wanted to make something like this for everyone for a while, hope you like it 🪄 What is under the hood: ⚡️ Next.js 15 with App Router 🎨 Tailwind CSS for styling 📦 Shadcn UI components 🔒 TypeScript for type safety 🎯 ESLint & Biome for code formatting 🚀 Optimized for SEO 🌓 Dark mode support 📱 Responsive design 🔥 Modern and clean UI Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry Biome #opensource #buildinpublic

CodeHagen

16,258 次观看 • 1 年前

I'm open sourcing a template I built to launch a full-stack SaaS with Stripe Payment, NextJS, Supabase and Google OAuth, in ONE SHOT. It took me some time so I decided to share this to you all. The goal is to help everyone save time when launching your next SaaS, with EVERYTHING YOU NEED. You can build anything. You can learn anything. 💪 Github Repo: Try The App: Video Link: Template Features: 🔐 Authentication with Supabase 💳 Stripe payment integration 🌓 Dark mode support 📱 Responsive design 🎨 Tailwind CSS styling 🔄 Framer Motion animations 🛡️ TypeScript support 📊 Error boundary implementation 🔍 SEO optimized

I'm open sourcing a template I built to launch a full-stack SaaS with Stripe Payment, NextJS, Supabase and Google OAuth, in ONE SHOT. It took me some time so I decided to share this to you all. The goal is to help everyone save time when launching your next SaaS, with EVERYTHING YOU NEED. You can build anything. You can learn anything. 💪 Github Repo: Try The App: Video Link: Template Features: 🔐 Authentication with Supabase 💳 Stripe payment integration 🌓 Dark mode support 📱 Responsive design 🎨 Tailwind CSS styling 🔄 Framer Motion animations 🛡️ TypeScript support 📊 Error boundary implementation 🔍 SEO optimized

Shen Sean Chen

189,715 次观看 • 1 年前

🚀 Make WeatherWise Your Daily Weather App We're excited to introduce WeatherWise Home - a brand new personalized weather dashboard that brings together everything that matters for the locations you care about. Pick from a library of widgets to build your perfect weather view. Arrange them however you like with simple drag-and-drop. - Hourly forecast - Daily forecast - Severe weather alerts - Weather outlooks - Ryan Hall, Yall Weather Intensity Score (WIS) - Latest YouTube video from Ryan - Hazcams Camera - Live radar background - Light & dark mode support Available now on: iOS: Android: Browser: And to Plus/Pro subscribers using our Windows/Mac/Linux App

WeatherWise.app

36,185 次观看 • 4 个月前

i wish i could just upload a CSV and it would automatically create a dashboard so we built this today we're launching graphed .com graphed is an AI data analytics and dashboard generator upload data into Graphed and it's gonna one shot generate a dashboard you can chat with the entire dashboard to make changes and you can click into the graph and chat with it to make updates everything you create in Graphed can easily be shared with your team by sending a link or you can download a screenshot and drop it into a Slack channel or add it to a presentation the Graphed source data can either be a CSV or a data integration data integrations allow you to create live dashboards that are constantly updating in the background we're launching with Google Analytics 4 as our first data integration but we have Shopify, Facebook ads, Google Ads, MongoDB, and hundreds more are on our product roadmap you can sign up for free at graphed .com and if you want a 40% discount code that will only be available during launch comment "graphed" below

i wish i could just upload a CSV and it would automatically create a dashboard so we built this today we're launching graphed .com graphed is an AI data analytics and dashboard generator upload data into Graphed and it's gonna one shot generate a dashboard you can chat with the entire dashboard to make changes and you can click into the graph and chat with it to make updates everything you create in Graphed can easily be shared with your team by sending a link or you can download a screenshot and drop it into a Slack channel or add it to a presentation the Graphed source data can either be a CSV or a data integration data integrations allow you to create live dashboards that are constantly updating in the background we're launching with Google Analytics 4 as our first data integration but we have Shopify, Facebook ads, Google Ads, MongoDB, and hundreds more are on our product roadmap you can sign up for free at graphed .com and if you want a 40% discount code that will only be available during launch comment "graphed" below

Cody Schneider

47,255 次观看 • 11 个月前

One prompt. One model. A complete fitness app in seconds. 🔥 I tested the new StepFun Step 3.7 Flash and gave it this prompt: "Build a beautiful single HTML fitness tracker app using Tailwind CSS, Chart.js, and Font Awesome. Dark modern theme. 4 tabs Dashboard, Workouts, Diet, Progress. Weekly charts, clickable workout images (Chest/Legs/Back/Full Body), detailed logging, meal tracking with calories & protein, and localStorage." The result? It instantly created a professional-grade Fitness Hub fully working on the first try. ✅ Live stats & weekly progress chart ✅ Clickable workout category images ✅ Add workouts (sets, reps, weight) + delete ✅ Diet logging with meal history ✅ Smooth tabs, animations, and everything saves automatically Opened the single HTML file… and it just worked perfectly. This isn’t just code generation. This is production-ready agent behavior. Step 3.7 Flash is built differently. Who else is trying it? Drop your results 👇 #StepFun #AI #Fitness #OneShotCoding StepFun

One prompt. One model. A complete fitness app in seconds. 🔥 I tested the new StepFun Step 3.7 Flash and gave it this prompt: "Build a beautiful single HTML fitness tracker app using Tailwind CSS, Chart.js, and Font Awesome. Dark modern theme. 4 tabs Dashboard, Workouts, Diet, Progress. Weekly charts, clickable workout images (Chest/Legs/Back/Full Body), detailed logging, meal tracking with calories & protein, and localStorage." The result? It instantly created a professional-grade Fitness Hub fully working on the first try. ✅ Live stats & weekly progress chart ✅ Clickable workout category images ✅ Add workouts (sets, reps, weight) + delete ✅ Diet logging with meal history ✅ Smooth tabs, animations, and everything saves automatically Opened the single HTML file… and it just worked perfectly. This isn’t just code generation. This is production-ready agent behavior. Step 3.7 Flash is built differently. Who else is trying it? Drop your results 👇 #StepFun #AI #Fitness #OneShotCoding StepFun

Md Riyazuddin

21,319 次观看 • 1 个月前

🎉 Tailkit 4.0 is here, and I couldn't be more excited! 🙌🥳 But first - Giveaway Alert! Want to get a free Tailkit Developer license? Just drop a reply and give a like or repost (totally optional, but super appreciated). The lucky winner will be announced next Tuesday (October 8th) – good luck! Can you believe it’s already been 4 years since Tailkit’s journey started? ❤️ It feels like just yesterday I launched Tailkit 1.0 as an offline standalone web app back on October 1st, 2020. I'm really attached to this project because it was launched just a few days before I became a dad 👶😍 Fast forward to today, and Tailkit has grown into a fully customizable, feature-packed online app that gives you access to: - 550+ Tailwind CSS components (fully responsive + dark mode support) - 1,750+ Code snippets for HTML, React, Vue.js, and Alpine.js - 7 Marketing & Application Templates for HTML, React, Vue.js, and Laravel (fully responsive + dark mode support) - 10 Starter Kits for HTML, HTML with Vite, React, Vue.js, Laravel, Next.js, Nuxt, Astro, Svelte and Angular - 30 Days of Unlimited Design Service with every new Team license - Exclusive deals on third-party tools and projects - Handy helper tools like Button Builder, Color Palette, and Icon Finder - 3,700+ SVG Icons from Bootstrap and Heroicons - Free lifetime updates - Email support whenever you need it And the 4.0 update is packed with even more awesome features and upgrades: - 6 new UI components (Notifications) were added in Application UI package - 20 new UI components (Image/Content Sliders++) were added in Marketing package - React version (uses Vite) is introduced for all Templates - React code snippets were improved in all packages - Astro Starter Kit was added - Remove Dark Classes (from code snippets) option was added in App - Universal Dark Mode (preview pane can default to global dark mode) option was added in App - New preview colors (fuchsia, gray) were added in App - Heroicons v2 icons were updated to v2.1.5 adding 28+ brand new icons in App - 3 new exclusive deals are now available - UI design improvements in App - Various improvements and fixes in App - All dependencies were updated in Starter Kits - All dependencies were updated in Templates - Marketing website redesigned - Color Palette tool was made available to all I’ve put over 200 hours into this update alone, and I’m beyond excited to finally share it with you. Your continued support has made this journey possible, and I’m so grateful to have you along for the ride. 🙏 Wishing you an amazing day – remember, YOU ARE AWESOME! Go build something incredible! 🚀

John Champ

10,940 次观看 • 1 年前

I've been building a music player with Next.js for fun. Here's a quick demo of how it works (it's open source!) • Demo: • Code: If you want to learn more about how it's built, here's more details ↓ I'm using Postgres (with Drizzle) to store information about the songs and playlists. Audio and image files are stored in Vercel Blob (object storage), and the URLs are then referenced in the database. For the UI, I'm using shadcn/ui (so Tailwind CSS and Radix). This made it easy to copy/paste in some nice components, like the dropdown menus. I built the entire first version of the UI in v0 and then iterated from there, feeding it my Drizzle schema as a source in the project and having it scaffold some of the boilerplate for me: I added support for keyboard navigation (using arrow keys) or vim motions (j/k to go up/down, and h/l to go between playlists and tracks). Also, space to toggle the now playing song, and / to focus the search input. The search function has a nice utility to highlight the currently searched text on the page in yellow. Then, I was exploring how to pass metadata from my application to macOS or iOS. Turns out there's an API for that – MediaSession. Web apps can share metadata about what media is playing (title, artist, album artwork) and sync play/pause/seek with system media controls. Works across modern browsers — even integrates with iOS dynamic island and shows up on lock screens: I set up my app like a PWA – it has a manifest.json file, so it can be installed to my iOS home screen or added to my dock on macOS. On iOS, it then uses the full screen height `100dvh` (dynamic viewport) and has padding on the bottom for the safe area with the `env()` CSS function. Finally, I was able to use the Vercel AI SDK in a script to clean up the metadata on audio files I downloaded from YouTube. Bonus: I even was able to dogfood the React Compiler, which helped me fix a performance bug! That's all! It's fun to make personal software:

I've been building a music player with Next.js for fun. Here's a quick demo of how it works (it's open source!) • Demo: • Code: If you want to learn more about how it's built, here's more details ↓ I'm using Postgres (with Drizzle) to store information about the songs and playlists. Audio and image files are stored in Vercel Blob (object storage), and the URLs are then referenced in the database. For the UI, I'm using shadcn/ui (so Tailwind CSS and Radix). This made it easy to copy/paste in some nice components, like the dropdown menus. I built the entire first version of the UI in v0 and then iterated from there, feeding it my Drizzle schema as a source in the project and having it scaffold some of the boilerplate for me: I added support for keyboard navigation (using arrow keys) or vim motions (j/k to go up/down, and h/l to go between playlists and tracks). Also, space to toggle the now playing song, and / to focus the search input. The search function has a nice utility to highlight the currently searched text on the page in yellow. Then, I was exploring how to pass metadata from my application to macOS or iOS. Turns out there's an API for that – MediaSession. Web apps can share metadata about what media is playing (title, artist, album artwork) and sync play/pause/seek with system media controls. Works across modern browsers — even integrates with iOS dynamic island and shows up on lock screens: I set up my app like a PWA – it has a manifest.json file, so it can be installed to my iOS home screen or added to my dock on macOS. On iOS, it then uses the full screen height `100dvh` (dynamic viewport) and has padding on the bottom for the safe area with the `env()` CSS function. Finally, I was able to use the Vercel AI SDK in a script to clean up the metadata on audio files I downloaded from YouTube. Bonus: I even was able to dogfood the React Compiler, which helped me fix a performance bug! That's all! It's fun to make personal software:

Lee Robinson

117,624 次观看 • 1 年前

Announcing RevenueCharts 🙀 100% FREE subscription analytics with an open source commitment in 2025. No SDK needed, although it is recommended (see replies). Let us explain 👇 At Superwall, we spent the last few months building infrastructure for subscription analytics, revenue charts, and webhooks. At first, we expected to sell this the same way others do, but then we realized something... The real innovation here is a transform layer that standardizes subscriber lifecycle events to an interoperable schema, and the real value here is managed infrastructure that supports a long tail of integrations. All this points to open source as the optimal solution. Developers will have the opportunity to leverage the evolving simplicity of native StoreKit, Google Billing and Stripe APIs without vendor lock-in, while the community adds support for integrations on an ad-hoc basis. We've already built the transform, infrastructure and UI layers which are available in Superwall's dashboard today. The second thing we realized is we're uniquely positioned to offer this for FREE. Already ingesting app events for billions of users per month, the incremental costs of handling subscription events are marginal. Revenue Charts are in public beta. All existing Superwall customers gained access last Friday, and new customers can sign up today. If all you're after are charts & subscription analytics, you can set up Revenue Tracking by forwarding ASC events to Superwall for free. If you add our SDK, we'll tie provided App User Ids to webhook and integration events in the future. We'll only ever charge customers who use Superwall for paywalls. Available today: Revenue, Proceeds, Refunds, Trial and Subscriber analytics, for iOS only. Coming Soon: Android, Stripe, Webhooks, Integrations, ARR, MRR, LTV, Retention & every other chart you ReallyCare about... but free.

Announcing RevenueCharts 🙀 100% FREE subscription analytics with an open source commitment in 2025. No SDK needed, although it is recommended (see replies). Let us explain 👇 At Superwall, we spent the last few months building infrastructure for subscription analytics, revenue charts, and webhooks. At first, we expected to sell this the same way others do, but then we realized something... The real innovation here is a transform layer that standardizes subscriber lifecycle events to an interoperable schema, and the real value here is managed infrastructure that supports a long tail of integrations. All this points to open source as the optimal solution. Developers will have the opportunity to leverage the evolving simplicity of native StoreKit, Google Billing and Stripe APIs without vendor lock-in, while the community adds support for integrations on an ad-hoc basis. We've already built the transform, infrastructure and UI layers which are available in Superwall's dashboard today. The second thing we realized is we're uniquely positioned to offer this for FREE. Already ingesting app events for billions of users per month, the incremental costs of handling subscription events are marginal. Revenue Charts are in public beta. All existing Superwall customers gained access last Friday, and new customers can sign up today. If all you're after are charts & subscription analytics, you can set up Revenue Tracking by forwarding ASC events to Superwall for free. If you add our SDK, we'll tie provided App User Ids to webhook and integration events in the future. We'll only ever charge customers who use Superwall for paywalls. Available today: Revenue, Proceeds, Refunds, Trial and Subscriber analytics, for iOS only. Coming Soon: Android, Stripe, Webhooks, Integrations, ARR, MRR, LTV, Retention & every other chart you ReallyCare about... but free.

Superwall

961,172 次观看 • 1 年前

CSS Trick ⚡️ (˗ˏˋ rogie ˎˊ˗ challenge edition 🤙) You can create this secret code reveal with only CSS using :has() and trig functions 🔥 .digit::hover + .digit, .digit:has(+ .digit:hover) { --active: var(--lerp-1); } :root { --lerp-1: calc(sin(50deg)); } .digit { scale: calc(var(--active) + 0.5); } There are a couple of moving parts. The first thing we can do is set up a scale. :root { --lerp-0: 1; /* === sin(90deg) */ --lerp-1: calc(sin(50deg)); --lerp-2: calc(sin(45deg)); --lerp-3: calc(sin(35deg)); --lerp-4: calc(sin(25deg)); --lerp-5: calc(sin(15deg)); } The digit styles define scale and blur. They also dictate the transition duration .digit { transition: scale calc(((1 - var(--active, 0)) + 0.2) * 1s); } When a digit is hovered, then you can set the --active custom property based on the digit position 🤙 The digit that is hovered. .digit:hover { --active: var(--lerp-0); } And the digit on either side of that hovered digit .digit:is(:hover, :focus-visible) + .digit, .digit:has(+ .digit:is(:hover, :focus-visible)) { --active: var(--lerp-1); } We can select the previous sibling using :has() and the next sibling with the sibling combinator (+) And that's it! ⭐️ That's how you create these hover scale interactions with CSS 🙌 We're jus' waiting on Firefox for :has() support. When that lands, it'll likely break the internet 😅 CodePen.IO link below! 👇

CSS Trick ⚡️ (˗ˏˋ rogie ˎˊ˗ challenge edition 🤙) You can create this secret code reveal with only CSS using :has() and trig functions 🔥 .digit::hover + .digit, .digit:has(+ .digit:hover) { --active: var(--lerp-1); } :root { --lerp-1: calc(sin(50deg)); } .digit { scale: calc(var(--active) + 0.5); } There are a couple of moving parts. The first thing we can do is set up a scale. :root { --lerp-0: 1; /* === sin(90deg) / --lerp-1: calc(sin(50deg)); --lerp-2: calc(sin(45deg)); --lerp-3: calc(sin(35deg)); --lerp-4: calc(sin(25deg)); --lerp-5: calc(sin(15deg)); } The digit styles define scale and blur. They also dictate the transition duration .digit { transition: scale calc(((1 - var(--active, 0)) + 0.2) 1s); } When a digit is hovered, then you can set the --active custom property based on the digit position 🤙 The digit that is hovered. .digit:hover { --active: var(--lerp-0); } And the digit on either side of that hovered digit .digit:is(:hover, :focus-visible) + .digit, .digit:has(+ .digit:is(:hover, :focus-visible)) { --active: var(--lerp-1); } We can select the previous sibling using :has() and the next sibling with the sibling combinator (+) And that's it! ⭐️ That's how you create these hover scale interactions with CSS 🙌 We're jus' waiting on Firefox for :has() support. When that lands, it'll likely break the internet 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

375,402 次观看 • 2 年前

I spent 1 day building something that saves you 2-4 weeks. Let me explain. Right now, if you want to deploy a single AI agent that earns money on blockchain, you need: → Wallet infrastructure (key generation, encryption, signing) → Payment integration (on-chain flows, stablecoin handling) → On-chain identity (NFT registration, metadata, URIs) → Escrow contracts (state machines, fund locking) → Monitoring dashboard (analytics, revenue tracking) That's 2-4 weeks of engineering. Minimum. And it locks out 99% of potential creators who aren't Solidity devs. So I built Bumi Agent. It takes 10 seconds. 3 fields: Name, Template, Price. 1 button: Deploy. That's it. Your AI agent is live on Celo, earning cUSD, with on-chain identity before your coffee gets cold. Here's what happens behind that 1 click: • Wallet auto-generated with AES-256-GCM encryption • Agent registered as NFT via ERC-8004 • Payment endpoint configured via x402 protocol • Agent runtime deployed with your chosen template • Revenue starts flowing in cUSD from call #1 No Solidity. No wallet setup. No payment gateway. But the real magic is what powers the agents: 8 AI models with intelligent routing: - Free tier: Claude 4.6 Sonnet, DeepSeek R1, Gemini Flash, Llama 4 Scout, Mistral Medium - Premium: GPT-4o, Gemini 2.5 Pro, Claude 4 Opus If one model fails? Auto-fallback to the next. Zero downtime. Users always get a response. And agents don't just chat they work. ERC-8183 job escrow lets clients post paid tasks: Client funds escrow → Agent delivers → Client approves → Funds release. Fully trustless. On-chain. With Celoscan links for every transaction. The part I'm most proud of: EarthPool 🌱 15% of premium revenue automatically goes to an on-chain ReFi treasury that funds environmental campaigns on Celo. AI growth funding climate action. No greenwashing — every cent is trackable on-chain. The numbers so far: → 12 agents deployed on Celo Mainnet → 52+ paid API calls processed → 7.80 cUSD revenue generated → 3 smart contracts verified on Celoscan → 8 AI models running → 85 contract tests passing → 16 API endpoints in production → 10 agent templates ready The full stack: Frontend: Next.js 16 + Tailwind v4 + Recharts → Vercel Backend: Hono + Drizzle + PostgreSQL + Redis → Railway Blockchain: Solidity 0.8.25 + Foundry + OpenZeppelin → Celo Mainnet Everything is live. Everything is open source. 🌐 📦 📊 Bumi Agent — AI agents for everyone. Built with 🌱 on Celo CeloDevs CeloPublicGoods /disclosure this post is hackathon submission req

I spent 1 day building something that saves you 2-4 weeks. Let me explain. Right now, if you want to deploy a single AI agent that earns money on blockchain, you need: → Wallet infrastructure (key generation, encryption, signing) → Payment integration (on-chain flows, stablecoin handling) → On-chain identity (NFT registration, metadata, URIs) → Escrow contracts (state machines, fund locking) → Monitoring dashboard (analytics, revenue tracking) That's 2-4 weeks of engineering. Minimum. And it locks out 99% of potential creators who aren't Solidity devs. So I built Bumi Agent. It takes 10 seconds. 3 fields: Name, Template, Price. 1 button: Deploy. That's it. Your AI agent is live on Celo, earning cUSD, with on-chain identity before your coffee gets cold. Here's what happens behind that 1 click: • Wallet auto-generated with AES-256-GCM encryption • Agent registered as NFT via ERC-8004 • Payment endpoint configured via x402 protocol • Agent runtime deployed with your chosen template • Revenue starts flowing in cUSD from call #1 No Solidity. No wallet setup. No payment gateway. But the real magic is what powers the agents: 8 AI models with intelligent routing: - Free tier: Claude 4.6 Sonnet, DeepSeek R1, Gemini Flash, Llama 4 Scout, Mistral Medium - Premium: GPT-4o, Gemini 2.5 Pro, Claude 4 Opus If one model fails? Auto-fallback to the next. Zero downtime. Users always get a response. And agents don't just chat they work. ERC-8183 job escrow lets clients post paid tasks: Client funds escrow → Agent delivers → Client approves → Funds release. Fully trustless. On-chain. With Celoscan links for every transaction. The part I'm most proud of: EarthPool 🌱 15% of premium revenue automatically goes to an on-chain ReFi treasury that funds environmental campaigns on Celo. AI growth funding climate action. No greenwashing — every cent is trackable on-chain. The numbers so far: → 12 agents deployed on Celo Mainnet → 52+ paid API calls processed → 7.80 cUSD revenue generated → 3 smart contracts verified on Celoscan → 8 AI models running → 85 contract tests passing → 16 API endpoints in production → 10 agent templates ready The full stack: Frontend: Next.js 16 + Tailwind v4 + Recharts → Vercel Backend: Hono + Drizzle + PostgreSQL + Redis → Railway Blockchain: Solidity 0.8.25 + Foundry + OpenZeppelin → Celo Mainnet Everything is live. Everything is open source. 🌐 📦 📊 Bumi Agent — AI agents for everyone. Built with 🌱 on Celo CeloDevs CeloPublicGoods /disclosure this post is hackathon submission req

Eight

15,647 次观看 • 4 个月前

😱 How to Build & Launch Your Base Mini App in 10Mins. ■ Investment: 0$ ( Free of Cost ) ■ Potential: $BASE ■ Exprience: No coding experience needed ( anyone can build ) 👀 Just watch full video & follow my simple 9 steps & Boom : Tools : 1.) Create V0 account :- 2.) Create Farcaster Account :- 3.) Create Baseapp Account :- •• Must link your farcaster account in base app Step 1 : Create the Calculator Application - Built a functional calculator with add, subtract, multiply, and divide operations - - Creat `/components/calculator.tsx` with full calculator logic and UI - - Creat `/app/page.tsx` as the main entry point - - Use React hooks (useState) for state management - - Designe with a modern dark theme using Tailwind CSS - Step 2 : Deploy the project & copy the url & save it . Step 3 : Create the Farcaster Manifest File - Created `/public/.well-known/farcaster.json` - This file tells Base about our app - Configured app metadata: My project name : My url link : { "accountAssociation": { "header": "", "payload": "", "signature": "" }, "miniapp": { "version": "1", "name": "My project name", "subtitle": "Fast & Easy Math", "description": "A simple calculator for basic arithmetic operations", "homeUrl": " "iconUrl": " "splashImageUrl": " "splashBackgroundColor": "#1a1a1a", "screenshotUrls": [ " " ], "primaryCategory": "utility", "tags": ["calculator", "math", "utility"], "tagline": "Calculate Instantly", "heroImageUrl": " "ogTitle": "Calculator", "ogDescription": "A simple calculator for basic math", "ogImageUrl": " "noindex": false } } Step 4 : Added Required Images - i attach a image , so convert that image as required ratio and attach the same image in our mini app for all 3 forms . `● icon.png` (300×300px) - A small icon of your app ● splash.png (200×200px) - A splash screen image ● screenshot.png (1284×2778px) - A screenshot showing how the app looks Step 5 Added Embed Metadata - Add `fc:miniapp` meta tag to layout.tsx metadata - Configure embed preview with: - Image URL for the 3:2 aspect ratio preview - Button configuration ("Open Calculator") - Launch frame settings - Splash image and background color Step 6: Added Farcaster Miniapp SDK Integration - Install `@farcaster/miniapp-sdk` package (automatically included) - Update `/app/page.tsx` to import and use the SDK - Call `sdk.actions.ready()` when the app loads - This is the **critical step** that tells Base to hide the splash screen and display your calculator Step 7: Update Next.js Configuration - Update `/next.config.mjs` to work with Next.js 16's Turbopack - Add `turbopack: {}` config to ensure clean builds - Remove webpack-specific configurations Step8 : •• Now for one time , click on deploy & deploy again •• Then Open Farcaster in Pc/Laptop •• Enable Developer Mode •• go to Developer section then & click on Mini app manifest tools •• then paste url ( check vidoe ) •• then click on fetch & then click on Genrate account association •• scan qr code and verify your farcaster account •• Now copy everything and paste in V0 ( add prompt ) Add this as account association •• then Reverify and Submit . Step9 : ● Download Base App : •• Create Account with email •• then connect same farcaster account ● Then Visit : •• signin with same base app email . •• and follow video process 📌📌 Join Our TG for More Alpha:-

😱 How to Build & Launch Your Base Mini App in 10Mins. ■ Investment: 0$ ( Free of Cost ) ■ Potential: $BASE ■ Exprience: No coding experience needed ( anyone can build ) 👀 Just watch full video & follow my simple 9 steps & Boom : Tools : 1.) Create V0 account :- 2.) Create Farcaster Account :- 3.) Create Baseapp Account :- •• Must link your farcaster account in base app Step 1 : Create the Calculator Application - Built a functional calculator with add, subtract, multiply, and divide operations - - Creat `/components/calculator.tsx` with full calculator logic and UI - - Creat `/app/page.tsx` as the main entry point - - Use React hooks (useState) for state management - - Designe with a modern dark theme using Tailwind CSS - Step 2 : Deploy the project & copy the url & save it . Step 3 : Create the Farcaster Manifest File - Created `/public/.well-known/farcaster.json` - This file tells Base about our app - Configured app metadata: My project name : My url link : { "accountAssociation": { "header": "", "payload": "", "signature": "" }, "miniapp": { "version": "1", "name": "My project name", "subtitle": "Fast & Easy Math", "description": "A simple calculator for basic arithmetic operations", "homeUrl": " "iconUrl": " "splashImageUrl": " "splashBackgroundColor": "#1a1a1a", "screenshotUrls": [ " " ], "primaryCategory": "utility", "tags": ["calculator", "math", "utility"], "tagline": "Calculate Instantly", "heroImageUrl": " "ogTitle": "Calculator", "ogDescription": "A simple calculator for basic math", "ogImageUrl": " "noindex": false } } Step 4 : Added Required Images - i attach a image , so convert that image as required ratio and attach the same image in our mini app for all 3 forms . `● icon.png` (300×300px) - A small icon of your app ● splash.png (200×200px) - A splash screen image ● screenshot.png (1284×2778px) - A screenshot showing how the app looks Step 5 Added Embed Metadata - Add `fc:miniapp` meta tag to layout.tsx metadata - Configure embed preview with: - Image URL for the 3:2 aspect ratio preview - Button configuration ("Open Calculator") - Launch frame settings - Splash image and background color Step 6: Added Farcaster Miniapp SDK Integration - Install `@farcaster/miniapp-sdk` package (automatically included) - Update `/app/page.tsx` to import and use the SDK - Call `sdk.actions.ready()` when the app loads - This is the critical step that tells Base to hide the splash screen and display your calculator Step 7: Update Next.js Configuration - Update `/next.config.mjs` to work with Next.js 16's Turbopack - Add `turbopack: {}` config to ensure clean builds - Remove webpack-specific configurations Step8 : •• Now for one time , click on deploy & deploy again •• Then Open Farcaster in Pc/Laptop •• Enable Developer Mode •• go to Developer section then & click on Mini app manifest tools •• then paste url ( check vidoe ) •• then click on fetch & then click on Genrate account association •• scan qr code and verify your farcaster account •• Now copy everything and paste in V0 ( add prompt ) Add this as account association •• then Reverify and Submit . Step9 : ● Download Base App : •• Create Account with email •• then connect same farcaster account ● Then Visit : •• signin with same base app email . •• and follow video process 📌📌 Join Our TG for More Alpha:-

Sanu Gupta

40,411 次观看 • 5 个月前

Anthropic released Claude Design TODAY and it's now accessible at I spent the last hour giving it a first look, and shared my thoughts and results in the video below. This is a BIG drop. This is a new design surface from Anthropic, and it changes what "AI design" means. Short version: Claude can now design. Not "describe a design." Not "generate an image of a design." Actual production work — prototypes, wireframes, high-fidelity mocks, slide decks, landing pages — editable, on-brand, and ready to hand off. Here's what stood out on first look: → Real design surfaces Prototypes, wireframes, hi-fi, and slide decks — each with templates and proper structure, not just pretty screenshots. → Comment-based edits Leave a comment on any element and Claude revises it. This is the Figma-style review loop, with the designer replaced by a model that works at 3am. → Brand design systems You can feed it your system — colors, type, components — and it actually respects it. On-brand output, not generic AI slop. → Export anywhere PDF, PowerPoint, Canva, standalone HTML. Plus a built-in handoff straight to Claude Code for engineers to implement. → Import from real tools Figma, GitHub, and captured web elements come in as inputs. Your existing work is the starting line, not the discard pile. → Collaboration Share links for view / comment / edit — the exact tier system teams already expect. What I tested on Opus 4.7: • A 5-slide deck generated from a single screenshot. Claude asked clarifying questions BEFORE generating and shipped speaker notes by default. • A landing page build. Solid first pass, real components, real layout logic. • Multiple chats running concurrently. You can parallelize design work across threads like a small team. Why this matters: PMs, founders, marketers, and non-engineers can now create designs that engineers can actually ship with production-ready output and a claude code handoff built in. The gap between "I have an idea" and "here's a working prototype with my brand applied" just collapsed to minutes. Full walkthrough, live demos, exports, and honest takes on where it breaks below. P.S. • This is an Anthropic Labs product — NOT GA yet. • Claude Design is currently webapp only (no API), and does not yet support the Analytics API, Compliance API, or cost/usage reporting. • Availability: – Default ON for Pro / Max / Team – Default OFF for Enterprise Enterprise admins can toggle it on via RBAC in console (comes with a ~$20/user initial credit).

JJ Englert

32,445 次观看 • 2 个月前

Are ecosystems really “healthy”? 🤔 That’s a question I kept asking myself while working in Web3 analytics. Because in chains like Ronin, billions flow daily across games, DeFi, and NFTs. They’re the lifeblood of an ecosystem. But here’s the truth: 👉 Surface-level numbers (like TVL or daily users) don’t always tell the full story. I’ve seen projects look “alive” on the outside — while under the hood, their ecosystem was bleeding liquidity, losing whales, or failing to retain users. So instead of just tracking pieces separately, I decided to build something that shows the whole picture. ======================== 🎮 Ronin Ecosystem Tracker App ======================== A full-stack blockchain analytics platform I built to monitor the health of the Ronin ecosystem across gaming, DeFi, and NFTs. 1️⃣ What it does • Real-time monitoring of Ronin network health (gas efficiency, wallet growth, whale flows) • Breakdowns of DeFi liquidity, NFT markets, and gaming activity in one place • Whale & holder segmentation (shrimps → whales) with retention + activation analysis • Interactive dashboards for ecosystem-wide insights 2️⃣ How I built it • Backend: FastAPI (13 REST endpoints, async, caching with Joblib) deployed on Railway → cuts API costs by 95% while serving unlimited users • Frontend: Next.js (v0 app) with dark/light themes, SWR-powered real-time fetching, and Recharts visualizations • Analytics: Streamlit + Plotly for in-depth whale tracking, liquidity flows, and retention heatmaps • Data Sources: Integrated 13 pipelines (Dune | We Are Hiring!, CoinGecko Pro) pulling 30K+ transactions daily • DevOps: Multi-platform deployment across Vercel, Railway, and Streamlit Cloud 3️⃣ Why this matters Ronin isn’t just a gaming chain anymore — it’s an evolving economy. And economies can only grow if we understand their strengths and weak points. This tool is useful for: 📍 Ecosystem teams → to see where growth is really coming from 📍 Investors → to understand holder behavior and whale tracking 📍 Builders → to track liquidity flows across games, NFTs, and DeFi 📍 Analysts → to dig deeper than surface-level metrics 🔗 Explore the apps here: • Web App: • FastAPI root: • GitHub Repo: ----------------------------------------- For me, this wasn’t just “another dashboard / web app.” It was about proving I could take blockchain data from raw → transformed → packaged → deployed as full products that anyone can interact with. That’s the power of being both a data analyst and a full-stack builder. 💯 Because in Web3, the future of analytics isn’t static charts — 👉 It’s building living, breathing products that help entire ecosystems make smarter decisions. -- This work was inspired by Analytic Sages ApostleOfFinance ⚛ Brandyn Jihoz.ron __ So here’s my question to you 👇 👉 What’s the most important signal of a healthy blockchain ecosystem to you and what did you notice about Ronin on this app? -- Gm Gm😉

Are ecosystems really “healthy”? 🤔 That’s a question I kept asking myself while working in Web3 analytics. Because in chains like Ronin, billions flow daily across games, DeFi, and NFTs. They’re the lifeblood of an ecosystem. But here’s the truth: 👉 Surface-level numbers (like TVL or daily users) don’t always tell the full story. I’ve seen projects look “alive” on the outside — while under the hood, their ecosystem was bleeding liquidity, losing whales, or failing to retain users. So instead of just tracking pieces separately, I decided to build something that shows the whole picture. ======================== 🎮 Ronin Ecosystem Tracker App ======================== A full-stack blockchain analytics platform I built to monitor the health of the Ronin ecosystem across gaming, DeFi, and NFTs. 1️⃣ What it does • Real-time monitoring of Ronin network health (gas efficiency, wallet growth, whale flows) • Breakdowns of DeFi liquidity, NFT markets, and gaming activity in one place • Whale & holder segmentation (shrimps → whales) with retention + activation analysis • Interactive dashboards for ecosystem-wide insights 2️⃣ How I built it • Backend: FastAPI (13 REST endpoints, async, caching with Joblib) deployed on Railway → cuts API costs by 95% while serving unlimited users • Frontend: Next.js (v0 app) with dark/light themes, SWR-powered real-time fetching, and Recharts visualizations • Analytics: Streamlit + Plotly for in-depth whale tracking, liquidity flows, and retention heatmaps • Data Sources: Integrated 13 pipelines (Dune | We Are Hiring!, CoinGecko Pro) pulling 30K+ transactions daily • DevOps: Multi-platform deployment across Vercel, Railway, and Streamlit Cloud 3️⃣ Why this matters Ronin isn’t just a gaming chain anymore — it’s an evolving economy. And economies can only grow if we understand their strengths and weak points. This tool is useful for: 📍 Ecosystem teams → to see where growth is really coming from 📍 Investors → to understand holder behavior and whale tracking 📍 Builders → to track liquidity flows across games, NFTs, and DeFi 📍 Analysts → to dig deeper than surface-level metrics 🔗 Explore the apps here: • Web App: • FastAPI root: • GitHub Repo: ----------------------------------------- For me, this wasn’t just “another dashboard / web app.” It was about proving I could take blockchain data from raw → transformed → packaged → deployed as full products that anyone can interact with. That’s the power of being both a data analyst and a full-stack builder. 💯 Because in Web3, the future of analytics isn’t static charts — 👉 It’s building living, breathing products that help entire ecosystems make smarter decisions. -- This work was inspired by Analytic Sages ApostleOfFinance ⚛ Brandyn Jihoz.ron __ So here’s my question to you 👇 👉 What’s the most important signal of a healthy blockchain ecosystem to you and what did you notice about Ronin on this app? -- Gm Gm😉

Jo$h

11,880 次观看 • 9 个月前

HERMES AGENT CAN CREATE VIDEOS. NOT WITH AN API CALL. IT WRITES THE CODE, RENDERS THE SCENES, AND STITCHES THEM INTO AN MP4. the video attached to this post was generated by Hermes Agent using manim-video skill. three bundled video skills most people skip: 1. MANIM VIDEO 3Blue1Brown-style animated explainers. algorithm visualizations, equation derivations, architecture diagrams, data stories. the pipeline: PLAN → CODE → RENDER → STITCH → AUDIO → REVIEW Hermes writes a plan.md with narrative arc and scene list. then codes a Python script with one class per scene. renders each scene through Manim CE. stitches clips with ffmpeg. adds voiceover if you want it. requirements: → Python 3.10+ → Manim Community Edition v0.20+ → LaTeX (texlive-full) → ffmpeg → no GPU needed draft quality: manim -ql production quality: manim -qh 2. HYPERFRAMES complement to manim-video. use manim for math and algorithms. use hyperframes for everything else: motion graphics, talking-head with captions, product tours, social overlays, shader transitions. HTML is the source of truth. GSAP timeline for animation. CSS for appearance. HyperFrames engine captures frame-by-frame and encodes to MP4 or WebM with ffmpeg. 3. KANBAN VIDEO ORCHESTRATOR this is the advanced play. a multi-agent video production pipeline backed by Hermes Kanban. it creates profiles for each video role. a director profile decomposes the project into kanban tasks. renderer profiles pick up scenes and produce them. the orchestrator decides which skill fits each scene: manim-video for math, hyperframes for motion graphics, p5js for generative art, blender-mcp for 3D, ascii-video for terminal aesthetics. one prompt. multiple agents. one final video. HOW TO USE: enable any of these: /skills search manim /skills search hyperframes /skills search video or ask directly: "create a 60-second explainer video about how the self-improvement loop works in Hermes Agent. use manim style. dark background, amber and teal accents." Hermes writes the plan, codes every scene, renders, stitches, and delivers an MP4. you review and publish. comment MANIM and I'll send you the exact prompt I used to generate the video in this post. full Hermes NIGHT MODE WORKFLOW 👇

YanXbt

32,293 次观看 • 28 天前