<?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: Heghine</title>
    <description>The latest articles on DEV Community by Heghine (@zeroaninea_8bec34a4e7d029).</description>
    <link>https://dev.to/zeroaninea_8bec34a4e7d029</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%2F2614675%2Fff18a61a-6023-4f1a-833c-adae0c63c6af.png</url>
      <title>DEV Community: Heghine</title>
      <link>https://dev.to/zeroaninea_8bec34a4e7d029</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/zeroaninea_8bec34a4e7d029"/>
    <language>en</language>
    <item>
      <title>I Applied to Dozens of Freelance Developer Jobs on LinkedIn — Here's what Happened</title>
      <dc:creator>Heghine</dc:creator>
      <pubDate>Wed, 08 Apr 2026 06:15:25 +0000</pubDate>
      <link>https://dev.to/zeroaninea_8bec34a4e7d029/i-applied-to-dozens-of-freelance-developer-jobs-on-linkedin-heres-what-happened-255e</link>
      <guid>https://dev.to/zeroaninea_8bec34a4e7d029/i-applied-to-dozens-of-freelance-developer-jobs-on-linkedin-heres-what-happened-255e</guid>
      <description>&lt;p&gt;This week, my LinkedIn profile appeared 877 times.&lt;/p&gt;

&lt;p&gt;I spent the last few days actively applying to freelance developer posts — sending messages, writing emails, and reaching out to people for React, Angular, and full-stack developers.&lt;/p&gt;

&lt;p&gt;For long time, I didn't think deeply about the process of getting a job. I thought that building projects and learning new technologies would somehow help me start working as a freelancer.&lt;/p&gt;

&lt;p&gt;It wasn't.&lt;/p&gt;

&lt;p&gt;So instead of continuing to learn endlessly, I decided to do something different: I started treating LinkedIn like a real opportunity source — and began applying consistently.&lt;/p&gt;

&lt;p&gt;What happened next was surprisingly different from what I expected.&lt;/p&gt;




&lt;h2&gt;
  
  
  What I Actually Did
&lt;/h2&gt;

&lt;p&gt;Instead of just scrolling or learning passively, I started taking action:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Applied to multiple freelance posts every day;&lt;/li&gt;
&lt;li&gt;Sent emails and LikedIn DMs;&lt;/li&gt;
&lt;li&gt;Shared my work (my Real-Time Chat App and portfolio);&lt;/li&gt;
&lt;li&gt;Shared conversations with potential clients.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I don't want to feel "ready." I just started.&lt;/p&gt;

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

&lt;h3&gt;
  
  
  1. Most People Don't Reply
&lt;/h3&gt;

&lt;p&gt;This was the first thing I noticed. You can send multiple messages, and get no response at all. At first. it feels like rejection. But it's not.&lt;/p&gt;

&lt;p&gt;I just how things work.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;People are busy;&lt;/li&gt;
&lt;li&gt;Posts get flooded with messages;&lt;/li&gt;
&lt;li&gt;Many applications are ignored.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is normal.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Timing Matters More Than I Expected
&lt;/h3&gt;

&lt;p&gt;Applying early makes a big difference.&lt;/p&gt;

&lt;p&gt;Posts that are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Recently published;&lt;/li&gt;
&lt;li&gt;Have fewer comments.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Are much more likely to get a response.&lt;/p&gt;

&lt;p&gt;If you apply late, you're just one of many.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Messaging Matters
&lt;/h3&gt;

&lt;p&gt;At first, I wrote very genetic messages. They didn't work well. What I worked better was being clear and direct:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;What I can build;&lt;/li&gt;
&lt;li&gt;What I've already built;&lt;/li&gt;
&lt;li&gt;How I can help with their project.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;People don't want long introductions. They want to understand quickly if you're useful.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. A Board Tech Stack Helps — But Not in the Way I Expected
&lt;/h3&gt;

&lt;p&gt;One unexpected advantage I had was knowing multiple frameworks. Since I've worked with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Angular;&lt;/li&gt;
&lt;li&gt;React;&lt;/li&gt;
&lt;li&gt;React Native;&lt;/li&gt;
&lt;li&gt;Next.js;&lt;/li&gt;
&lt;li&gt;Vue.js;&lt;/li&gt;
&lt;li&gt;Nest.js;&lt;/li&gt;
&lt;li&gt;Node.js.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I didn't have to skip many posts.&lt;/p&gt;

&lt;p&gt;I could apply to wide range of opportunities:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Frontend;&lt;/li&gt;
&lt;li&gt;Full-stack;&lt;/li&gt;
&lt;li&gt;Sometimes even backend-focused roles.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;But this doesn't mean you need to learn everything. What actually matters is:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Being able to build real things.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The tech stack just gives you more entry points.&lt;/p&gt;




&lt;h3&gt;
  
  
  Real Conversations Started to Happen
&lt;/h3&gt;

&lt;p&gt;After some time, I started getting responses.&lt;/p&gt;

&lt;p&gt;Not many — but enough to notice a pattern.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;I had a conversation about a JAMStack role and went through an interview.&lt;/li&gt;
&lt;li&gt;I connected with other developers.&lt;/li&gt;
&lt;li&gt;Some people told me they might reach out in the future.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Nothing immediate came out of it, but it felt like I was no longer just sending messages into nothing.&lt;/p&gt;

&lt;p&gt;Eventually, I started having actual conversations with potential clients.&lt;/p&gt;

&lt;p&gt;In one of them, I was asked:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"What are your charges for an app?"&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;It wasn't surprising — just a bit unexpected how quickly the conversation moved to pricing.&lt;/p&gt;

&lt;p&gt;I tried to understand the project first and asked about the scope.&lt;/p&gt;

&lt;p&gt;But they asked again.&lt;/p&gt;

&lt;p&gt;So I gave a simple range:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;basic MVP: around $300–800&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;They said they would get back to me. And maybe they will, maybe they won't. But that wasn't the important part.&lt;/p&gt;

&lt;p&gt;The important part was that the process had changed:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;From applying to having real discussions.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h3&gt;
  
  
  Advice If You're Starting
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Don't wait until you feel ready;&lt;/li&gt;
&lt;li&gt;Apply even if you don't match every requirement;&lt;/li&gt;
&lt;li&gt;Build at least one real project;&lt;/li&gt;
&lt;li&gt;Keep sending messages, even if most don’t reply.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Consistency matters more than perfection.&lt;/p&gt;




&lt;h3&gt;
  
  
  Afterword
&lt;/h3&gt;

&lt;p&gt;I'm currently building and sharing my work publicly, including a Real-Time Chat Application and other ongoing projects.&lt;/p&gt;

&lt;p&gt;I'm also open to freelance opportunities.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;GitHub: &lt;a href="https://github.com/ZeroaNinea/" rel="noopener noreferrer"&gt;https://github.com/ZeroaNinea/&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Portfolio: &lt;a href="https://heghine-app.netlify.app" rel="noopener noreferrer"&gt;https://heghine-app.netlify.app&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>linkedin</category>
      <category>webdev</category>
      <category>devrel</category>
    </item>
    <item>
      <title>I Built a Real-Time Chat App From Scratch — Then Realized That Wasn't Enough</title>
      <dc:creator>Heghine</dc:creator>
      <pubDate>Mon, 30 Mar 2026 05:52:48 +0000</pubDate>
      <link>https://dev.to/zeroaninea_8bec34a4e7d029/i-built-a-real-time-chat-app-from-scratch-then-realized-that-wasnt-enough-5515</link>
      <guid>https://dev.to/zeroaninea_8bec34a4e7d029/i-built-a-real-time-chat-app-from-scratch-then-realized-that-wasnt-enough-5515</guid>
      <description>&lt;h2&gt;
  
  
  Source
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;GitHub: &lt;a href="https://github.com/ZeroaNinea/Real-Time-Chat-App" rel="noopener noreferrer"&gt;https://github.com/ZeroaNinea/Real-Time-Chat-App&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Why I Built It
&lt;/h2&gt;

&lt;p&gt;I started this project as a simple pet project to help me get a job.&lt;/p&gt;

&lt;p&gt;I built a real-time chat application from scratch, solving problems step by step and turning it into something that actually worked.&lt;/p&gt;

&lt;p&gt;But after finishing it, I didn't immediately start applying.&lt;/p&gt;

&lt;p&gt;Instead, I thought:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"I need to learn more first."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;So I spent the next seven months learning frameworks like React, Vue, Next.js, and Nest.js.&lt;/p&gt;

&lt;p&gt;Only later did I realize something important:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I could have already started looking for a job.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;After that, I spent two more months on LinkedIn and writing posts, but still didn't get results.&lt;/p&gt;

&lt;p&gt;That's when it became clear:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Building projects is important.&lt;/li&gt;
&lt;li&gt;Learning is important.&lt;/li&gt;
&lt;li&gt;But knowing how to present yourself and reach people matters just as much.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  The Biggest Challenge: WebSockets and Structure
&lt;/h2&gt;

&lt;p&gt;One of the hardest parts of the project was working with WebSockets using Socket.io.&lt;/p&gt;

&lt;p&gt;At the time:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;I didn't fully understand how it worked.&lt;/li&gt;
&lt;li&gt;I couldn't properly connect users to rooms.&lt;/li&gt;
&lt;li&gt;all my Socket.io logic was in one huge file.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It quickly became difficult to manage.&lt;/p&gt;

&lt;p&gt;The real issue wasn't just bugs — it was structure.&lt;/p&gt;

&lt;p&gt;After refactoring:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;I split the logic into smaller parts&lt;/li&gt;
&lt;li&gt;separated responsibilities&lt;/li&gt;
&lt;li&gt;made the system easier to understand&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That was a turning point.&lt;/p&gt;




&lt;h2&gt;
  
  
  Mistakes I Made
&lt;/h2&gt;

&lt;p&gt;A major mistake was not clearly separating real-time and non-real-time logic.&lt;/p&gt;

&lt;p&gt;I relied heavily on WebSockets early on, which led to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Mixing different types of functionality.&lt;/li&gt;
&lt;li&gt;Unclear architecture.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If I were to rebuild it, I would:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Use REST APIs for standard operations.&lt;/li&gt;
&lt;li&gt;Use WebSockets only where real-time updates are necessary.&lt;/li&gt;
&lt;li&gt;Define clear boundaries from the beginning.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  What I'd Improve
&lt;/h2&gt;

&lt;p&gt;There's still a lot I want to improve:&lt;/p&gt;

&lt;h3&gt;
  
  
  Features
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;File uploads (images, videos, text files).&lt;/li&gt;
&lt;li&gt;Highlighting the current channel.&lt;/li&gt;
&lt;li&gt;Customizable themes (including dark mode variants).&lt;/li&gt;
&lt;li&gt;Movable UI elements.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  UX
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Better message display and layout&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Architecture
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;End-to-end encryption.&lt;/li&gt;
&lt;li&gt;A separate service for encryption key rotation.&lt;/li&gt;
&lt;/ul&gt;




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

&lt;p&gt;The biggest lesson wasn't technical.&lt;/p&gt;

&lt;p&gt;It was this:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Building something real is necessary — but it's not enough on its own.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;You also need to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Show your work.&lt;/li&gt;
&lt;li&gt;Communicate clearly.&lt;/li&gt;
&lt;li&gt;Reach the right people.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Otherwise, even a solid project can go unnoticed.&lt;/p&gt;




&lt;h2&gt;
  
  
  Afterword
&lt;/h2&gt;

&lt;p&gt;This project became more than just a chat app.&lt;/p&gt;

&lt;p&gt;It taught me:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;How to build real systems.&lt;/li&gt;
&lt;li&gt;How to deal with complexity.&lt;/li&gt;
&lt;li&gt;And how important visibility is.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you're learning development, don't just build —&lt;br&gt;
make sure people can actually see what you've built.&lt;/p&gt;

</description>
      <category>angular</category>
      <category>node</category>
      <category>socketio</category>
      <category>devrel</category>
    </item>
    <item>
      <title>Build a Modern Stack with Vite, Tailwind, i18next, and TanStack Router</title>
      <dc:creator>Heghine</dc:creator>
      <pubDate>Fri, 20 Mar 2026 13:43:58 +0000</pubDate>
      <link>https://dev.to/zeroaninea_8bec34a4e7d029/build-a-modern-stack-with-vite-tailwind-i18next-and-tanstack-router-447d</link>
      <guid>https://dev.to/zeroaninea_8bec34a4e7d029/build-a-modern-stack-with-vite-tailwind-i18next-and-tanstack-router-447d</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Source:&lt;/strong&gt; &lt;a href="https://github.com/ZeroaNinea/React-Vite-i18next--tanstack-react-router-Tailwind-Example" rel="noopener noreferrer"&gt;https://github.com/ZeroaNinea/React-Vite-i18next--tanstack-react-router-Tailwind-Example&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Setting up a modern React project can quickly turn into dependency chaos — especially when combining routing, styling, and internationalization.&lt;/p&gt;

&lt;p&gt;In this guide, you'll build a clean, production-ready setup using:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;⚛️ React&lt;/li&gt;
&lt;li&gt;⚡ Vite&lt;/li&gt;
&lt;li&gt;🎨 Tailwind CSS&lt;/li&gt;
&lt;li&gt;🌍 i18next&lt;/li&gt;
&lt;li&gt;🧭 TanStack Router&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  ⚠️ Warning (Version Compatibility)
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;Depending on your Vite version, some dependencies may not install cleanly.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;If you run into issues:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm i &lt;span class="nt"&gt;--force&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Or consider using a slightly older version of Vite.&lt;/p&gt;

&lt;h2&gt;
  
  
  🚀 Step 1 — Create the Project
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm create vite@latest React-Vite-i18next-@tanstack/react-router-Tailwind-Example &lt;span class="nt"&gt;--&lt;/span&gt; &lt;span class="nt"&gt;--template&lt;/span&gt; react-ts
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  🎨 Step 2 — Install Tailwind CSS
&lt;/h2&gt;

&lt;p&gt;Install Talwind and its Vite plugin.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm i tailwindcss @tailwindcss/vite
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If installation fails:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm i &lt;span class="nt"&gt;--force&lt;/span&gt; @tailwindcss/vite
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Configure Vite
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;defineConfig&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;vite&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;react&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@vitejs/plugin-react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;tailwindcss&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@tailwindcss/vite&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nf"&gt;defineConfig&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;plugins&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nf"&gt;react&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt; &lt;span class="nf"&gt;tailwindcss&lt;/span&gt;&lt;span class="p"&gt;()],&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Import Tailwind
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="nd"&gt;import&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;tailwindcss&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  🧭 Step 3 — Install TanStack Router
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm i @tanstack/react-router @tanstack/router-devtools
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  🔌 Step 4 — Integrate the Router
&lt;/h2&gt;

&lt;p&gt;Create:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;src/router.tsx
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then connect it in &lt;code&gt;main.tsx&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;StrictMode&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;createRoot&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react-dom/client&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./index.css&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;AppRouter&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./router.tsx&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nf"&gt;createRoot&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;root&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;render&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;StrictMode&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;AppRouter&lt;/span&gt; &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;
  &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/StrictMode&amp;gt;&lt;/span&gt;&lt;span class="err"&gt;,
&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  🌍 Step 5 — Add Internationalization (i18next)
&lt;/h2&gt;

&lt;p&gt;Install:&lt;br&gt;
&lt;/p&gt;

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

&lt;/div&gt;



&lt;h3&gt;
  
  
  Setup i18n
&lt;/h3&gt;

&lt;p&gt;Create:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;src/utils/i18n/index.ts
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Add your translation JSON files there.&lt;/p&gt;

&lt;p&gt;Then import it once in your app:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./utils/i18n&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Finally, integrate it inside your components (e.g. &lt;code&gt;App.tsx&lt;/code&gt;).&lt;/p&gt;

&lt;h2&gt;
  
  
  Why This Stack?
&lt;/h2&gt;

&lt;p&gt;This combination is surprisingly powerful:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Vite:&lt;/strong&gt; instant dev server, fast builds.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Tailwind:&lt;/strong&gt; no context switching for styling.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;TanStack Router:&lt;/strong&gt; type-safe, modern routing.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;i18next:&lt;/strong&gt; scalable internationalization.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Together, they form a minimal but production-ready architecture.&lt;/p&gt;

</description>
      <category>react</category>
      <category>vite</category>
      <category>tutorial</category>
      <category>setup</category>
    </item>
  </channel>
</rss>
