<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Jose Toscano</title>
    <description>The latest articles on DEV Community by Jose Toscano (@josectoscano).</description>
    <link>https://dev.to/josectoscano</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1755541%2F7c403e0e-bba7-4a24-9b2f-52e279b0e332.jpg</url>
      <title>DEV Community: Jose Toscano</title>
      <link>https://dev.to/josectoscano</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/josectoscano"/>
    <language>en</language>
    <item>
      <title>Cursor, but for Document Vibe-Editing</title>
      <dc:creator>Jose Toscano</dc:creator>
      <pubDate>Fri, 21 Mar 2025 21:28:32 +0000</pubDate>
      <link>https://dev.to/josectoscano/cursor-but-for-document-vibe-editing-48pl</link>
      <guid>https://dev.to/josectoscano/cursor-but-for-document-vibe-editing-48pl</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/kendoreact"&gt;KendoReact Free Components Challenge&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  AI-Powered Document "Vibe" Editor
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;SmartDocs&lt;/strong&gt; is an intelligent document editor that combines the power of &lt;strong&gt;AI&lt;/strong&gt; with &lt;strong&gt;KendoReact's&lt;/strong&gt; UI components to create a seamless writing experience. &lt;br&gt;
Just like &lt;strong&gt;Cursor&lt;/strong&gt; enables &lt;em&gt;Vibe Coding&lt;/em&gt;, &lt;strong&gt;SmartDocs&lt;/strong&gt; brings you &lt;em&gt;Vibe Writing&lt;/em&gt; - a flow state where you and &lt;strong&gt;AI&lt;/strong&gt; work together naturally, making document creation feel effortless and enjoyable. &lt;/p&gt;

&lt;p&gt;Think of it as having an AI writing assistant that understands your document's context and helps you create, edit, and enhance content while you're just vibing with your work.&lt;/p&gt;

&lt;h3&gt;
  
  
  Demo
&lt;/h3&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/GRh8uTr8nMY"&gt;
&lt;/iframe&gt;
&lt;br&gt;
&lt;code&gt;(Make sure to watch in HD for full quality.)&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;🔗 &lt;a href="https://smart-docs-mu.vercel.app" rel="noopener noreferrer"&gt;Live Demo&lt;/a&gt;&lt;br&gt;
🔗 &lt;a href="https://github.com/JoseCToscano/smart-docs" rel="noopener noreferrer"&gt;GitHub Repository&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuikfqybf6v7237nj3y24.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuikfqybf6v7237nj3y24.png" alt="Editor preview" width="800" height="472"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  KendoReact Experience
&lt;/h2&gt;

&lt;p&gt;SmartDocs leverages KendoReact free components to deliver a sleek, professional, and intuitive user experience:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;AppBar&lt;/strong&gt; – Used as the main navigation&lt;br&gt;
&lt;strong&gt;Avatar&lt;/strong&gt; – Displays the user profile in the header&lt;br&gt;
&lt;strong&gt;Button&lt;/strong&gt; – Drives interactions across the UI&lt;br&gt;
&lt;strong&gt;Card&lt;/strong&gt; – Showcases document previews&lt;br&gt;
&lt;strong&gt;Dialog&lt;/strong&gt; – For File upload Modal&lt;br&gt;
&lt;strong&gt;DropDownList&lt;/strong&gt; – Allows users to select and configure document's page and format&lt;br&gt;
&lt;strong&gt;Input&lt;/strong&gt; – Used for titles and siemple text fields&lt;br&gt;
&lt;strong&gt;NumericTextBox&lt;/strong&gt; - Used for page settings configuration&lt;br&gt;
&lt;strong&gt;TextArea&lt;/strong&gt; - Used for AI chatbot&lt;br&gt;
&lt;strong&gt;Popup&lt;/strong&gt; – Powers context menus like user's dropdown and page configuration&lt;br&gt;
&lt;strong&gt;Progress Bar&lt;/strong&gt; - To track how the AI process each request&lt;br&gt;
&lt;strong&gt;Tooltip&lt;/strong&gt; – Provides helpful context and in-app guidance&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Pro tip here: To speed up development, I leveraged Cursor’s MCP capabilities to integrate these components efficiently. In many cases, simply pasting the KendoReact component documentation URL was enough—my AI agent understood exactly how to implement it in context, dramatically reducing integration time.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Additionally, I used a premium KendoReact component for the main document editor, providing a seamless and powerful writing experience at the core of SmartDocs.&lt;/p&gt;

&lt;p&gt;The free components provided by KendoReact were instrumental in building a professional-grade application. The consistent design language and out-of-the-box functionality allowed us to focus on the core features while maintaining a polished look.&lt;/p&gt;

&lt;h3&gt;
  
  
  AIm to Impress
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;SmartDocs&lt;/strong&gt; integrates &lt;strong&gt;Anthropic’s AI models&lt;/strong&gt; to deliver a writing experience that feels intuitive, helpful, and totally in sync with the user’s flow:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Context-Aware Assistance:&lt;/strong&gt; The AI understands your document’s structure and content to give relevant, in-the-moment suggestions.&lt;br&gt;
&lt;strong&gt;Flow State Friendly:&lt;/strong&gt; It helps you write faster without breaking your rhythm—just type and vibe.&lt;br&gt;
&lt;strong&gt;Smart Formatting:&lt;/strong&gt; From headings to tone, the AI makes formatting feel effortless.&lt;/p&gt;

&lt;p&gt;The GenAI features are built right into the interface; no context switching, no extra windows. It's just a natural, real-time collaboration with AI.&lt;/p&gt;

&lt;p&gt;This fits perfectly in the Generative AI category, as the core of the product revolves around generating, editing, and adapting content using AI. It’s not just an add-on—it’s the engine that powers the whole experience.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>kendoreactchallenge</category>
      <category>react</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Capture Your Best Ideas Anytime, Anywhere with Brain Dump: The AI-Powered Writing Assistant for Effortless Content Creation!</title>
      <dc:creator>Jose Toscano</dc:creator>
      <pubDate>Sun, 26 Jan 2025 14:05:57 +0000</pubDate>
      <link>https://dev.to/josectoscano/capture-your-best-ideas-anytime-anywhere-with-brain-dump-the-ai-powered-writing-assistant-for-1glo</link>
      <guid>https://dev.to/josectoscano/capture-your-best-ideas-anytime-anywhere-with-brain-dump-the-ai-powered-writing-assistant-for-1glo</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://srv.buysellads.com/ads/long/x/T6EK3TDFTTTTTT6WWB6C5TTTTTTGBRAPKATTTTTTWTFVT7YTTTTTTKPPKJFH4LJNPYYNNSZL2QLCE2DPPQVCEI45GHBT" rel="noopener noreferrer"&gt;Agent.ai&lt;/a&gt; Challenge: Full-Stack Agent (&lt;a href="https://dev.to/challenges/agentai"&gt;See Details&lt;/a&gt;)&lt;/em&gt;&lt;br&gt;
&lt;strong&gt;Overview&lt;/strong&gt;&lt;br&gt;
It all started with a simple conversation with my non-technical business partner:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"You know... I get random ideas and thoughts at the most unexpected times during the day. I wish I could just send them as voice notes and later use them to write my blog posts. But it's tough to find the time to sit down and go through all of them."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;This sparked an idea—to create an AI-powered writing assistant that captures these spontaneous thoughts and transforms them into structured content, helping busy professionals stay consistent with their content creation efforts.&lt;/p&gt;
&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;I developed a full-stack &lt;em&gt;multi-&lt;/em&gt; AI agent that seamlessly integrates with Telegram and Agent.ai to capture, process, and draft LinkedIn posts based on voice notes.&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/m_woXY63EVM"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why It Matters&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;One of the things I love about this solution is how incredibly convenient it is. I genuinely see myself using it over the next few months because of its effortless accessibility. With just a simple voice note, I can capture my thoughts anytime, anywhere, and have an AI agent ready to process them—whether I’m commuting, taking a walk, or in between meetings.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The best part? No need to log into any extra dashboards or complicated tools. Although Agent.ai’s dashboards provide valuable insights and controls, the ability to manage everything directly from my phone via Telegram makes it a game-changer for productivity on the go.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Voice Note Capture via Telegram Chatbot:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;We understand that the best ideas can strike at any moment. That’s why we’ve built a tool that lets users capture them effortlessly through a Telegram bot. Simply by sending a voice note, and it will be transcribed and securely stored as an “idea” for future content. Behind the scenes, a webhook triggers an Agent.ai process to analyze and categorize the user's thoughts, ensuring they’re ready when they need them.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;AI-Powered Writing Profile:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Your unique voice matters, and our AI ensures it shines through. Brain Dump continuously refines your writing style by analyzing your past LinkedIn posts and transcribed voice notes. It learns your tone, favorite phrases, and writing patterns to generate content that truly reflects your personality and professional brand.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Automated LinkedIn Post Drafting:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;When the user is ready to post, they can request the AI agent to generate a draft based on stored ideas, again, all through a simple text or voice message. &lt;/p&gt;

&lt;p&gt;The agent will then go through the user's profile and previous ideas to produce a well-structured draft using the user's tone of voice, preferred topics, and content style.&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;To bring Brain Dump to life, I utilized a set of specialized AI Agents, each playing a crucial role in processing and generating content seamlessly. Below are the key agents used in the system, along with their respective functions:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsonlegnh0h8tpfpu0l9h.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsonlegnh0h8tpfpu0l9h.png" alt="Flow chart of agents implementation" width="800" height="692"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://agent.ai/agent/f2kixez08gxuystx" rel="noopener noreferrer"&gt;Orchestrator Agent&lt;/a&gt;&lt;br&gt;
The brain behind Brain Dump, this agent is responsible for processing all incoming inputs from the Telegram chatbot. It analyzes whether the message is a new idea, a request for a summary, or an instruction to generate a post, and then routes it to the appropriate AI agent for further action.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://agent.ai/agent/0z5q0puc56m4ke8u" rel="noopener noreferrer"&gt;Summarizer Agent&lt;/a&gt;&lt;br&gt;
This agent provides users with concise and meaningful summaries of their stored ideas. Whether they need a quick recap of recent thoughts or an overview of specific topics, the Summarizer Agent extracts key insights to keep their content organized and accessible.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://agent.ai/agent/vcqv5kapj1hgiu1y" rel="noopener noreferrer"&gt;Linkedin Master&lt;/a&gt;&lt;br&gt;
A specialized AI agent that focuses on analyzing the user’s LinkedIn activity, including past posts and writing patterns. It helps refine the user's writing profile, ensuring that generated content matches their tone, style, and frequently used phrases.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://agent.ai/agent/lqwttq6na1xizp5f" rel="noopener noreferrer"&gt;Simple LLM Fallback&lt;/a&gt;&lt;br&gt;
Acting as a safety net, this agent ensures smooth handling of unexpected queries or when other agents are unable to provide a precise response. It helps maintain a seamless user experience by offering relevant suggestions and fallback responses when needed.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Telegram Chatbot API Gateway&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In addition to the AI Agents, I developed a Telegram chatbot, which serves as the main interface for users to interact with Brain Dump. It acts as an API Gateway, forwarding user prompts—whether as text or voice notes—directly to the AI agents for processing.&lt;/p&gt;

&lt;p&gt;You can test the implementation here 👉: t.me/YourBrainDumpBot&lt;/p&gt;

&lt;p&gt;You can explore the chatbot’s implementation here:&lt;br&gt;
👉 GitHub Repository &lt;br&gt;
&lt;/p&gt;
&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.dev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/JoseCToscano" rel="noopener noreferrer"&gt;
        JoseCToscano
      &lt;/a&gt; / &lt;a href="https://github.com/JoseCToscano/braindump" rel="noopener noreferrer"&gt;
        braindump
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      Simple Telegram Chatbot to send random voice notes with ideas for LinkedIn Posts
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;p&gt;&lt;a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/d0f44efadf711ef04fb8d1c185d80c712aa28044dc432beaa7ef7f02462a22d6/68747470733a2f2f6234736c7573646575372e7566732e73682f662f577472624b535162784f6537506e57503972434d786d464c346f494b57763033526941654777665a5654425868733155"&gt;&lt;img src="https://camo.githubusercontent.com/d0f44efadf711ef04fb8d1c185d80c712aa28044dc432beaa7ef7f02462a22d6/68747470733a2f2f6234736c7573646575372e7566732e73682f662f577472624b535162784f6537506e57503972434d786d464c346f494b57763033526941654777665a5654425868733155" alt="BRAINDUMP Image"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h1 class="heading-element"&gt;🚀 Brain Dump Telegram Chatbot&lt;/h1&gt;
&lt;/div&gt;
&lt;p&gt;Brain Dump is a Telegram chatbot designed to help users capture their ideas effortlessly and turn them into engaging LinkedIn posts with the power of AI. Whether you’re on the go or brainstorming at your desk, simply send a voice note or text message, and let the AI do the rest!&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;🛠️ How It Works&lt;/h2&gt;
&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Capture Ideas:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Send a voice note or text message to the chatbot via Telegram.&lt;/li&gt;
&lt;li&gt;Your input is forwarded to an AI Orchestrator for processing.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Processing &amp;amp; Categorization:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;The orchestrator determines whether the input is
&lt;ul&gt;
&lt;li&gt;A new idea to be stored.&lt;/li&gt;
&lt;li&gt;A request to summarize existing ideas.&lt;/li&gt;
&lt;li&gt;A command to generate a LinkedIn post.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;It routes the request to the appropriate AI Agent for further action.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;AI-Driven Insights:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Specialized AI agents analyze your past LinkedIn posts and voice notes to refine your writing style.&lt;/li&gt;
&lt;li&gt;When you're ready, Brain Dump generates a…&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/JoseCToscano/braindump" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;


&lt;p&gt;&lt;strong&gt;How It Works&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Idea Capture:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The user sends a voice note via Telegram.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Processing &amp;amp; Orchestration:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The Telegram bot forwards the message to an AI Orchestrator via a webhook.&lt;br&gt;
The orchestrator analyzes the input and determines the appropriate next step.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Specialized AI Agents:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Depending on the input, different AI agents are triggered to:&lt;br&gt;
Process and categorize new ideas.&lt;br&gt;
Analyze existing ideas for insights.&lt;br&gt;
Generate an initial draft if enough content has been collected.&lt;br&gt;
Continuous Learning:&lt;/p&gt;

&lt;p&gt;The AI refines the user's writing profile by analyzing voice notes and past LinkedIn posts, ensuring content stays aligned with their style.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Content Generation:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;When the user requests a post, the AI drafts it based on their tone, writing patterns, and key themes.&lt;/p&gt;

&lt;h2&gt;
  
  
  Agent.ai Experience
&lt;/h2&gt;

&lt;p&gt;I wasn't quite sure where to start, so I decided to dive in from scratch and explore everything. To my surprise, building AI Agents was way easier than I expected. Based on my past experience, I assumed I’d have to deal with API keys, set up Python integrations, and rely on APIs or SDKs to connect with AI models. However, the Builder made it as simple as selecting the features I needed, prompting for user inputs, and seamlessly passing them to other actions. Calling AI models was incredibly straightforward.&lt;/p&gt;

&lt;p&gt;Once I figured out my application's needs, it was just a matter of sitting down and building it. I opted to use multiple AI Agents instead of one large agent to simplify debugging and allow for easier feature expansion down the line.&lt;/p&gt;

&lt;p&gt;Getting everything to work via webhooks did take some effort, and I encountered a few challenges along the way. However, the Agent.ai team was super responsive and supportive, helping me resolve issues quickly.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;PRO TIP HERE:&lt;/strong&gt; When setting up a webhook, start by testing it with minimal or no user inputs. Once you confirm it's working correctly, gradually add inputs one at a time, testing each step along the way. Initially, I tried adding everything at once and testing the trigger, but I encountered several issues that needed to be fixed on the server. Taking a step-by-step approach can help prevent unexpected errors and streamline the setup process.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;One of the things I love most is that you don’t need to know how to code to build AI Agents. I’m confident my non-technical co-founder will be thrilled with how intuitive it is. That said, having some coding experience really opens up possibilities for creating awesome features like Brain Dump and integrating with various services.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Whats next?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;As Brain Dump continues to evolve, the focus remains on refining its ability to capture authentic tone and maintain consistency with the user's unique professional branding. Striking the right balance between automation and user control has been key to ensuring a seamless experience. Looking ahead, future improvements include expanding to other platforms like Twitter and Medium, incorporating sentiment analysis to better capture emotions, and providing context-aware recommendations based on industry trends. &lt;/p&gt;

&lt;p&gt;Ultimately, Brain Dump empowers busy entrepreneurs and professionals by turning spontaneous ideas into engaging content effortlessly, helping them stay consistent and boost their online presence. &lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>agentaichallenge</category>
      <category>ai</category>
      <category>machinelearning</category>
    </item>
    <item>
      <title>Life in Dots: A Visual Journey of Time and Transformation</title>
      <dc:creator>Jose Toscano</dc:creator>
      <pubDate>Mon, 20 Jan 2025 02:50:22 +0000</pubDate>
      <link>https://dev.to/josectoscano/life-in-dots-a-visual-journey-of-time-and-transformation-118c</link>
      <guid>https://dev.to/josectoscano/life-in-dots-a-visual-journey-of-time-and-transformation-118c</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/github"&gt;GitHub Copilot Challenge &lt;/a&gt;: Transitions and Transformations&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;Life in Dots: A Visual Journey of Time and Transformation&lt;/p&gt;

&lt;p&gt;In the hustle of daily life, it’s easy to lose sight of the fact that our time here is finite. We get caught up in work, responsibilities, and distractions, often forgetting that each passing week is a piece of a much larger picture. Life in Dots is a creative tool that offers a gentle yet profound reminder of our journey through life, helping us visualize the precious time we have and encouraging us to make the most of it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;Try the demo here: &lt;a href="https://www.dotsjourney.me/" rel="noopener noreferrer"&gt;https://www.dotsjourney.me/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/69CaEKeT5-w"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Embracing Transitions and Transformations&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Life is a series of transitions and transformations. From childhood to adulthood, from moments of joy to periods of struggle, each phase brings its own lessons and opportunities. This app serves as a visual representation of these stages—each dot symbolizing a week of our lives. It allows us to step back and see our journey from a broader perspective, acknowledging where we've been, where we are, and where we’re headed.&lt;/p&gt;

&lt;p&gt;The beauty of change lies in its inevitability. We cannot stop time, but we can choose how we engage with it. Life in Dots invites us to embrace the transitions of life with mindfulness and purpose, celebrating growth rather than fearing it.&lt;/p&gt;

&lt;p&gt;A Simple Habit for a Complex Life&lt;/p&gt;

&lt;p&gt;Tracking every single day of our lives can feel overwhelming. Between work deadlines, social commitments, and personal goals, it’s easy to feel like there’s no room left for reflection. But what if we took just one day a week—perhaps Sundays—to look back and set light intentions for the future?&lt;/p&gt;

&lt;p&gt;This app is designed with simplicity in mind. Every week, you can hover over a dot to reflect on the past seven days, reminding yourself of the highs and lows, the lessons learned, and the moments cherished. Clicking on a dot allows you to plan lightly for the upcoming week—whether it’s reconnecting with loved ones, taking a moment for self-care, or setting a small personal goal.&lt;/p&gt;

&lt;p&gt;By making this a weekly habit, Life in Dots helps us stay connected with our journey without the burden of daily tracking. It becomes a ritual—an opportunity to pause, breathe, and appreciate the present moment while preparing for the future with intention.&lt;/p&gt;

&lt;p&gt;A Tool for New Beginnings&lt;/p&gt;

&lt;p&gt;Every new week is an opportunity for a fresh start. Whether you’re embarking on a new career, forming healthier habits, or simply striving to be more present in your relationships, Life in Dots serves as a gentle guide to help you navigate your journey.&lt;/p&gt;

&lt;p&gt;With a minimalist design and an intuitive interface, the app provides clarity and perspective. It’s not just about productivity; it’s about aligning our actions with our values and ensuring that, amidst the chaos of life, we don’t lose sight of what truly matters.&lt;/p&gt;

&lt;h2&gt;
  
  
  Repo
&lt;/h2&gt;

&lt;p&gt;Checkout the full code for it here:&lt;br&gt;
&lt;a href="https://github.com/JoseCToscano/life-dots" rel="noopener noreferrer"&gt;https://github.com/JoseCToscano/life-dots&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Copilot Experience
&lt;/h2&gt;

&lt;p&gt;I love leveraging powerful tools that make me a super-fast developer. My approach is to use project scaffolds and robust CLI tools like ShadCN to quickly add components and accelerate development. GitHub Copilot perfectly complemented my workflow by assisting with debugging, adding new pages, and refactoring code efficiently.&lt;/p&gt;

&lt;p&gt;Initially, I started by saving journal entries and reminders in local storage, but as the project evolved, I consulted Copilot's chat feature to help me design a Prisma schema and transition everything to a database for better persistence. The guidance provided by Copilot made the migration seamless and well-structured.&lt;/p&gt;

&lt;p&gt;Authentication was another area where Copilot proved invaluable. I initially implemented NextAuth but later decided to switch to Clerk for a smoother user experience. Copilot made this transition effortless by suggesting the necessary changes and even assisting with Clerk's API integration.&lt;/p&gt;

&lt;p&gt;The speed and efficiency with which I can code with Copilot's assistance are incredible. From writing new components and pages to offering insightful suggestions for best practices, Copilot has truly amplified my productivity and allowed me to focus on building impactful features rather than getting bogged down in repetitive tasks.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Using GitHub Copilot has been an invaluable experience, enabling me to build things faster and more efficiently. It has empowered me to focus on what truly matters—creating meaningful and impactful tools like Life in Dots. With Copilot's assistance in debugging, refactoring, and even guiding major architectural decisions like transitioning from local storage to a database, I was able to turn an idea into a fully functional tool that helps people reflect on their lives and plan with intention.&lt;/p&gt;

&lt;p&gt;Life in Dots is more than just a visual productivity app; it’s a spiritual reflection on the passing of time and a reminder to live with purpose. In a world filled with noise and distractions, it invites us to step back, embrace life's transitions, and make the most of every moment. The speed at which I could iterate with Copilot allowed me to bring this concept to life quickly—turning a simple vision into a life-changing tool that encourages users to pause, reflect, and turn each week into a meaningful stepping stone on their journey.&lt;/p&gt;

&lt;p&gt;Because in the end, our life is nothing but a beautiful constellation of moments—each dot a gentle reminder that our time here is precious.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>githubchallenge</category>
      <category>webdev</category>
      <category>ai</category>
    </item>
    <item>
      <title>Neon Meets `create-t3-app`: The PostgreSQL Solution for Modern Developers</title>
      <dc:creator>Jose Toscano</dc:creator>
      <pubDate>Sun, 01 Sep 2024 20:45:11 +0000</pubDate>
      <link>https://dev.to/josectoscano/neon-meets-create-t3-app-the-postgresql-solution-for-modern-developers-4273</link>
      <guid>https://dev.to/josectoscano/neon-meets-create-t3-app-the-postgresql-solution-for-modern-developers-4273</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/neon"&gt;Neon Open Source Starter Kit Challenge &lt;/a&gt;: Ultimate Starter Kit&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  My Kit
&lt;/h2&gt;

&lt;p&gt;As developers, we understand the importance of having a reliable and flexible starter kit to kickstart our projects. The &lt;code&gt;create-t3-app&lt;/code&gt; &lt;a href="https://create.t3.gg/" rel="noopener noreferrer"&gt;CLI tool&lt;/a&gt; has become a beloved choice for many in the developer community, boasting over &lt;strong&gt;24.7k&lt;/strong&gt; stars on &lt;strong&gt;GitHub&lt;/strong&gt;. This popularity is a testament to its effectiveness in helping developers build full-stack TypeScript applications with ease. Instead of starting from scratch to create a new CLI tool, it makes perfect sense to build on top of such a well-established and widely adopted project. &lt;/p&gt;

&lt;p&gt;That's why we're excited to introduce a powerful enhancement to &lt;code&gt;create-t3-app&lt;/code&gt;—one that preserves its versatility while integrating &lt;strong&gt;Neon&lt;/strong&gt; as a robust PostgreSQL database provider, offering developers an additional, seamless solution for serverless PostgreSQL.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkltmgh612uit8i9g2lao.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkltmgh612uit8i9g2lao.gif" alt="create neon-t3 GIF" width="640" height="280"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Why We Forked create-t3-app
&lt;/h3&gt;

&lt;p&gt;The open-source nature of &lt;code&gt;create-t3-app&lt;/code&gt; allows it to evolve alongside the needs of the community. Our team saw an opportunity to build upon this amazing foundation by integrating Neon as a database provider. The goal of our fork was not to diverge from the original project but to contribute an enhancement that we hope will eventually be merged back into the main repository.&lt;/p&gt;

&lt;h3&gt;
  
  
  Two-Part Challenge Submission
&lt;/h3&gt;

&lt;p&gt;Our challenge submission for the &lt;em&gt;&lt;em&gt;Neon Open Source Starter Kit Challenge&lt;/em&gt;&lt;/em&gt; consists of two distinct parts:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;code&gt;create-neon-t3&lt;/code&gt; CLI alternative&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;We created a fork of the original &lt;code&gt;create-t3-app&lt;/code&gt; called &lt;code&gt;create-neon-t3&lt;/code&gt;, which sets &lt;strong&gt;Neon&lt;/strong&gt; as the default database provider. This fork is accessible as an npm package through:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm create neon-t3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;This version is tailored for developers who already know they'll be using a PostgreSQL database in a serverless environment. It retains all the original flexibility of &lt;code&gt;create-t3-app&lt;/code&gt;, allowing you to scaffold your Next.js project with built-in authorization and type safety (while optional, &lt;em&gt;tRPC&lt;/em&gt; hugely recommended) while defaulting to &lt;em&gt;Neon&lt;/em&gt; as the database provider.&lt;/p&gt;

&lt;p&gt;2.A &lt;strong&gt;Pull Request&lt;/strong&gt; to the Original Project&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;The second part of our submission is a pull request to the original &lt;code&gt;create-t3-app&lt;/code&gt; project. Our aim is to contribute this enhancement back to the community, ensuring that the tool continues to serve the evolving needs of developers.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The original &lt;code&gt;create-t3-app&lt;/code&gt; offered PlanetScale as the primary database option for MySQL users. However, with PlanetScale's recent deprecation of their free tier, the community needs a strong alternative—especially for those who prefer to build on PostgreSQL. Neon, designed for serverless environments and with its very generous free tier, is the perfect fit for this role.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Check out the PR here:&lt;/p&gt;


&lt;div class="ltag_github-liquid-tag"&gt;
  &lt;h1&gt;
    &lt;a href="https://github.com/t3-oss/create-t3-app/pull/1976" rel="noopener noreferrer"&gt;
      &lt;img class="github-logo" alt="GitHub logo" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.dev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg"&gt;
      &lt;span class="issue-title"&gt;
        feat: Neon as database Provider
      &lt;/span&gt;
      &lt;span class="issue-number"&gt;#1976&lt;/span&gt;
    &lt;/a&gt;
  &lt;/h1&gt;
  &lt;div class="github-thread"&gt;
    &lt;div class="timeline-comment-header"&gt;
      &lt;a href="https://github.com/JoseCToscano" rel="noopener noreferrer"&gt;
        &lt;img class="github-liquid-tag-img" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F42146866%3Fv%3D4" alt="JoseCToscano avatar"&gt;
      &lt;/a&gt;
      &lt;div class="timeline-comment-header-text"&gt;
        &lt;strong&gt;
          &lt;a href="https://github.com/JoseCToscano" rel="noopener noreferrer"&gt;JoseCToscano&lt;/a&gt;
        &lt;/strong&gt; posted on &lt;a href="https://github.com/t3-oss/create-t3-app/pull/1976" rel="noopener noreferrer"&gt;&lt;time&gt;Sep 01, 2024&lt;/time&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="ltag-github-body"&gt;
      &lt;p&gt;Closes # 1930&lt;/p&gt;
&lt;p&gt;With PlanetScale's recent deprecation of their free tier, the community needs a strong alternative—especially for those who prefer to build on PostgreSQL. Neon, designed for serverless environments and with its very generous free tier, is the perfect fit for this role.&lt;/p&gt;
&lt;p&gt;Why Neon?
Neon offers a modern, serverless PostgreSQL solution that is perfectly aligned with the needs of developers who prioritize performance, scalability, and simplicity.&lt;/p&gt;
&lt;p&gt;I tried using Supabase (lot's of connection issues) and Vercel's Storage (seamless integration, but they're missing all the extra tools that other DB providers offer)&lt;/p&gt;
&lt;p&gt;With Neon, you get:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Serverless PostgreSQL: Seamless scaling without the need for managing servers.&lt;/li&gt;
&lt;li&gt;Cost Efficiency: A free tier that supports developers from prototyping to production.&lt;/li&gt;
&lt;li&gt;Developer-Friendly: A modern approach to database management, making it easy to integrate into existing workflows.&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;✅ Checklist&lt;/h2&gt;
&lt;span class="octicon octicon-link"&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;[x] I have followed every step in the &lt;a href="https://github.com/t3-oss/create-t3-app/blob/main/CONTRIBUTING.md" rel="noopener noreferrer"&gt;contributing guide&lt;/a&gt; (updated 2022-10-06).&lt;/li&gt;
&lt;li&gt;[x] The PR title follows the convention we established &lt;a href="https://www.conventionalcommits.org/en/v1.0.0/" rel="nofollow noopener noreferrer"&gt;conventional-commit&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;[x] I performed a functional test on my final commit&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Changelog&lt;/h2&gt;
&lt;span class="octicon octicon-link"&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;Adds Neon as a database provider: Introduced Neon as an option for PostgreSQL&lt;/li&gt;
&lt;li&gt;Updates CLI Prompts: Added a new option to select Neon as the database provider during the setup process.&lt;/li&gt;
&lt;li&gt;Configuration Files: Generated all necessary configuration files for Prisma and Drizzle ORM when Neon is selected, ensuring seamless integration with Neon's serverless PostgreSQL.&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Screenshots&lt;/h2&gt;
&lt;span class="octicon octicon-link"&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;p&gt;&lt;a rel="noopener noreferrer" href="https://github.com/user-attachments/assets/4e876267-7b94-49f5-9ca5-7b0ad4f4de26"&gt;&lt;img width="490" alt="Screenshot 2024-09-01 at 2 11 25 p m" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Fuser-attachments%2Fassets%2F4e876267-7b94-49f5-9ca5-7b0ad4f4de26"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;💯&lt;/p&gt;

    &lt;/div&gt;
    &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/t3-oss/create-t3-app/pull/1976" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;(still WIP to fit to their contribution guidelines)&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Why Neon?
&lt;/h3&gt;

&lt;p&gt;Neon offers a modern, serverless PostgreSQL solution that is perfectly aligned with the needs of developers who prioritize performance, scalability, and simplicity. &lt;/p&gt;

&lt;p&gt;With Neon, you get:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;em&gt;Serverless PostgreSQL&lt;/em&gt;: Seamless scaling without the need for managing servers.&lt;/li&gt;
&lt;li&gt;
&lt;em&gt;Cost Efficiency&lt;/em&gt;: A free tier that supports developers from prototyping to production.&lt;/li&gt;
&lt;li&gt;
&lt;em&gt;Developer-Friendly&lt;/em&gt;: A modern approach to database management, making it easy to integrate into existing workflows.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  How to Use the CLI Tool
&lt;/h3&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/_CrPRGCYZMM"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Our CLI tool retains the simplicity and flexibility of the original &lt;code&gt;create-t3-app&lt;/code&gt; while offering Neon as the default database provider. Here’s how you can use it to kickstart your next project:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Step 1: Install and Run the CLI&lt;/strong&gt;
To get started, you can run the CLI directly from npm:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm create neon-t3@latest
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;This will pull the latest version of the CLI&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Pro Tip here&lt;/strong&gt;: If the package is called "create-neon-t3", why can it be run with &lt;code&gt;npm create neon-t3&lt;/code&gt;?&lt;br&gt;
 This is because of the &lt;em&gt;Package Naming Convention&lt;/em&gt;: &lt;br&gt;
The package name &lt;em&gt;"create-neon-t3"&lt;/em&gt; follows a common convention where packages designed to scaffold new projects start with create-. When you run &lt;code&gt;npm create neon-t3&lt;/code&gt;, npm looks for a package named &lt;em&gt;"create-neon-t3"&lt;/em&gt; to initialize a new project.&lt;br&gt;
The &lt;code&gt;@latest&lt;/code&gt; tag ensures that the latest version of the package is used.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Step 2: Choose Your Project Options&lt;/strong&gt;&lt;br&gt;
The CLI will guide you through a series of prompts to configure your new project. Since Neon is set as the default database provider, that won't be part of these prompts:&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Step 3: Set Up Your Environment&lt;/strong&gt;&lt;br&gt;
Once you’ve completed the setup, the CLI will generate a .env file for your project. This file will include the necessary environment variables for connecting to your Neon database.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For example:&lt;/p&gt;

&lt;p&gt;env&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Database Connection String&lt;/span&gt;
&lt;span class="nv"&gt;DATABASE_URL&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"postgresql://postgres:password@localhost:5432/myapp"&lt;/span&gt;

&lt;span class="c"&gt;# Next Auth Settings&lt;/span&gt;
&lt;span class="nv"&gt;NEXTAUTH_SECRET&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"your-secret"&lt;/span&gt;
&lt;span class="nv"&gt;NEXTAUTH_URL&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"http://localhost:3000"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Step 4: Create and connect your Neon project&lt;/strong&gt;&lt;br&gt;
Proceed to connect your Neon's project by simply configuring your database URL available on your Neon dashboard.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Step 5: Start Building&lt;/strong&gt;&lt;br&gt;
With everything set up, you can begin building your application immediately. The CLI has taken care of configuring the database, authentication, and other essential settings, allowing you to focus on writing code.&lt;br&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm run dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwxpj6jxni2st7nwwwp42.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwxpj6jxni2st7nwwwp42.png" alt="Scaffolded app preview" width="800" height="469"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Together, we can continue to build the ultimate open-source starter kit—one that adapts to the needs of the community and supports developers at every stage of their journey. Happy coding!&lt;/p&gt;
&lt;h2&gt;
  
  
  Link to Kit
&lt;/h2&gt;




&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.dev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/JoseCToscano" rel="noopener noreferrer"&gt;
        JoseCToscano
      &lt;/a&gt; / &lt;a href="https://github.com/JoseCToscano/create-neon-t3" rel="noopener noreferrer"&gt;
        create-neon-t3
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      The best way to start a full-stack, typesafe Next.js app 
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;p&gt;
  
  
  &lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2Ft3-oss%2Fcreate-t3-app%2F99286f37324330ecdf75132fae1f246440a88035%2Fwww%2Fpublic%2Fimages%2Ft3-dark.svg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2Ft3-oss%2Fcreate-t3-app%2F99286f37324330ecdf75132fae1f246440a88035%2Fwww%2Fpublic%2Fimages%2Ft3-dark.svg" width="130" alt="Logo for T3"&gt;&lt;/a&gt;

&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h1 class="heading-element"&gt;
  create-neon-t3
&lt;/h1&gt;
&lt;/div&gt;

&lt;p&gt;&lt;a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/47fab965acc51f6fb87b7877c7ea5c7fdef030cbdac46a0180ef2ec7515a2cb8/68747470733a2f2f6465762d746f2d75706c6f6164732e73332e616d617a6f6e6177732e636f6d2f75706c6f6164732f61727469636c65732f7778706a366a786e69327374376e7777777034322e706e67"&gt;&lt;img src="https://camo.githubusercontent.com/47fab965acc51f6fb87b7877c7ea5c7fdef030cbdac46a0180ef2ec7515a2cb8/68747470733a2f2f6465762d746f2d75706c6f6164732e73332e616d617a6f6e6177732e636f6d2f75706c6f6164732f61727469636c65732f7778706a366a786e69327374376e7777777034322e706e67" alt="Scaffolded app preview"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;
  Interactive CLI to start a full-stack, typesafe Next.js app, with database on Neon
&lt;/p&gt;

&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Why We Forked create-t3-app&lt;/h2&gt;
&lt;/div&gt;

&lt;p&gt;The open-source nature of &lt;code&gt;create-t3-app&lt;/code&gt; allows it to evolve alongside the needs of the community. Our team saw an opportunity to build upon this amazing foundation by integrating Neon as a database provider. The goal of our fork was not to diverge from the original project but to contribute an enhancement that we hope will eventually be merged back into the main repository.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The original &lt;code&gt;create-t3-app&lt;/code&gt; offered PlanetScale as the primary database option for MySQL users. However, with PlanetScale's recent deprecation of their free tier, the community needs a strong alternative—especially for those who prefer to build on PostgreSQL. Neon, designed for serverless environments and with its very generous free tier, is the perfect fit for this role.&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="markdown-heading"&gt;
&lt;h3 class="heading-element"&gt;Why Neon?&lt;/h3&gt;
&lt;/div&gt;

&lt;p&gt;Neon offers a modern, serverless PostgreSQL solution that is perfectly aligned with…&lt;/p&gt;
&lt;/div&gt;


&lt;/div&gt;
&lt;br&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/JoseCToscano/create-neon-t3" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;br&gt;
&lt;/div&gt;
&lt;br&gt;


&lt;h2&gt;
  
  
  Your Journey
&lt;/h2&gt;

&lt;h3&gt;
  
  
  The Bigger Picture: Contributing Back to the Community
&lt;/h3&gt;

&lt;p&gt;Our intention with this fork is to contribute something valuable back to the open-source community. By integrating Neon into the &lt;code&gt;create-t3-app&lt;/code&gt; tool, we hope to offer developers another robust option for building with PostgreSQL. This enhancement is not just about adding a new feature—it’s about ensuring that the tool continues to grow in ways that serve the needs of its users.&lt;/p&gt;

&lt;p&gt;We deliberately chose not to remove any other database providers on the pull request to the original project, such as PlanetScale, to maintain the CLI's versatility and ensure a smooth integration process. Our hope is that by keeping the tool open and adaptable, it will encourage more developers to contribute and ultimately lead to this enhancement being merged into the original project.&lt;/p&gt;

&lt;h3&gt;
  
  
  Conclusion
&lt;/h3&gt;

&lt;p&gt;The integration of Neon into the &lt;code&gt;create-t3-app&lt;/code&gt; CLI tool is just the beginning. We believe that this enhancement will empower developers to build even more powerful applications with the tools they love. Whether you're already a fan of &lt;code&gt;create-t3-app&lt;/code&gt; or just discovering it, we invite you to try out this new version and see how Neon can elevate your development experience.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>neonchallenge</category>
      <category>postgres</category>
      <category>database</category>
    </item>
    <item>
      <title>Next.js + tRPC: Best practices for dApp development. Issuing new Assets + Freighter Wallet integration</title>
      <dc:creator>Jose Toscano</dc:creator>
      <pubDate>Mon, 19 Aug 2024 06:37:43 +0000</pubDate>
      <link>https://dev.to/josectoscano/nextjs-trpc-best-practices-for-dapp-development-issuing-new-assets-freighter-wallet-integration-1jk6</link>
      <guid>https://dev.to/josectoscano/nextjs-trpc-best-practices-for-dapp-development-issuing-new-assets-freighter-wallet-integration-1jk6</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/stellar"&gt;Build Better on Stellar: Smart Contract Challenge &lt;/a&gt;: Create a Tutorial&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Your Tutorial
&lt;/h2&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
      &lt;div class="c-embed__cover"&gt;
        &lt;a href="https://app.arcade.software/share/QVREhvmf9XQH3KbeAhMS" class="c-link s:max-w-50 align-middle" rel="noopener noreferrer"&gt;
          &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimage.mux.com%2F3JkQKK9TzM02MhA7FOB02946pfmKeLWyu1W8uBCQkWpuY%2Fthumbnail.png%3Ftime%3D6.057137651122625" height="1274" class="m-0" width="2738"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;div class="c-embed__body"&gt;
      &lt;h2 class="fs-xl lh-tight"&gt;
        &lt;a href="https://app.arcade.software/share/QVREhvmf9XQH3KbeAhMS" rel="noopener noreferrer" class="c-link"&gt;
          Best practices for dApp development. Issuing new assets using Freighter Wallet | Arcade
        &lt;/a&gt;
      &lt;/h2&gt;
        
      &lt;div class="color-secondary fs-s flex items-center"&gt;
          &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.arcade.software%2Fimages%2Fbutton-logo-128.png" width="128" height="128"&gt;
        app.arcade.software
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;br&gt;
&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.dev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/JoseCToscano" rel="noopener noreferrer"&gt;
        JoseCToscano
      &lt;/a&gt; / &lt;a href="https://github.com/JoseCToscano/art-auction" rel="noopener noreferrer"&gt;
        art-auction
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;div class="markdown-heading"&gt;
&lt;h1 class="heading-element"&gt;Create T3 App&lt;/h1&gt;
&lt;/div&gt;
&lt;p&gt;This is a &lt;a href="https://create.t3.gg/" rel="nofollow noopener noreferrer"&gt;T3 Stack&lt;/a&gt; project bootstrapped with &lt;code&gt;create-t3-app&lt;/code&gt;.&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;What's next? How do I make an app with this?&lt;/h2&gt;
&lt;/div&gt;
&lt;p&gt;We try to keep this project as simple as possible, so you can start with just the scaffolding we set up for you, and add additional things later when they become necessary.&lt;/p&gt;
&lt;p&gt;If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our &lt;a href="https://t3.gg/discord" rel="nofollow noopener noreferrer"&gt;Discord&lt;/a&gt; and ask for help.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="https://nextjs.org" rel="nofollow noopener noreferrer"&gt;Next.js&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://next-auth.js.org" rel="nofollow noopener noreferrer"&gt;NextAuth.js&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://prisma.io" rel="nofollow noopener noreferrer"&gt;Prisma&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://orm.drizzle.team" rel="nofollow noopener noreferrer"&gt;Drizzle&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://tailwindcss.com" rel="nofollow noopener noreferrer"&gt;Tailwind CSS&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://trpc.io" rel="nofollow noopener noreferrer"&gt;tRPC&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Learn More&lt;/h2&gt;
&lt;/div&gt;
&lt;p&gt;To learn more about the &lt;a href="https://create.t3.gg/" rel="nofollow noopener noreferrer"&gt;T3 Stack&lt;/a&gt;, take a look at the following resources:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="https://create.t3.gg/" rel="nofollow noopener noreferrer"&gt;Documentation&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://create.t3.gg/en/faq#what-learning-resources-are-currently-available" rel="nofollow noopener noreferrer"&gt;Learn the T3 Stack&lt;/a&gt; — Check out these awesome tutorials&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;You can check out the &lt;a href="https://github.com/t3-oss/create-t3-app" rel="noopener noreferrer"&gt;create-t3-app GitHub repository&lt;/a&gt; — your feedback and contributions are welcome!&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;How do I deploy this?&lt;/h2&gt;

&lt;/div&gt;
&lt;p&gt;Follow our deployment guides for &lt;a href="https://create.t3.gg/en/deployment/vercel" rel="nofollow noopener noreferrer"&gt;Vercel&lt;/a&gt;…&lt;/p&gt;
&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/JoseCToscano/art-auction" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;


&lt;blockquote&gt;
&lt;p&gt;By the end of the tutorial we should be able to mint new assets through our dApp by signing transactions with the Freighter Wallet Browser Extension:&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr4l4pikatkuwvpsffkyd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr4l4pikatkuwvpsffkyd.png" alt="Screenshot from turotial" width="800" height="407"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;You may be wondering why I chose that as my cover image. It’s actually the randomly generated image I created for my tutorial, representing art pieces as Stellar assets. I thought it would be fitting to use it here as well&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  What I Created
&lt;/h2&gt;

&lt;p&gt;My submission is a comprehensive tutorial that guides developers through building a decentralized application (dApp) using Stellar's API and Freighter's web wallet, while promoting best practices in software development. The tutorial covers essential concepts such as issuer and distributor accounts, the asset minting process, and Trustlines, providing detailed explanations to ensure a deep understanding. I also emphasized secure management of environment variables and encapsulated wallet integration in a custom useWallet hook to promote modularity and reusability. By using modern tools like create-t3-app, Vercel's v0, and Shadcn's components, the tutorial helps developers efficiently build secure and scalable applications, with best practices and core Stellar functionalities at the forefront.&lt;/p&gt;

&lt;p&gt;In the tutorial, I aimed to leverage all the tools available to us as developers, from quick component development and image generation to powerful frameworks for rapidly getting an app up and running. My goal was to demonstrate how seamlessly web development can integrate and incorporate these new advancements, including those in decentralized applications.&lt;/p&gt;

&lt;h2&gt;
  
  
  Journey
&lt;/h2&gt;

&lt;p&gt;I became deeply involved in building a dApp on that used the Stellar and Soroban Smart Contracts. Before diving into development, I first had to familiarize myself with the essential concepts, terminology, and challenges associated with Stellar's technologies. It was challenging at the beginning, with a steep learning curve, but once I grasped the core concepts, I found myself thriving in the development process.&lt;/p&gt;

&lt;p&gt;After completing and submitting my app, I realized just how much I had learned. This newfound understanding and excitement made me eager to share my knowledge with others. I wanted to create a straightforward, easy-to-follow tutorial that highlights the exact steps I took—something I wish I had when I was starting out. This tutorial is designed to save developers hours, if not days, of deep research and trial-and-error by providing a clear path through the complexities of Stellar and Freighter Wallet integration. I would have loved to inclued a section to showcase the use of Soroban Smart Contracts, but I just didn't have enough time to cover it.&lt;/p&gt;

&lt;p&gt;I’m particularly proud of how I managed to distill these complex ideas into accessible content, making it easier for others to get started with Stellar. What I hope to do next is continue building on this foundation, further explore the possibilities within Stellar’s ecosystem, and create more educational resources to help others navigate and thrive in this space.&lt;/p&gt;

&lt;p&gt;Take a look at my submission if you haven't yet:&lt;/p&gt;


&lt;div class="ltag__link"&gt;
  &lt;a href="/josectoscano" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__pic"&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1755541%2F7c403e0e-bba7-4a24-9b2f-52e279b0e332.jpg" alt="josectoscano"&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="https://dev.to/josectoscano/entryx-decentralized-ticketing-platform-3ak1" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__content"&gt;
      &lt;h2&gt;Entry•X | Decentralized Ticketing Platform&lt;/h2&gt;
      &lt;h3&gt;Jose Toscano ・ Aug 17 '24&lt;/h3&gt;
      &lt;div class="ltag__link__taglist"&gt;
        &lt;span class="ltag__link__tag"&gt;#devchallenge&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#stellarchallenge&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#blockchain&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#web3&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;


</description>
      <category>devchallenge</category>
      <category>stellarchallenge</category>
      <category>blockchain</category>
      <category>web3</category>
    </item>
    <item>
      <title>Entry•X | Decentralized Ticketing Platform</title>
      <dc:creator>Jose Toscano</dc:creator>
      <pubDate>Sat, 17 Aug 2024 07:56:25 +0000</pubDate>
      <link>https://dev.to/josectoscano/entryx-decentralized-ticketing-platform-3ak1</link>
      <guid>https://dev.to/josectoscano/entryx-decentralized-ticketing-platform-3ak1</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/stellar"&gt;Build Better on Stellar: Smart Contract Challenge &lt;/a&gt;: Build a dApp&lt;/em&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The ticketing industry is plagued by high fees, unreliable systems, and widespread fraud, leaving fans frustrated and uncertain. Traditional ticketing processes lack transparency, often prioritizing profits over people. However, by leveraging &lt;strong&gt;Soroban Smart Contracts&lt;/strong&gt; on the &lt;strong&gt;Stellar Network&lt;/strong&gt;, we can restore trust and fairness to the industry. &lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;In creating a decentralized ticketing platform, our primary focus was on developing a robust solution tailored to the unique needs of &lt;strong&gt;Users&lt;/strong&gt; &lt;em&gt;(that's all of us)&lt;/em&gt;, &lt;strong&gt;Event Organizers&lt;/strong&gt;, and &lt;strong&gt;Resellers&lt;/strong&gt;. Each of these groups interacts with the platform differently, so we designed the system to ensure their experiences are seamless, secure, and transparent.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Redefining WYSIWYG (What You &lt;strong&gt;Sign&lt;/strong&gt; Is What You &lt;strong&gt;Get&lt;/strong&gt;)&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;We couldn't define it better.&lt;/p&gt;

&lt;p&gt;Our application leverages the power of the &lt;strong&gt;Stellar **Network and **Soroban Smart Contracts&lt;/strong&gt; to create a transparent and reliable ticketing ecosystem. Every transaction is reviewed and approved through your &lt;strong&gt;Freighter Wallet&lt;/strong&gt;, giving you complete control and security. For the best experience, make sure you've got your browser extension up and running. (&lt;a href="https://www.freighter.app/" rel="noopener noreferrer"&gt;Get Freighter&lt;/a&gt;)&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxpndljwsv0oo94yj6dbl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxpndljwsv0oo94yj6dbl.png" alt="Freighter's Sign Request" width="800" height="478"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Secure and Transparent: The Freighter Wallet prompts you to review and approve every transaction, ensuring that what you sign is truly what you get.&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Here's how it works:
&lt;/h3&gt;

&lt;h2&gt;
  
  
  1. Decentralized Ticketing for Event Organizers
&lt;/h2&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/dBaJ4eNTueQ"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Note that video demo won't display any Wallet Interaction, but you can go and check it out on our &lt;a href="https://www.entryx.me" rel="noopener noreferrer"&gt;live demo&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Event organizers can now distribute their tickets with complete control and transparency. Using the platform, organizers issue tickets as digital assets on the &lt;strong&gt;Stellar&lt;/strong&gt; network. &lt;strong&gt;Soroban Smart Contracts&lt;/strong&gt; manage the sale of tickets, enforcing rules around pricing, limits per buyer, and other conditions. This eliminates the need for middlemen and allows organizers to sell tickets directly to their audience. &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Experience immediate payments directly to your Wallet.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Transparency and Trust for Users and Resellers
&lt;/h2&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/Vwx78gwfvWY"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;For users, the platform offers a transparent and secure way to purchase tickets. Every ticket is issued as a digital asset on the &lt;strong&gt;Stellar&lt;/strong&gt; Network, which means that when you buy a ticket, you can verify its authenticity at all time. The integration with the &lt;strong&gt;Freighter&lt;/strong&gt; wallet allows users to securely sign transactions, ensuring that all purchases are authorized and that your secret keys never leave your control. &lt;/p&gt;

&lt;p&gt;This system not only prevents fraud but also gives you confidence that what you sign is what you get - whether you're buying or selling.&lt;/p&gt;

&lt;p&gt;For resellers, the platform provides a fair and transparent marketplace where tickets can be resold through auctions. &lt;em&gt;Soroban Smart Contracts&lt;/em&gt; handle all aspects of the auction, from placing bids to executing the final sale.  But more importantly, bidders must commit to their offers - no bid is valid without the corresponding transaction. &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;We are committed to providing trust and transparency at every level, and this principle is the foundation upon which we built our smart contracts. The code below illustrates how we ensure that a bid is only considered valid if a legitimate transaction is made, reinforcing our dedication to secure and fair transactions.&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight rust"&gt;&lt;code&gt; &lt;span class="k"&gt;pub&lt;/span&gt; &lt;span class="k"&gt;fn&lt;/span&gt; &lt;span class="nf"&gt;place_bid&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;env&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;Env&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;auction_id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;Symbol&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;bidder&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;Address&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;bid_amount&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;i128&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="n"&gt;bidder&lt;/span&gt;&lt;span class="nf"&gt;.require_auth&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
            &lt;span class="c1"&gt;// ...&lt;/span&gt;

            &lt;span class="c1"&gt;// Put your Money where your mouth is $$$&lt;/span&gt;
            &lt;span class="c1"&gt;// Transfer the corresponding bid (XLM) from the bidder to the contract address&lt;/span&gt;
            &lt;span class="k"&gt;let&lt;/span&gt; &lt;span class="n"&gt;native_asset&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nn"&gt;token&lt;/span&gt;&lt;span class="p"&gt;::&lt;/span&gt;&lt;span class="nn"&gt;Client&lt;/span&gt;&lt;span class="p"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;new&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="n"&gt;env&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="n"&gt;auction&lt;/span&gt;&lt;span class="py"&gt;.native_address&lt;/span&gt;&lt;span class="nf"&gt;.clone&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
            &lt;span class="k"&gt;let&lt;/span&gt; &lt;span class="n"&gt;contract&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;env&lt;/span&gt;&lt;span class="nf"&gt;.current_contract_address&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
            &lt;span class="k"&gt;let&lt;/span&gt; &lt;span class="n"&gt;xlmAmount&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;bid_amount&lt;/span&gt;&lt;span class="nf"&gt;.clone&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;100000&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
            &lt;span class="n"&gt;native_asset&lt;/span&gt;&lt;span class="nf"&gt;.transfer&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="n"&gt;bidder&lt;/span&gt;&lt;span class="nf"&gt;.clone&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="n"&gt;contract&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="n"&gt;xlmAmount&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

            &lt;span class="c1"&gt;// Transfer the previous highest bid back to the previous highest bidder&lt;/span&gt;
            &lt;span class="k"&gt;let&lt;/span&gt; &lt;span class="n"&gt;previous_highest_bidder&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;auction&lt;/span&gt;&lt;span class="py"&gt;.highest_bidder&lt;/span&gt;&lt;span class="nf"&gt;.clone&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
            &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;previous_highest_bidder&lt;/span&gt;&lt;span class="nf"&gt;.is_some&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                &lt;span class="k"&gt;let&lt;/span&gt; &lt;span class="n"&gt;previous_bidder&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;previous_highest_bidder&lt;/span&gt;&lt;span class="nf"&gt;.unwrap&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
                &lt;span class="k"&gt;let&lt;/span&gt; &lt;span class="n"&gt;previous_bid&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;auction&lt;/span&gt;&lt;span class="py"&gt;.highest_bid&lt;/span&gt;&lt;span class="nf"&gt;.clone&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;10000000&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
                &lt;span class="n"&gt;native_asset&lt;/span&gt;&lt;span class="nf"&gt;.transfer&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="n"&gt;contract&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="n"&gt;previous_bidder&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="n"&gt;previous_bid&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
            &lt;span class="p"&gt;}&lt;/span&gt;
      &lt;span class="c1"&gt;// ...&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;blockquote&gt;
&lt;p&gt;Our goal is not to limit or regulate resellers, but to empower them with full control over how they sell tickets, while ensuring trust and transparency for both parties involved. &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;We recognize that reselling is a significant aspect of the ticketing industry, and we’re committed to supporting it rather than imposing restrictions. To build trust, we’ve implemented a system where the swap of resources—whether it’s money or tickets—only occurs when all conditions are met. This way, both buyers and sellers can engage confidently, knowing that their transactions are secure and fair.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Leveraging Stellar's Low Fees and Decentralization&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In an industry where every cent counts, keeping costs down is crucial for both buyers and sellers. On our platform, each user is responsible for covering their own network fees, but thanks to &lt;strong&gt;Stellar&lt;/strong&gt;'s efficient design, these fees are minimal.&lt;/p&gt;

&lt;p&gt;By decentralizing the ticketing process, we eliminate the need for middlemen who often inflate prices. Instead, users transact directly with each other through a secure, transparent, and decentralized system.&lt;/p&gt;
&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;



&lt;p&gt;Entry•X is Live --&amp;gt; &lt;a href="https://www.entryx.me/" rel="noopener noreferrer"&gt;https://www.entryx.me/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Make sure to be connected to the Testnet network&lt;/em&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  Join Us on This Journey
&lt;/h3&gt;

&lt;p&gt;If you're an event organizer looking to distribute your tickets through a platform built on trust and transparency, we encourage you to become a partner. Join our waitlist today and be part of this revolutionary change. Together, we can make the ticketing experience better for everyone.&lt;/p&gt;

&lt;p&gt;As we move forward, we're excited to extend an invitation to the organizers of the upcoming Meridian events. How awesome would it be to showcase the future of ticketing on the very platform that leverages the power of &lt;strong&gt;Stellar&lt;/strong&gt; and &lt;strong&gt;Soroban&lt;/strong&gt;? Let’s work together to ensure that by next year, &lt;em&gt;&lt;strong&gt;Meridian 2025&lt;/strong&gt;&lt;/em&gt; attendees will experience firsthand how secure and seamless ticketing can be. Join us in setting a new standard for the industry.&lt;/p&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;a href="https://www.entryx.me/?joinWaitlist=true" rel="noopener noreferrer"&gt;
      entryx.me
    &lt;/a&gt;
&lt;/div&gt;



&lt;h2&gt;
  
  
  My Code
&lt;/h2&gt;


&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.dev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/JoseCToscano" rel="noopener noreferrer"&gt;
        JoseCToscano
      &lt;/a&gt; / &lt;a href="https://github.com/JoseCToscano/EntryX" rel="noopener noreferrer"&gt;
        EntryX
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      Decentralized event ticketing platform on the Stellar Blockchain, enabling secure ticket sales and auctions within a secondary market. Get ready to buy, sell, or bid on tickets seamlessly – make sure your Freighter Wallet is set up!
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;p&gt;&lt;a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/4f29ccad00168243e10e3098ade63db4b560d5cf359efd8bfb2bd3814bf52eeb/68747470733a2f2f757466732e696f2f662f31613266623066642d613439652d346261342d626364362d3630643766343737626363332d6535767862782e6d2e2e706e67"&gt;&lt;img src="https://camo.githubusercontent.com/4f29ccad00168243e10e3098ade63db4b560d5cf359efd8bfb2bd3814bf52eeb/68747470733a2f2f757466732e696f2f662f31613266623066642d613439652d346261342d626364362d3630643766343737626363332d6535767862782e6d2e2e706e67" alt="Join EntryX Image"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h1 class="heading-element"&gt;Entry•X Decentralized Ticketing and Reselling dApp&lt;/h1&gt;
&lt;/div&gt;
&lt;p&gt;Welcome to Entry•X! This platform leverages the power of the Stellar blockchain to create a secure, transparent, and efficient marketplace for event tickets
Users can purchase, manage, and resell their tickets with ease, all while ensuring the authenticity of their assets.&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Features&lt;/h2&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;Blockchain-Powered Tickets: Each ticket is a digital asset on the Stellar blockchain, ensuring authenticity and security.&lt;/li&gt;
&lt;li&gt;Freighter Wallet Integration: Securely sign transactions and manage your assets with the Freighter wallet.&lt;/li&gt;
&lt;li&gt;Auction-Based Reselling: Users can resell their tickets on the secondary market through a transparent auction system.&lt;/li&gt;
&lt;li&gt;Smart Contract Enforcement: Soroban smart contracts manage all transactions, ensuring that conditions are met and providing security for both buyers and sellers.&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Tech Stack&lt;/h2&gt;

&lt;/div&gt;
&lt;p&gt;This is a &lt;a href="https://create.t3.gg/" rel="nofollow noopener noreferrer"&gt;T3 Stack&lt;/a&gt; project bootstrapped with &lt;code&gt;create-t3-app&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;If you are not familiar with the different technologies used in this project, please refer to the respective docs.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="https://nextjs.org" rel="nofollow noopener noreferrer"&gt;Next.js&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://next-auth.js.org" rel="nofollow noopener noreferrer"&gt;NextAuth.js&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://prisma.io" rel="nofollow noopener noreferrer"&gt;Prisma&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;…&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/JoseCToscano/EntryX" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;


&lt;h2&gt;
  
  
  Journey
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Implementation and Smart Contract Design
&lt;/h3&gt;

&lt;p&gt;Our motivation for this project stems from personal experiences of fraud and unfair pricing in the ticketing industry. It’s about time we take control and drive real change. The smart contracts we’ve implemented are designed to decentralize ticketing, ensuring that money is only exchanged when a &lt;strong&gt;valid&lt;/strong&gt; asset is received.&lt;/p&gt;

&lt;p&gt;In many countries, resellers face significant risks, sometimes even engaging in illegal activities, while trust remains low and fraud is rampant in secondary markets. I wanted to address these issues head-on. Additionally, event organizers often rely on third parties for ticket distribution, which can result in long delays before they see their earnings, not to mention the high, often abusive, commissions they’re forced to pay. There are clear areas of opportunity at every stage of the ticketing process.&lt;/p&gt;

&lt;p&gt;When designing our contracts, we deliberately avoided becoming intermediaries for payouts and ticket distribution, as these transactions can be handled directly on the Stellar network. Payments go directly to where they need to be at the exact moment they occur, and asset exchanges happen simultaneously. We needed to ensure that our contracts managed and distributed resources exactly this way. Given that we had to interact directly with Stellar Assets, we chose to manage them through Stellar Asset Contracts. This required us to dive deep into understanding and learning how to effectively utilize them. &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;(Pro tip here: just make sure the SAC are deployed before attempting to use them, even if there's already an address for them)&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Our contracts are capable of storing both assets and native currency, making them the sole intermediary where all transactions are atomic and fully traceable. Rust, a powerful language that maximizes the use of network resources, was crucial in this development. We had to learn and apply best practices in Rust to design our contracts effectively. &lt;em&gt;(That was a tough one)&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Proud Moments
&lt;/h3&gt;

&lt;p&gt;One of the most rewarding moments was seeing how our Asset Auctions managed to distribute funds to the correct agents and all involved parties. Witnessing how the issuer received the appropriate commissions, how the asset owner got paid for the sale, and how the commissions were automatically taken out and sent to the right addresses was an incredible validation of our work.&lt;/p&gt;

&lt;h3&gt;
  
  
  Experience with the Ecosystem
&lt;/h3&gt;

&lt;p&gt;Working with the Stellar Network and Soroban Smart Contracts has been a learning-intensive experience, but also incredibly fulfilling. The ecosystem provided the tools and framework necessary to bring our vision to life, particularly in terms of transparency and reliability in ticketing. &lt;em&gt;(Of course, there’s still work to be done—improving documentation, providing more examples—but that’s a responsibility we share as a community.)&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Future Plans
&lt;/h3&gt;

&lt;p&gt;We are actively seeking event organizers who are ready to adopt decentralized ticketing. The more users we onboard, the more we can push for wider adoption of web3 services, including wallet usage. One of our major goals is to manage ticketing for Stellar's annual events, as it feels like a natural fit for their ecosystem.&lt;/p&gt;

&lt;p&gt;Looking ahead, our next big step is integrating fiat payments to ensure a seamless user experience. We believe that by making the process as straightforward as possible, we can encourage more users and organizers to transition to decentralized ticketing.&lt;/p&gt;

&lt;p&gt;Additionally, we recognize a significant gap in the market related to ticket pre-sales and the frequent shortages that leave buyers frustrated. We aim to redefine how these pre-sales are conducted, allowing assets to go directly to where they need to be without the need for virtual lines that result in hours of waiting, only to discover that tickets are sold out. Our vision is to create a more efficient and fair system where everyone has a better chance to secure their tickets without the usual hassle.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>stellarchallenge</category>
      <category>blockchain</category>
      <category>web3</category>
    </item>
  </channel>
</rss>
