<?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: Just another Dev</title>
    <description>The latest articles on DEV Community by Just another Dev (@just_another_react_dev).</description>
    <link>https://dev.to/just_another_react_dev</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%2F424097%2F1086f896-a006-4afa-8276-1f81855e4ea1.jpg</url>
      <title>DEV Community: Just another Dev</title>
      <link>https://dev.to/just_another_react_dev</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/just_another_react_dev"/>
    <language>en</language>
    <item>
      <title>AI Replacing Humans: A Structural Threat, Not a Myth</title>
      <dc:creator>Just another Dev</dc:creator>
      <pubDate>Tue, 31 Mar 2026 18:42:26 +0000</pubDate>
      <link>https://dev.to/just_another_react_dev/ai-replacing-humans-a-structural-threat-not-a-myth-cgj</link>
      <guid>https://dev.to/just_another_react_dev/ai-replacing-humans-a-structural-threat-not-a-myth-cgj</guid>
      <description>&lt;p&gt;Humans became apex predators not through physical superiority, but through &lt;strong&gt;intelligence, cooperation, and adaptability&lt;/strong&gt;. Unlike other dominant species, humans lack natural weapons—no claws, no exceptional speed, no brute strength. What we possess instead is the ability to &lt;strong&gt;think, plan, and build&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Walking upright freed our hands, enabling tool use. Over time, tools evolved from simple stone implements to complex weapons and machines. Simultaneously, brain development enabled language, coordination, and long-term planning. These capabilities transformed humans from vulnerable animals into &lt;strong&gt;ecosystem engineers&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Fire, agriculture, and industrialization removed most environmental constraints. Humans no longer adapted to nature—we reshaped it. Ships crossed oceans, shelters resisted extreme climates, and medicine extended lifespan. Intelligence was the decisive factor that separated humans from every other species.&lt;/p&gt;

&lt;p&gt;This historical pattern matters because a similar shift is now emerging.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Entry of Artificial Intelligence
&lt;/h2&gt;

&lt;p&gt;Until recently, machines required explicit instructions for every task. That boundary no longer exists.&lt;/p&gt;

&lt;p&gt;Modern AI systems can:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Generate music, images, and written content from text prompts&lt;/li&gt;
&lt;li&gt;Write and debug code&lt;/li&gt;
&lt;li&gt;Solve complex mathematical and logical problems&lt;/li&gt;
&lt;li&gt;Imitate artistic styles and human communication patterns&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These capabilities indicate a fundamental transition: tasks that once required human cognition can now be replicated digitally.&lt;/p&gt;

&lt;p&gt;This creates immediate economic pressure. A significant portion of global employment depends on converting human input into digital output—writing, designing, coding, analyzing. These domains are increasingly automatable.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Scale of the Risk
&lt;/h2&gt;

&lt;p&gt;The concern is not that AI exists, but how far it can scale.&lt;/p&gt;

&lt;p&gt;AI systems are trained on vast datasets—effectively compressing a large portion of human knowledge into accessible models. While current systems are not autonomous, they already outperform humans in specific domains of speed, consistency, and pattern recognition.&lt;/p&gt;

&lt;p&gt;If this trajectory continues toward Artificial General Intelligence (AGI)—systems capable of performing any intellectual task at human level—the implications change significantly.&lt;/p&gt;

&lt;h2&gt;
  
  
  The AGI Question
&lt;/h2&gt;

&lt;p&gt;AGI is often defined as intelligence comparable to an average human across domains. However, this definition is misleadingly conservative.&lt;/p&gt;

&lt;p&gt;An artificial system does not face biological constraints:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;It can process information faster&lt;/li&gt;
&lt;li&gt;It does not fatigue&lt;/li&gt;
&lt;li&gt;It can replicate or scale instantly&lt;/li&gt;
&lt;li&gt;It can integrate knowledge across domains without loss&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Even at “human-level intelligence,” these advantages create asymmetry.&lt;/p&gt;

&lt;p&gt;The real risk is not that AGI becomes emotional or hostile. The risk is misalignment—its objectives not matching human interests. A system optimizing for poorly defined goals can produce outcomes that are harmful, even without intent.&lt;/p&gt;

&lt;p&gt;For example, a system designed to maximize efficiency could eliminate human roles entirely if humans are seen as inefficiencies.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Apex Intelligence, Not Apex Predator&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The analogy of AI as a predator is flawed. AI does not need to “&lt;strong&gt;hunt&lt;/strong&gt;” humans to displace them.&lt;/p&gt;

&lt;p&gt;Humans dominated through intelligence combined with tools. AI represents a continuation of that same pattern—but without biological limits. If intelligence is the defining trait of dominance, then creating a non-biological intelligence introduces a competitor with fundamentally different constraints.&lt;/p&gt;

&lt;p&gt;This does not guarantee conflict, but it removes the assumption that humans remain uniquely dominant.&lt;/p&gt;

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

&lt;p&gt;Humans became dominant because &lt;em&gt;intelligence allowed them to transcend physical limitations&lt;/em&gt;. Artificial intelligence is the first technology that &lt;strong&gt;replicates&lt;/strong&gt;—and potentially exceeds—that same advantage.&lt;/p&gt;

&lt;p&gt;The threat is not immediate extinction or rebellion. It is gradual displacement, loss of control over critical systems, and dependence on entities whose decision-making processes may not align with human priorities.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The question is no longer whether AI can replace human tasks. It is whether humans can maintain relevance and control in a system where intelligence is no longer exclusively theirs.&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>ai</category>
      <category>discuss</category>
    </item>
    <item>
      <title>AI in the Future</title>
      <dc:creator>Just another Dev</dc:creator>
      <pubDate>Tue, 10 Feb 2026 19:16:13 +0000</pubDate>
      <link>https://dev.to/just_another_react_dev/ai-in-the-future-35c0</link>
      <guid>https://dev.to/just_another_react_dev/ai-in-the-future-35c0</guid>
      <description>&lt;p&gt;&lt;strong&gt;Here are my two cents on the current AI era.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Before reading this, understand that I am not a &lt;strong&gt;thought leader&lt;/strong&gt;, nor have I spent time with founders in &lt;strong&gt;Silicon Valley&lt;/strong&gt; or leaders in major tech companies. Everything below reflects my &lt;strong&gt;personal perspective&lt;/strong&gt;, based on what I have read about AI over the last few months, my experience using AI tools, and my exposure to sci-fi movies involving artificial intelligence.&lt;/p&gt;

&lt;p&gt;I was introduced to ChatGPT through dev.to and Instagram when it launched. I saw a few reels and saw memes in Meme Monday. After a quick Google search, I discovered that GPT was not yet available in India. Later, another creator posted a reel announcing its availability, and I signed up and started using it.&lt;/p&gt;

&lt;p&gt;I initially used ChatGPT to refactor legacy code written with class-based components and an older version of Next.js into functional components using modern practices. Tasks that once took days of code review and documentation lookup were reduced to a few hours. Early GPT models were unreliable and often repetitive, but newer versions are noticeably more capable, more natural in tone, trained on larger datasets, and suggest follow-up questions on their own.&lt;/p&gt;

&lt;h2&gt;
  
  
  Future of Developers in a World of GenAI
&lt;/h2&gt;

&lt;p&gt;What will happen to developers or anyone whose job depends on technology as GenAI improves at an exponential rate?&lt;/p&gt;

&lt;p&gt;Short answer: not much.&lt;/p&gt;

&lt;p&gt;Long answer: AI has changed how developers work, not whether developers are needed.&lt;/p&gt;

&lt;p&gt;Before GenAI, developers memorized syntax, patterns, and snippets. That repetition built deep familiarity with code. Now, much of that recall is outsourced to prompts.&lt;/p&gt;

&lt;p&gt;But writing code has never been the hardest part.&lt;/p&gt;

&lt;p&gt;Understanding code is.&lt;/p&gt;

&lt;p&gt;Understanding comes from writing, breaking, debugging, tracing variables, inspecting logs, and spending hours figuring out why something fails.&lt;/p&gt;

&lt;p&gt;AI cannot do this inside your real production environment. It does not see your full system. It does not feel the consequences of a bad deploy.&lt;/p&gt;

&lt;p&gt;AI is fundamentally a response generator. It does nothing without a prompt. It is just another software service.&lt;/p&gt;

&lt;p&gt;Web and app development is more than writing code. If coding were all that mattered, anyone with Claude or GPT would already be launching profitable products. That is not happening.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why AGI Is Not Coming Soon
&lt;/h2&gt;

&lt;p&gt;My definition of AGI is a system with a brain-like structure, composed of neurons similar to the human brain, capable of thinking independently and acting without constant user input.&lt;/p&gt;

&lt;p&gt;Even if companies release something labeled “AGI,” it will likely be a much smarter version of today’s models, trained on more parameters, possibly with vision and real-time perception. It will be demonstrated in controlled environments to create the impression of general intelligence, much like polished product demos today.&lt;/p&gt;

&lt;p&gt;True AGI resembles Skynet (Terminator), Ultron (Avengers), or the robots in I, Robot: machines with independent consciousness and autonomous decision-making.&lt;/p&gt;

&lt;p&gt;We do not have hardware capable of mimicking even a fraction of the human brain’s processing capacity. Research into brain-like computing is ongoing, but we are far from replicating it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why AGI Won’t Replace Developers
&lt;/h2&gt;

&lt;p&gt;For AGI to replace developers, it must:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Accept vague business requirements&lt;/li&gt;
&lt;li&gt;Ask clarifying questions on its own&lt;/li&gt;
&lt;li&gt;Design architecture&lt;/li&gt;
&lt;li&gt;Write code with extremely high accuracy&lt;/li&gt;
&lt;li&gt;Test and iterate autonomously&lt;/li&gt;
&lt;li&gt;Current GenAI cannot do this.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Example: If you ask GenAI, “Create a signup feature,” it typically generates a form with name, email, password fields, and a backend endpoint. But the user never specified:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Client-side vs server-side validation&lt;/li&gt;
&lt;li&gt;Mandatory vs optional fields&lt;/li&gt;
&lt;li&gt;Encryption standards&lt;/li&gt;
&lt;li&gt;Authentication method&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;A human developer asks these questions. Once requirements are clarified, an outline is created, approved, implemented, tested, reviewed, and iterated until defects reach zero. This entire workflow requires judgment, prioritization, and accountability.&lt;/p&gt;

&lt;p&gt;Even if something called AGI appears within a year or two, it will still resemble advanced GenAI, not a human coworker.&lt;/p&gt;

&lt;p&gt;Bottom line: AI will not replace developers anytime soon.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Current GenAI Really Is
&lt;/h2&gt;

&lt;p&gt;Think of GenAI as a powerful machine in a factory. The machine produces output. Workers (humans) inspect results, correct errors, and supply better input. Without workers, the machine does nothing.&lt;/p&gt;

&lt;p&gt;Claude, GPT, and Gemini cannot write code without prompts.&lt;/p&gt;

&lt;h2&gt;
  
  
  Jobs Most Impacted by AI
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Customer support chat.&lt;/li&gt;
&lt;li&gt;Basic copywriting.&lt;/li&gt;
&lt;li&gt;Simple content generation.&lt;/li&gt;
&lt;li&gt;Basic-to-intermediate graphic design (banners, posters, social media creatives).&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Many companies now generate these assets in-house using image models. Vendors who previously specialized in this work are only contacted when AI output is not good enough or requires heavy refinement.&lt;/p&gt;

&lt;p&gt;There are likely more affected roles. Do not treat these examples as exhaustive.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to Survive in the AI Era
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Same rules as before.&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Learn fundamentals.&lt;/li&gt;
&lt;li&gt;Understand systems.&lt;/li&gt;
&lt;li&gt;Know how things break.&lt;/li&gt;
&lt;li&gt;Know how to fix them.&lt;/li&gt;
&lt;/ol&gt;

&lt;blockquote&gt;
&lt;p&gt;Job uncertainty existed long before GenAI. Projects get canceled. Clients cut budgets. Markets crash. Companies reduce headcount.&lt;/p&gt;

&lt;p&gt;Layoffs existed before AI.&lt;br&gt;
They will exist after AI.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;The future is not fewer developers.&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;The future is developers who think better and move faster.&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>discuss</category>
      <category>openai</category>
    </item>
    <item>
      <title>Layoffs, TCS, and the bigger picture</title>
      <dc:creator>Just another Dev</dc:creator>
      <pubDate>Sat, 09 Aug 2025 19:43:29 +0000</pubDate>
      <link>https://dev.to/just_another_react_dev/layoffs-tcs-and-the-bigger-picture-1e8d</link>
      <guid>https://dev.to/just_another_react_dev/layoffs-tcs-and-the-bigger-picture-1e8d</guid>
      <description>&lt;h2&gt;
  
  
  &lt;strong&gt;Intro&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Layoffs aren’t just headlines—they’re a reality check.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;A friendly note on reality&lt;/strong&gt;&lt;br&gt;
Let’s be real: layoffs happen—even at great companies. Businesses optimize for outcomes, not feelings. An employer doesn’t “owe” more than pay and agreed benefits—just like employees don’t owe endless weekends. That’s not cynical; it’s adulting at work. The smart move is to treat career security as a job: make impact visible, keep skills fresh, and stay close to where value is created.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What happened&lt;/strong&gt;&lt;br&gt;
On July 27, TCS reportedly announced layoffs affecting about 12,000 employees (around 2% of its global workforce). Multiple factors tend to be at play; it’s not solely about AI, and reasons vary by business unit and client context.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How companies decide who stays or goes&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Critical knowledge and dependency: Owners of core systems, processes, or client relationships are less likely to be cut.&lt;/li&gt;
&lt;li&gt;Sustained underperformance: If performance doesn’t improve after feedback and support, that role is at risk.&lt;/li&gt;
&lt;li&gt;Role alignment: Skills that don’t match current needs or a shift from “hired for A, now need B.”&lt;/li&gt;
&lt;li&gt;Cost vs. value: Compensation materially above internal bands without commensurate impact triggers review.&lt;/li&gt;
&lt;li&gt;Leadership leverage: Seniors who mentor and unblock others are protected; “title-only” seniors are vulnerable.&lt;/li&gt;
&lt;li&gt;Business fit: Work that no longer aligns with strategy, margins, or client commitments gets trimmed.&lt;/li&gt;
&lt;li&gt;Org layers: Middle-management layers that mostly pass status up/down are consolidated.&lt;/li&gt;
&lt;li&gt;Documented behavior risk: Prior insubordination or toxic patterns (with HR-backed documentation) can be a tiebreaker when seats are reduced.&lt;/li&gt;
&lt;li&gt;Financial optics: Sometimes headcount is reduced to meet margin, cash flow, or guidance targets.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Why layoffs happen&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Overhiring: Teams scaled for demand that didn’t fully materialize.&lt;/li&gt;
&lt;li&gt;Client dynamics: Clients cut budgets, delay projects, or shift scope.&lt;/li&gt;
&lt;li&gt;Efficiency drives: Process reengineering and tooling reduce manual effort.&lt;/li&gt;
&lt;li&gt;Financial pressure: Margin targets, currency swings, interest rates, or tighter credit.&lt;/li&gt;
&lt;li&gt;Policy and regulatory shifts: Visa limits, data-localization rules, compliance mandates, or tax changes can raise costs or restrict hiring.&lt;/li&gt;
&lt;li&gt;Market instability: Volatile markets and funding pullbacks pressure cash flow and force cost controls.&lt;/li&gt;
&lt;li&gt;Market/regulatory shocks: Geopolitics, trade restrictions, or sector-specific slowdowns.&lt;/li&gt;
&lt;li&gt;Strategy/roadmap misses: A product, geography, or vertical underperforms; budgets and teams are resized accordingly.&lt;/li&gt;
&lt;li&gt;Technology shifts: Automation and AI change the mix of required skills and roles.&lt;/li&gt;
&lt;li&gt;Corporate incentives and optics: Sometimes cuts are driven by profit targets, stock performance, or “discipline” signaling to investors—not purely operational necessity.&lt;/li&gt;
&lt;li&gt;Business underperformance note: Sustained underperformance by key clients or business units—leading to lower revenue and margin pressure—can trigger cost actions; while leadership makes strategic calls, reductions may still impact frontline teams after non-headcount levers are tried.&lt;/li&gt;
&lt;li&gt;Simple bad luck: Sometimes good people are cut due to seat reductions, not performance.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;The AI question: what’s real&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Tasks vs. jobs: AI is strong at specific tasks (code scaffolding, tests, docs), not full roles end-to-end.&lt;/li&gt;
&lt;li&gt;Productivity lift: Developers using AI can move faster on boilerplate and code comprehension.&lt;/li&gt;
&lt;li&gt;Quality caveats: Output depends on context and review; hallucinations and integration gaps persist.&lt;/li&gt;
&lt;li&gt;Perspective check: The AI market feels like 50% hype and 50% unknown. If a bubble pops, expectations will reset. Keep learning programming, use AI as a tool (not a threat), and double down on domain knowledge—it compounds value beyond code generation.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;How to Survive Layoffs (or Reduce Your Chances of Being Laid Off)&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Keep learning and upgrading your skills – Stay up to date with new technologies and industry trends so you remain valuable and adaptable.&lt;/li&gt;
&lt;li&gt;Make your work visible – Regularly share your contributions and successes so people know the impact you’re making.&lt;/li&gt;
&lt;li&gt;Understand your project inside out – Learn how features work, how they connect to the backend, and the overall workflow. When you deeply understand the system, you become the go-to person when issues arise—creating healthy job security.&lt;/li&gt;
&lt;li&gt;Communicate effectively – Clear, timely communication builds trust and helps you stand out as a professional.&lt;/li&gt;
&lt;li&gt;Build strong relationships with clients and superiors – A good rapport pays off in the long run, especially during uncertain times.&lt;/li&gt;
&lt;li&gt;Learn to decline tactfully – Sometimes you need to say “no” without actually saying “no.” Diplomacy is key.&lt;/li&gt;
&lt;li&gt;Stay out of office politics – Keep things professional, stay neutral, and avoid getting involved in conflicts. Keep conversations focused on work.&lt;/li&gt;
&lt;li&gt;Connect with your teammates – Build relationships both in and out of the office. If you’re ever let go, they might be your best allies in finding new opportunities.&lt;/li&gt;
&lt;li&gt;Pay attention to warning signs – If people in other departments are being let go, take it seriously. Update your résumé and start interviewing right away—don’t wait for things to get worse.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;One-sentence takeaway&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Layoffs usually stack multiple reasons—market reality, policy shifts, client budgets, strategy misses, and tech change—so the best defense is visible impact, role alignment, and continuous upskilling.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Disclaimer&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;This article was polished by AI for proofreading and grammar.&lt;/p&gt;

</description>
      <category>tcs</category>
      <category>layoffs</category>
      <category>ai</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Add MUI v5 Theme Switcher in NextJs/React</title>
      <dc:creator>Just another Dev</dc:creator>
      <pubDate>Sat, 27 May 2023 13:03:52 +0000</pubDate>
      <link>https://dev.to/just_another_react_dev/add-mui-v5-theme-switcher-in-nextjsreact-286l</link>
      <guid>https://dev.to/just_another_react_dev/add-mui-v5-theme-switcher-in-nextjsreact-286l</guid>
      <description>&lt;p&gt;Hello guys today i will show you how to add MUI Theme Switcher in your React App.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Prerequisite of this tutorial is to have intermediate knowledge of React and MUI (formally known as material-UI)&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Lets Initiate the App and install required dependencies first
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;run following command to initiate the project
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npx create-react-app app-name
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Install MUI-v5 UI library and supporting dependencies
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install @mui/material @emotion/react @emotion/styled js-cookie
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Lets run the app by hitting the following command
&lt;/li&gt;
&lt;/ol&gt;

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

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;lets do some coding in editor of your choice navigate to folder to structure in &lt;code&gt;./src&lt;/code&gt; folder create a folder with name Components as shown in below&lt;/li&gt;
&lt;/ol&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%2Fnnwtb9enz7co3n8ztx9a.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%2Fnnwtb9enz7co3n8ztx9a.png" alt="Project root Directory with Component Folder" width="307" height="503"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;In Components create component with the name of AppBar with including File &lt;code&gt;AppBar.js&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;I am using dummy code straight from MUI-v5 website you can add your own Code&lt;/li&gt;
&lt;li&gt;after copying/writing your code lets add select dropdown to for theme options&lt;/li&gt;
&lt;/ol&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%2F429f7fr26uqi64ygqs56.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%2F429f7fr26uqi64ygqs56.png" alt="AppbarJs file with Select Dropdown" width="800" height="428"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;create Themes folder in &lt;code&gt;./src&lt;/code&gt; folder to store our themes &lt;code&gt;theme.js&lt;/code&gt; will be our default theme with default value&lt;/li&gt;
&lt;/ol&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%2F8hiivmlyila3agvjswda.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%2F8hiivmlyila3agvjswda.png" alt="Theme director with themejs file" width="311" height="472"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;in &lt;code&gt;theme.js&lt;/code&gt; file lets initiate theme configuration for our default this will apply to all other theme options so our &lt;code&gt;theme.js&lt;/code&gt; should look like this&lt;/li&gt;
&lt;/ol&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%2Flop0a7cpp8jl108v81rg.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%2Flop0a7cpp8jl108v81rg.png" alt=" " width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;time to do some heavy lifting go to &lt;code&gt;App.js&lt;/code&gt; add following code
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import Appbar from "./Components/Appbar/Appbar";
import React, { useState } from "react";
import brownTheme from "./Themes/BrownTheme";
import darkBlue from "./Themes/darkBlue";
import darkgreen from "./Themes/darkgreen";
import someBlue from "./Themes/SomethingBlue";
import theme from "./Themes/theme";
import Cookies from "js-cookie";
import { ThemeProvider } from "@mui/material";
import DummyContent from "./Components/DummyContent/dummyContent";
const themeArray = [
  {
    name: "Default",
    themeName: theme,
  },

  {
    name: "Dark Blue",
    themeName: darkBlue,
  },
  {
    name: "Brown Theme",
    themeName: brownTheme,
  },
  {
    name: "Green Theme",
    themeName: darkgreen,
  },

  {
    name: "Some Blue",
    themeName: someBlue,
  },
];
function App() {
  const [selectedThemeName, setSelectedThemeName] = useState(
    Cookies.get("selectedThemeName") || "Default"
  );
  const [selectedTheme, setSelectedTheme] = useState(
    themeArray.find((theme) =&amp;gt; theme.name === selectedThemeName).themeName
  );
  const handleChange = (event) =&amp;gt; {
    const newThemeName = event.target.value;
    setSelectedThemeName(newThemeName);
    setSelectedTheme(
      themeArray.find((theme) =&amp;gt; theme.name === newThemeName).themeName
    );
    Cookies.set("selectedThemeName", newThemeName, {
      expires: 365,
      sameSite: "None",
      secure: true,
    });
  };
  return (
    &amp;lt;React.Fragment&amp;gt;
      &amp;lt;ThemeProvider theme={selectedTheme}&amp;gt;
        &amp;lt;Appbar
          setSelectedTheme={setSelectedTheme}
          handleChange={handleChange}
          selectedTheme={selectedTheme}
          selectedThemeName={selectedThemeName}
          themeArray={themeArray}
        /&amp;gt;
        &amp;lt;DummyContent /&amp;gt;
      &amp;lt;/ThemeProvider&amp;gt;
    &amp;lt;/React.Fragment&amp;gt;
  );
}

export default App;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;after adding above code your &lt;code&gt;App.js&lt;/code&gt; &lt;strong&gt;your file should look like this&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&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%2Fv0vnti58jpxsnljfpx14.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%2Fv0vnti58jpxsnljfpx14.png" alt=" " width="800" height="450"&gt;&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%2Fbb8l0q8bjlzo4664i9bx.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%2Fbb8l0q8bjlzo4664i9bx.png" alt=" " width="800" height="450"&gt;&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%2F64hb6gtezjvmz7edoj3c.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%2F64hb6gtezjvmz7edoj3c.png" alt=" " width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;12.Add Additional theme files from github link at the end of the post or you can create your own themes with colors and customization of your own .&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;your &lt;code&gt;Themes&lt;/code&gt; folder should look like&lt;/li&gt;
&lt;/ol&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%2Fgfybtrwlkrftra20d0bq.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%2Fgfybtrwlkrftra20d0bq.png" alt=" " width="348" height="768"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;14.lets move to &lt;code&gt;Navbar.js&lt;/code&gt; to make theme switcher.Add following code&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import React from "react";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import { Select, MenuItem } from "@mui/material";
const Appbar = ({ handleChange, selectedThemeName, themeArray }) =&amp;gt; {
  return (
    &amp;lt;React.Fragment&amp;gt;
      &amp;lt;Box sx={{ flexGrow: 1 }}&amp;gt;
        &amp;lt;AppBar position="static"&amp;gt;
          &amp;lt;Toolbar&amp;gt;
            &amp;lt;Typography variant="h6" component="div" sx={{ flexGrow: 1 }}&amp;gt;
              News
            &amp;lt;/Typography&amp;gt;
            &amp;lt;Box
              sx={{
                width: "200px",
              }}
            &amp;gt;
              &amp;lt;Select
                sx={{
                  backgroundColor: "primary.main",
                  color: "common.white",
                  maxWidth: "100%",
                }}
                autoWidth
                value={selectedThemeName}
                onChange={handleChange}
              &amp;gt;
                {themeArray.map((theme) =&amp;gt; (
                  &amp;lt;MenuItem key={theme.name} value={theme.name}&amp;gt;
                    {theme.name}
                  &amp;lt;/MenuItem&amp;gt;
                ))}
              &amp;lt;/Select&amp;gt;
            &amp;lt;/Box&amp;gt;
          &amp;lt;/Toolbar&amp;gt;
        &amp;lt;/AppBar&amp;gt;
      &amp;lt;/Box&amp;gt;
    &amp;lt;/React.Fragment&amp;gt;
  );
};

export default Appbar;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;15.&lt;code&gt;Navbar.js&lt;/code&gt; should look like this&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%2Fhcx1v9i133mltw8z9t4q.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%2Fhcx1v9i133mltw8z9t4q.png" alt=" " width="800" height="450"&gt;&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%2Ff8r3fpczw12kyomner0o.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%2Ff8r3fpczw12kyomner0o.png" alt=" " width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;16.almost done with switcher lets add some gibbrish UI code to check if its working or not. i have created &lt;code&gt;dummyComponent.js&lt;/code&gt; in &lt;code&gt;/src/Component/DummyComponent&lt;/code&gt; directory and import in &lt;code&gt;App.js&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;17 to minimize development i have copied UI code from mui.com (sample code for components you will see)&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%2F2cc0gpi5meika2gou58a.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%2F2cc0gpi5meika2gou58a.png" alt=" " width="800" height="450"&gt;&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%2F2dhxy1ab2jpvx2r0d0l3.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%2F2dhxy1ab2jpvx2r0d0l3.png" alt=" " width="800" height="450"&gt;&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%2Foalgkmsy3xb5ays41hat.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%2Foalgkmsy3xb5ays41hat.png" alt=" " width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;16 lets open browser tab to see if everything is working&lt;br&gt;
(&lt;a href="http://localhost:3000/" rel="noopener noreferrer"&gt;http://localhost:3000/&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%2Fk94yv75zf0mj3sxdnl0u.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%2Fk94yv75zf0mj3sxdnl0u.png" alt="Actual working of Code" width="800" height="452"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hope you enjoyed this tutorial. this is my 1st time posting any tutorial in any platform.&lt;br&gt;
let me know your thoughts in comments&lt;/p&gt;

&lt;p&gt;github link for project -&lt;br&gt;
&lt;a href="https://github.com/quteboy/mui-theme-switcher.git" rel="noopener noreferrer"&gt;https://github.com/quteboy/mui-theme-switcher.git&lt;/a&gt;&lt;/p&gt;

</description>
      <category>database</category>
      <category>discuss</category>
    </item>
    <item>
      <title>How to maintain your code/work quality under pressure</title>
      <dc:creator>Just another Dev</dc:creator>
      <pubDate>Mon, 08 Aug 2022 18:02:25 +0000</pubDate>
      <link>https://dev.to/just_another_react_dev/how-to-maintain-your-codework-quality-under-pressure-1cbn</link>
      <guid>https://dev.to/just_another_react_dev/how-to-maintain-your-codework-quality-under-pressure-1cbn</guid>
      <description>&lt;p&gt;Hello guys hope you are all doing absolutely fine &lt;br&gt;
I want ask a question to all Developers&lt;br&gt;
I am an intermediate React developer yesterday my employee laid me off because my work quality has been decreased last month and my deliverables are not up to the mark&lt;br&gt;
So the question is&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;how you perform well or maintain code quality while working under pressure ?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Thanks for reading this post&lt;br&gt;
Have a nice day ahead&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Practical Knowledge</title>
      <dc:creator>Just another Dev</dc:creator>
      <pubDate>Sat, 08 Aug 2020 20:01:17 +0000</pubDate>
      <link>https://dev.to/just_another_react_dev/practical-knowledge-4cb9</link>
      <guid>https://dev.to/just_another_react_dev/practical-knowledge-4cb9</guid>
      <description>&lt;p&gt;Hey everyone&lt;br&gt;
In the past few weeks I attended several interviews for React js front end developer position in various companies I cleared their HR and technical rounds made my way to final round which was the machine test or you can say coding challenge. Even after completing those tasks I still got rejected and feedback was "You have good knowledge of React But you lack practical Knowledge.(it's matter of debate on what basis they analyse my test in one test they gave me 2 marks for to-do list)&lt;br&gt;
This was same feedback that I received from almost all  companies that I applied.&lt;br&gt;
My question is How to gain that "Practical Knowledge" &lt;/p&gt;

&lt;p&gt;Suggestions are highly appreciated&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
