added references guide (#250)

* added video to page

* sidebar title

* sidebar title

* changed name

Author: soheimam

docs/docs.json

@@ -488,6 +488,12 @@
                 ]
               }
             ]
+          },
+          {
+            "group": "Resources",
+            "pages": [
+              "mini-apps/resources/resources"
+            ]
           }
         ]
       },

docs/mini-apps/resources/resources.mdx

@@ -0,0 +1,145 @@
+---
+title: "Mini App Development Resources"
+description: "Ready-to-use templates, tools, and tutorials to accelerate your Mini App development on Base"
+sidebarTitle: "Resources"
+---
+
+## Vibe Code Templates
+
+These interactive templates provide complete, working examples that you can fork and customize for your own Mini App projects.
+
+<CardGroup cols={2}>
+<Card title="Powerpuff Girl Personality Generator" icon="sparkles" href="https://v0.app/chat/mini-open-ai-og-nb3Y1N9BFAj">
+  An engaging personality quiz that analyzes users' Farcaster activity to determine their Powerpuff Girl personality match.
+</Card>
+
+<Card title="Mini App Base Pay" icon="credit-card" href="https://v0.app/chat/mini-app-base-pay-u0ZNsSt5Yjb">
+  A streamlined payment interface demonstrating USD transactions through the Farcaster Mini App SDK.
+</Card>
+</CardGroup>
+
+### Powerpuff Girl Personality Generator
+
+This interactive template demonstrates how to build an engaging user experience by combining social data analysis with AI-powered personality matching.
+
+**Key technologies implemented:**
+- **Redis** for real-time notifications and caching
+- **Neynar API** to query and analyze user's top Farcaster casts
+- **OpenAI API** for intelligent character personality matching
+
+<Tip>
+This template showcases effective data integration patterns for social-based Mini Apps.
+</Tip>
+
+### Mini App Base Pay
+
+A clean, functional payment interface that demonstrates the core payment flows available in Farcaster Mini Apps.
+
+**Key technologies implemented:**
+- **Base Pay** for secure payment processing
+- **tokenSend action** from the Mini App SDK
+- **Flexible recipient configuration** supporting both addresses and FIDs
+
+<Note>
+This template provides a solid foundation for any Mini App requiring payment functionality.
+</Note>
+
+## Video Tutorials
+
+<Card title="Learn Manifest Signing with Farcaster Tools" icon="play" href="https://youtu.be/GlIxpp9323w?feature=shared">
+  Step-by-step video tutorial demonstrating proper Mini App manifest signing using Farcaster development tools.
+</Card>
+
+**Tutorial covers:**
+- Manifest signing process and security requirements
+- Farcaster tools integration and setup
+- Complete implementation walkthrough with best practices
+
+## GitHub Templates
+
+Production-ready code repositories that you can clone and deploy immediately.
+
+<CardGroup cols={2}>
+<Card title="My Mini Zora" icon="github" href="https://github.com/base/demos/tree/master/minikit/my-mini-zora">
+  A personalized showcase creating custom collages of users' token holdings as dynamic embeds.
+</Card>
+
+<Card title="MiniKit Quick Auth" icon="key" href="https://github.com/coinbase/onchainkit/tree/main/examples/minikit-example">
+  Essential authentication patterns and MiniKit integration starter template.
+</Card>
+</CardGroup>
+
+### My Mini Zora
+
+Transform user token holdings into shareable, visual experiences with this comprehensive NFT showcase template.
+
+**Key technologies implemented:**
+- **Zora API** for comprehensive token data retrieval
+- **Dynamic embed generation** for personalized social sharing
+- **Advanced token analysis** for user-specific portfolio insights
+
+<Check>
+Perfect starting point for Mini Apps requiring  dynamic social sharing capabilities & using the zora api.
+</Check>
+
+### MiniKit Quick Auth
+
+Master the fundamentals of Mini App authentication with this essential starter template.
+
+**Key technologies implemented:**
+- **MiniKit Quick Auth** for streamlined user authentication
+- **Core Mini App SDK** integration patterns
+- **Complete authentication flow** demonstrations and best practices
+
+
+
+## Getting Started
+
+<Steps>
+<Step title="Choose your template">
+  Select the template that best matches your Mini App concept and requirements.
+</Step>
+
+<Step title="Fork or clone">
+  Use the provided links to fork the interactive templates or clone the GitHub repositories.
+</Step>
+
+<Step title="Customize and deploy">
+  Modify the templates to match your specific use case and deploy using your preferred hosting solution.
+</Step>
+</Steps>
+
+### More Mini App Resources
+
+<CardGroup cols={2}>
+  <Card
+    title="Viral Mini Apps"
+    icon="sparkles"
+    href="/mini-apps/growth/build-viral-mini-apps"
+  >
+    Strategies and examples for building highly shareable, viral mini apps.
+  </Card>
+  <Card
+    title="Data Driven Growth"
+    icon="chart-bar"
+    href="/mini-apps/growth/data-driven-growth"
+  >
+    Learn how to use analytics and Base.dev to optimize your mini app's growth.
+  </Card>
+  <Card
+    title="Optimize Onboarding"
+    icon="user-plus"
+    href="/mini-apps/growth/optimize-onboarding"
+  >
+    Best practices for onboarding users and maximizing retention.
+  </Card>
+  <Card
+    title="Design & UX Best Practices"
+    icon="paint-brush"
+    href="/mini-apps/design-ux/best-practices"
+  >
+    Guidelines for creating delightful, user-friendly mini app experiences.
+  </Card>
+</CardGroup>
+
+