<?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: David Simões</title>
    <description>The latest articles on DEV Community by David Simões (@davesimoes).</description>
    <link>https://dev.to/davesimoes</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%2F1147802%2Fd1db8a9d-c6dc-40be-a025-bef06827e9c7.png</url>
      <title>DEV Community: David Simões</title>
      <link>https://dev.to/davesimoes</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/davesimoes"/>
    <language>en</language>
    <item>
      <title>I Built a Private AI Assistant That Runs 100% Locally — No Cloud, No Subscriptions</title>
      <dc:creator>David Simões</dc:creator>
      <pubDate>Tue, 12 May 2026 23:49:32 +0000</pubDate>
      <link>https://dev.to/davesimoes/i-built-a-private-ai-assistant-that-runs-100-locally-no-cloud-no-subscriptions-kph</link>
      <guid>https://dev.to/davesimoes/i-built-a-private-ai-assistant-that-runs-100-locally-no-cloud-no-subscriptions-kph</guid>
      <description>&lt;p&gt;Every time I used ChatGPT or similar tools the same thought crossed my mind:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;"Where is this conversation going? Who has access to it? What are they doing with my data?"&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;So I decided to build my own solution. Meet &lt;strong&gt;CrustAI&lt;/strong&gt; 🦀 — a fully private, self-hosted AI assistant that runs entirely on your own machine.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;No cloud. No subscriptions. No data leaving your computer. Ever.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;🌐 &lt;a href="https://documentcrustai.netlify.app" rel="noopener noreferrer"&gt;Documentation&lt;/a&gt; | ⭐ &lt;a href="https://github.com/DaveSimoes/CrustAI" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  The Problem I Wanted to Solve
&lt;/h2&gt;

&lt;p&gt;Most AI assistants have one fundamental issue — &lt;strong&gt;your data belongs to someone else&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;When you ask ChatGPT something personal, that conversation is:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Stored on OpenAI's servers&lt;/li&gt;
&lt;li&gt;Potentially used to train future models&lt;/li&gt;
&lt;li&gt;Subject to their privacy policy (which can change)&lt;/li&gt;
&lt;li&gt;Accessible in case of a data breach&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I wanted an AI assistant that was &lt;strong&gt;genuinely mine&lt;/strong&gt; — one that I could use daily through apps I already use (Telegram, WhatsApp) without worrying about privacy.&lt;/p&gt;




&lt;h2&gt;
  
  
  What is CrustAI?
&lt;/h2&gt;

&lt;p&gt;CrustAI is a &lt;strong&gt;self-hosted AI assistant&lt;/strong&gt; powered by &lt;a href="https://ollama.ai" rel="noopener noreferrer"&gt;Ollama&lt;/a&gt; that connects to your favorite messaging platforms and runs completely offline after setup.&lt;/p&gt;

&lt;h3&gt;
  
  
  Key features:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;🔒 &lt;strong&gt;100% Private&lt;/strong&gt; — all processing happens on your hardware&lt;/li&gt;
&lt;li&gt;🧠 &lt;strong&gt;Local LLM&lt;/strong&gt; — powered by Ollama (llama3.2, tinyllama, phi3, mistral...)&lt;/li&gt;
&lt;li&gt;📱 &lt;strong&gt;Multi-platform&lt;/strong&gt; — Telegram, WhatsApp, Discord and Slack&lt;/li&gt;
&lt;li&gt;🧬 &lt;strong&gt;Long-term memory&lt;/strong&gt; — remembers facts across conversations&lt;/li&gt;
&lt;li&gt;🗣️ &lt;strong&gt;Offline voice&lt;/strong&gt; — speech-to-text and text-to-speech (pt-BR)&lt;/li&gt;
&lt;li&gt;⚡ &lt;strong&gt;REST API&lt;/strong&gt; — built-in Fastify server for custom integrations&lt;/li&gt;
&lt;li&gt;🎭 &lt;strong&gt;Custom personality&lt;/strong&gt; — fully configurable assistant behavior&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Tech Stack
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Technology&lt;/th&gt;
&lt;th&gt;Purpose&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Node.js&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Runtime environment&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Ollama&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Local LLM inference engine&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;node-telegram-bot-api&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Telegram integration&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;@whiskeysockets/baileys&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;WhatsApp integration&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;discord.js&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Discord integration&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;@slack/bolt&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Slack integration&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Fastify&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;REST API server&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;sql.js&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Embedded SQLite for memory&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;yaml&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Configuration management&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h2&gt;
  
  
  Architecture Overview
&lt;/h2&gt;

&lt;p&gt;The architecture is straightforward — a central message handler receives messages from any platform and routes them through the same pipeline:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;┌─────────────────────────────────────────────────────┐
│                     CrustAI Core                     │
│                                                      │
│  ┌──────────┐  ┌──────────┐  ┌──────────────────┐  │
│  │ Telegram │  │ Discord  │  │     WhatsApp     │  │
│  │  Adapter │  │  Adapter │  │      Adapter     │  │
│  └────┬─────┘  └────┬─────┘  └────────┬─────────┘  │
│       └──────────────┼──────────────────┘            │
│                      ▼                               │
│            ┌─────────────────┐                      │
│            │  Message Handler │                      │
│            └────────┬────────┘                      │
│         ┌───────────┼───────────┐                   │
│         ▼           ▼           ▼                   │
│    ┌─────────┐ ┌────────┐ ┌──────────┐             │
│    │  Ollama │ │ Memory │ │ REST API │             │
│    │  (LLM)  │ │  Store │ │  Server  │             │
│    └─────────┘ └────────┘ └──────────┘             │
└─────────────────────────────────────────────────────┘
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Each platform adapter is independent — you enable only what you need in &lt;code&gt;config.yml&lt;/code&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Getting Started in 5 Steps
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Prerequisites
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Node.js ≥ 20&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://ollama.ai" rel="noopener noreferrer"&gt;Ollama&lt;/a&gt; installed&lt;/li&gt;
&lt;li&gt;A Telegram bot token from &lt;a href="https://t.me/botfather" rel="noopener noreferrer"&gt;@BotFather&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Step 1 — Clone the repository
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git clone https://github.com/DaveSimoes/CrustAI.git
&lt;span class="nb"&gt;cd &lt;/span&gt;CrustAI
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Step 2 — Install dependencies
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Step 3 — Start Ollama and pull a model
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Start the Ollama server (keep this terminal open)&lt;/span&gt;
ollama serve

&lt;span class="c"&gt;# In a new terminal — pull a lightweight model&lt;/span&gt;
ollama pull tinyllama   &lt;span class="c"&gt;# 600MB — works on modest hardware&lt;/span&gt;
&lt;span class="c"&gt;# or&lt;/span&gt;
ollama pull llama3.2    &lt;span class="c"&gt;# 2GB — needs ~8GB RAM&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Step 4 — Configure the project
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cp &lt;/span&gt;config/config.example.yml config/config.yml
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Edit &lt;code&gt;config/config.yml&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="na"&gt;model&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;tinyllama&lt;/span&gt;
&lt;span class="na"&gt;ollama_url&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;http://localhost:11434&lt;/span&gt;
&lt;span class="na"&gt;language&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;pt-BR&lt;/span&gt;

&lt;span class="na"&gt;telegram&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;enabled&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;
  &lt;span class="na"&gt;token&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;YOUR_BOT_TOKEN_HERE&lt;/span&gt;
  &lt;span class="na"&gt;allowed_user_ids&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="pi"&gt;[]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Step 5 — Launch CrustAI!
&lt;/h3&gt;



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

&lt;/div&gt;



&lt;p&gt;Expected output:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight console"&gt;&lt;code&gt;&lt;span class="go"&gt;✓ Ollama connected     (tinyllama)
✓ Memory store ready   (./data/memory.db)
✓ Telegram ready
✓ REST API ready       (http://localhost:3000)

🦀 CrustAI is ready. Your shell awaits.
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Available Commands
&lt;/h2&gt;

&lt;p&gt;Once running, use these commands directly in Telegram (or any connected platform):&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Command&lt;/th&gt;
&lt;th&gt;Description&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/ping&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Check if the bot is alive&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/help&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Show all commands&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/model&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Show which AI model is running&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/remember &amp;lt;fact&amp;gt;&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Store a fact in long-term memory&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/forget&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Erase all stored facts&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/clear&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Clear conversation history&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h2&gt;
  
  
  The Privacy-First Philosophy
&lt;/h2&gt;

&lt;p&gt;CrustAI was built with privacy as its &lt;strong&gt;core principle&lt;/strong&gt;, not an afterthought:&lt;/p&gt;

&lt;p&gt;✅ All conversations processed locally — nothing leaves your hardware&lt;br&gt;
✅ No calls to OpenAI, Anthropic, Google or any cloud AI service&lt;br&gt;
✅ No telemetry or usage tracking&lt;br&gt;
✅ Open source — audit every single line of code&lt;br&gt;
✅ MIT license — use it however you want&lt;/p&gt;




&lt;h2&gt;
  
  
  Running on Modest Hardware
&lt;/h2&gt;

&lt;p&gt;One concern I had was performance. I'm running CrustAI with &lt;strong&gt;tinyllama&lt;/strong&gt; on a machine with limited RAM and it handles daily conversations well.&lt;/p&gt;

&lt;p&gt;For basic Q&amp;amp;A and conversation, tinyllama is surprisingly capable. If you have more resources, llama3.2 or phi3 give significantly better results.&lt;/p&gt;




&lt;h2&gt;
  
  
  What's Next — Roadmap
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;[ ] Web UI dashboard&lt;/li&gt;
&lt;li&gt;[ ] Image understanding (multimodal LLMs)&lt;/li&gt;
&lt;li&gt;[ ] Plugin system for custom tools&lt;/li&gt;
&lt;li&gt;[ ] Docker one-click deployment&lt;/li&gt;
&lt;li&gt;[ ] Mobile app companion&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Contribute!
&lt;/h2&gt;

&lt;p&gt;CrustAI is open source and I'd love contributions from the community:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🐛 &lt;strong&gt;Bug reports&lt;/strong&gt; — open an issue&lt;/li&gt;
&lt;li&gt;💡 &lt;strong&gt;Feature ideas&lt;/strong&gt; — let's discuss in issues&lt;/li&gt;
&lt;li&gt;🔧 &lt;strong&gt;Pull requests&lt;/strong&gt; — always welcome&lt;/li&gt;
&lt;li&gt;⭐ &lt;strong&gt;Star the repo&lt;/strong&gt; — helps others discover it!&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;GitHub:&lt;/strong&gt; &lt;a href="https://github.com/DaveSimoes/CrustAI" rel="noopener noreferrer"&gt;https://github.com/DaveSimoes/CrustAI&lt;/a&gt;&lt;br&gt;
&lt;strong&gt;Documentation:&lt;/strong&gt; &lt;a href="https://documentcrustai.netlify.app" rel="noopener noreferrer"&gt;https://documentcrustai.netlify.app&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Final Thoughts
&lt;/h2&gt;

&lt;p&gt;Building CrustAI taught me a lot about local LLM inference, multi-platform bot development, and the real meaning of privacy-first software.&lt;/p&gt;

&lt;p&gt;If you're tired of sending your conversations to the cloud, give CrustAI a try. Your data deserves to stay yours.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Made with 🦀 and ❤️ by Dave Simoes&lt;/strong&gt;&lt;/p&gt;




&lt;p&gt;&lt;em&gt;If you found this useful, consider starring the repo and sharing with others who care about privacy!&lt;/em&gt;&lt;/p&gt;

</description>
      <category>opensource</category>
      <category>ai</category>
      <category>node</category>
      <category>privacy</category>
    </item>
    <item>
      <title>How I Built a Privacy-First AI Assistant That Runs 100% Locally with Node.js and Ollama</title>
      <dc:creator>David Simões</dc:creator>
      <pubDate>Thu, 07 May 2026 22:57:42 +0000</pubDate>
      <link>https://dev.to/davesimoes/how-i-built-a-privacy-first-ai-assistant-that-runs-100-locally-with-nodejs-and-ollama-3c6a</link>
      <guid>https://dev.to/davesimoes/how-i-built-a-privacy-first-ai-assistant-that-runs-100-locally-with-nodejs-and-ollama-3c6a</guid>
      <description>&lt;p&gt;Most AI assistants today depend heavily on the cloud. Your data leaves your device, goes to external servers, and you depend on third-party APIs.&lt;/p&gt;

&lt;p&gt;I wanted to explore a different approach.&lt;/p&gt;

&lt;p&gt;So I built CrustAI — a self-hosted AI assistant that runs entirely on your machine, powered by local LLMs through Ollama, and integrated in real time with Telegram, WhatsApp, Discord and Slack.&lt;/p&gt;

&lt;p&gt;Key ideas behind the project:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Total privacy (no data leaves your machine)&lt;/li&gt;
&lt;li&gt;Real-time messaging integrations&lt;/li&gt;
&lt;li&gt;Long-term memory between conversations&lt;/li&gt;
&lt;li&gt;Offline speech-to-text and text-to-speech&lt;/li&gt;
&lt;li&gt;Extensible Node.js architecture with REST API&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is not theoretical. You can clone the repo and run it today.&lt;/p&gt;

&lt;p&gt;GitHub repository:&lt;br&gt;
&lt;strong&gt;&lt;a href="https://github.com/DaveSimoes/CrustAI" rel="noopener noreferrer"&gt;https://github.com/DaveSimoes/CrustAI&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;I’d love to hear thoughts from the community.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>node</category>
      <category>privacy</category>
      <category>showdev</category>
    </item>
    <item>
      <title>Building VercelZero: An Open-Source Deployment Platform Experience with Next.js + AI</title>
      <dc:creator>David Simões</dc:creator>
      <pubDate>Sat, 14 Mar 2026 04:41:20 +0000</pubDate>
      <link>https://dev.to/davesimoes/building-vercelzero-an-open-source-deployment-platform-experience-with-nextjs-ai-1928</link>
      <guid>https://dev.to/davesimoes/building-vercelzero-an-open-source-deployment-platform-experience-with-nextjs-ai-1928</guid>
      <description>&lt;p&gt;I’ve been working on VercelZero, an open-source project inspired by the original Vercel platform experience.&lt;/p&gt;

&lt;p&gt;The main objective is to create a portfolio-grade, community-friendly codebase that demonstrates:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;product-oriented frontend engineering,&lt;/li&gt;
&lt;li&gt;scalable component architecture,&lt;/li&gt;
&lt;li&gt;realistic deployment-style UX,&lt;/li&gt;
&lt;li&gt;and AI-assisted user interactions.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;What’s inside:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Simulated deployment flow for frontend projects&lt;/li&gt;
&lt;li&gt;Preview-oriented interface&lt;/li&gt;
&lt;li&gt;Dashboard-centric experience&lt;/li&gt;
&lt;li&gt;Responsive UI&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Stack:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Next.js 14&lt;/li&gt;
&lt;li&gt;TypeScript&lt;/li&gt;
&lt;li&gt;React 18&lt;/li&gt;
&lt;li&gt;Tailwind CSS&lt;/li&gt;
&lt;li&gt;CopilotKit / OpenAI integration&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Why I’m sharing this&lt;br&gt;
I want this repository to be useful for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;developers learning modern SaaS-like frontend patterns,&lt;/li&gt;
&lt;li&gt;contributors looking for a clean open-source project,&lt;/li&gt;
&lt;li&gt;and recruiters evaluating technical depth + product thinking.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If this project is helpful, feel free to:&lt;/p&gt;

&lt;p&gt;⭐ star the repository,&lt;/p&gt;

&lt;p&gt;🐛 open issues with suggestions,&lt;/p&gt;

&lt;p&gt;🔀 submit pull requests.&lt;/p&gt;

&lt;p&gt;I’d love your feedback and ideas for the roadmap.&lt;/p&gt;

&lt;p&gt;[&lt;a href="https://github.com/DaveSimoes/VercelZero" rel="noopener noreferrer"&gt;https://github.com/DaveSimoes/VercelZero&lt;/a&gt;]&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Crie um modelo de interface Login / Sign Up (UI) em React utilizando Bootstrap 5</title>
      <dc:creator>David Simões</dc:creator>
      <pubDate>Sat, 02 Sep 2023 01:54:59 +0000</pubDate>
      <link>https://dev.to/davesimoes/crie-um-modelo-de-interface-login-sign-up-ui-em-react-utilizando-bootstrap-5-56lb</link>
      <guid>https://dev.to/davesimoes/crie-um-modelo-de-interface-login-sign-up-ui-em-react-utilizando-bootstrap-5-56lb</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--WQZFNqxV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yfgw751kb8ltfdndd1j.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--WQZFNqxV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yfgw751kb8ltfdndd1j.png" alt="interface login - sign up image " width="797" height="459"&gt;&lt;/a&gt;&lt;br&gt;
&lt;strong&gt;Introdução:&lt;/strong&gt;&lt;br&gt;
Olá Família Devs.&lt;br&gt;
Neste tutorial vamos aprender a criar do zero uma interface de Login / Sign Up utilizando React e  Bootstrap 5 .&lt;/p&gt;

&lt;p&gt;Acredito que o entendimento inicial deste simples modelo irá ajudar a compreender alguns rudimentos que poderão te levar a escalar projetos acrescidos com backend, onde vc poderá se conectar por exemplo a BD´s SQL (Oracle, MySQL, Microsoft SQL Server, PostgreSQL) ou NoSQL (MongoDB, Amazon DynamoDB , entre outros.)&lt;/p&gt;

&lt;p&gt;Em breve estaremos publicando um tutorial a respeito da parte de backend em que iremos adicionar neste projeto.&lt;/p&gt;

&lt;p&gt;Porém por agora, para facilitar a fixação de todas as etapas de construção do sistema, vamos focar apenas no FrontEnd.&lt;/p&gt;

&lt;p&gt;Então chega de conversa e mão na massa...&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Índice:&lt;/strong&gt;&lt;br&gt;
1) Pré-requistos;&lt;br&gt;
2) Configuração da biblioteca React;&lt;br&gt;
3) Instalação e configuração do framework Bootstrap;&lt;br&gt;
4) Criação dos componentes  Login e Signup;&lt;br&gt;
5) Ativação do Routing no React;&lt;br&gt;
6) Criar modelo de interface de usuário (UI Template) de login, utilizando o Bootstrap;&lt;br&gt;
7) Criação do modelo de UI de cadastro React com Bootstrap;&lt;br&gt;
8) Criação do React Sign Up UI Template com Bootstrap&lt;br&gt;
9) Adicionar estilos aos componentes de autenticação;&lt;br&gt;
10) Palavras finais.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1) Pré-requistos:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Para começarmos precisamos compreender os pré requisitos para essa construção:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Para um melhor entendimento é importante ter conhecimentos básicos de HTML, CSS, JavaScript, React e uma pitada de ES6.&lt;/li&gt;
&lt;li&gt; Verifique se você possui o &lt;a href="https://nodejs.org/en"&gt;Node&lt;/a&gt; configurado em sua máquina; &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;2) Configuração da biblioteca React&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Execute o comando abaixo para instalar o projeto React e construir o modelo de UI do React Login-Sign Up usando &lt;strong&gt;create-react-app&lt;/strong&gt; &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--05MxmykR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67khg2fwb8a70gnftnbh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--05MxmykR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67khg2fwb8a70gnftnbh.png" alt="Image description" width="675" height="48"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Entre no projeto &lt;strong&gt;login-signup-ui&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ddwH1xPf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22zedv7la1kxzxek8cx1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ddwH1xPf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22zedv7la1kxzxek8cx1.png" alt="cd login-signin" width="666" height="38"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Obs: Para aqueles que estão começando, recomendo NÃO copiarem e colarem os códigos, mas visualizarem todas as imagens dos códigos que serão anexadas e busquem reproduzir as linhas de código, digitando-as. Isso forçará a se lembrarem das linhas, nomes e sintaxes necessárias na hora de digitarem.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3) Instalação e configuração do framework Bootstrap&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Em seguida, abra o seu painel e instale a estrutura de UI &lt;a href="https://getbootstrap.com/"&gt;Bootstrap&lt;/a&gt; este fornece ótimos componentes de UI que iremos utilizar.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--MJ6UM-0w--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lagw3nawmel63zwunysx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--MJ6UM-0w--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lagw3nawmel63zwunysx.png" alt="bootstrap install" width="677" height="46"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Em seguida, importe &lt;strong&gt;bootstrap.min.css&lt;/strong&gt; de node_modules dentro do arquivo &lt;strong&gt;src/App.js&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--foIV-gxw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lsvgrkfi8dt69r5tmu2v.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--foIV-gxw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lsvgrkfi8dt69r5tmu2v.png" alt="Image description" width="800" height="369"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4) Criação dos componentes  Login e Signup&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Agora é hora de criar os componentes &lt;strong&gt;Login&lt;/strong&gt; e  &lt;strong&gt;Sign up&lt;/strong&gt; no &lt;strong&gt;React App&lt;/strong&gt;;&lt;br&gt;
Primeiro crie um diretório &lt;strong&gt;components&lt;/strong&gt; na pasta &lt;strong&gt;src&lt;/strong&gt;. E dentro deste  crie os arquivos &lt;strong&gt;login.js&lt;/strong&gt; e &lt;strong&gt;signup.js&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--gP1nGGRf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ngzzbkgbynz67hq8a72.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--gP1nGGRf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ngzzbkgbynz67hq8a72.png" alt="src - components" width="204" height="111"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Adicione o seguinte código no arquivo &lt;strong&gt;login.js&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--utuTHgTK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nmz1cz8oya1wmshlp5j0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--utuTHgTK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nmz1cz8oya1wmshlp5j0.png" alt="login component" width="652" height="375"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Agora adicione o seguinte código no arquivo &lt;strong&gt;signup.js&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--VWth1xkC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ht0nbi86h4ydgvbxgywg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--VWth1xkC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ht0nbi86h4ydgvbxgywg.png" alt="signup-component" width="582" height="272"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;5) Ativação do Routing no React&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Execute o comando no terminal para instalar o módulo &lt;a href="https://www.npmjs.com/package/react-router-dom"&gt;react-router-dom&lt;/a&gt; e habiliatr o serviço Router no React.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--02dAuJAM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g5vw6eenvvjk3i5nxlql.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--02dAuJAM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g5vw6eenvvjk3i5nxlql.png" alt="react router" width="676" height="44"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Em seguida, vá para o arquivo &lt;strong&gt;src/index.js&lt;/strong&gt; e insira o seguinte código no arquivo conforme abaixo.&lt;/p&gt;

&lt;p&gt;Imagem do arquivo &lt;strong&gt;src/index.js&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--4GxBU2U4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0c79zmfldv17om5ipsis.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--4GxBU2U4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0c79zmfldv17om5ipsis.png" alt="src-index.js" width="660" height="306"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Em seguida, importe &lt;strong&gt;BrowserRouter as Router, Routes, Route, Link React&lt;/strong&gt; para habilitar os routers.&lt;/p&gt;

&lt;p&gt;Agora entre em &lt;strong&gt;src/App.js&lt;/strong&gt; e inclua o seguinte código nele:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--TmFCXnSA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tpyje0opdcbbqlsh448j.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--TmFCXnSA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tpyje0opdcbbqlsh448j.png" alt="react router" width="800" height="1626"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;7) Crie um modelo de UI para cadastro React com Bootstrap&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A seguir, adicionaremos o seguinte código dentro do arquivo &lt;strong&gt;components/login.js&lt;/strong&gt; para construir login form template&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--2qWIUDnK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jwe5jwpkuk0832b52sz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--2qWIUDnK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jwe5jwpkuk0832b52sz.png" alt="loginjs" width="800" height="1616"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A seguir a saída para o form da UI de registro no React.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--WQZFNqxV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yfgw751kb8ltfdndd1j.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--WQZFNqxV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yfgw751kb8ltfdndd1j.png" alt="interface login - sign up image " width="797" height="459"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;8) Criação do React Sign Up UI Template com Bootstrap&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A seguir, iremos inserir o seguinte código dentro do arquivo &lt;strong&gt;components/signup.js&lt;/strong&gt; para construir &lt;strong&gt;Sign up form template UI&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--qY5Q31DP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i6gspx18ah5spswy0kui.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--qY5Q31DP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i6gspx18ah5spswy0kui.png" alt="signup-component" width="800" height="1740"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Essa será a saída para o registration UI form no React.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--hPvulfpM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qj6yuksoiwvxfijpxvu3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--hPvulfpM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qj6yuksoiwvxfijpxvu3.png" alt="Image description" width="417" height="487"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;9) Adicionar estilos aos componentes de autenticação&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Nesta etapa, adicionaremos estilo ao nosso aplicativo de UI de login React para torná-lo mais atraente. &lt;/p&gt;

&lt;p&gt;Vá para o arquivo &lt;strong&gt;src/index.css&lt;/strong&gt; e adicione o código fornecido abaixo.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ilUgYCDz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tgtns6zeffmtaptwlxi.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ilUgYCDz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tgtns6zeffmtaptwlxi.png" alt="index-css" width="800" height="3055"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Você deve iniciar o aplicativo React usando o comando abaixo:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--_HIxt31---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pbjzig64drznaeo7us8w.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--_HIxt31---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pbjzig64drznaeo7us8w.png" alt="npm start" width="681" height="37"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;10) Palavras finais.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Por fim, construímos o modelo React Login &amp;amp; Sign Up UI usando a estrutura Bootstrap UI.&lt;/p&gt;

&lt;p&gt;Espero  de verdade que este humilde tutorial te ajude a entender em como usar os componentes da UI do Bootstrap para criar belos componentes no React.&lt;/p&gt;

&lt;p&gt;Por favor, considere compartilhar com outras pessoas.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/DaveSimoes/login-signup-react-bootstrap/tree/main"&gt;Este projeto se encontra em meu Repositório no GitHub&lt;/a&gt;&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>tutorial</category>
      <category>react</category>
      <category>frontend</category>
    </item>
  </channel>
</rss>
