<?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: Emeka Ugbanu - Software Developer</title>
    <description>The latest articles on DEV Community by Emeka Ugbanu - Software Developer (@emekaugbanu).</description>
    <link>https://dev.to/emekaugbanu</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.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F797864%2F67179f39-631f-4aa9-b7f2-d289efa9b78a.png</url>
      <title>DEV Community: Emeka Ugbanu - Software Developer</title>
      <link>https://dev.to/emekaugbanu</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/emekaugbanu"/>
    <language>en</language>
    <item>
      <title>The Psychology Behind Great Software</title>
      <dc:creator>Emeka Ugbanu - Software Developer</dc:creator>
      <pubDate>Mon, 13 Jul 2026 14:00:00 +0000</pubDate>
      <link>https://dev.to/emekaugbanu/the-psychology-behind-great-software-1g6o</link>
      <guid>https://dev.to/emekaugbanu/the-psychology-behind-great-software-1g6o</guid>
      <description>&lt;p&gt;The tech industry has evolved far beyond simply writing code.&lt;/p&gt;

&lt;p&gt;Programming is still incredibly valuable, but building successful software today requires much more than algorithms and clean architecture.&lt;/p&gt;

&lt;p&gt;It requires understanding human behavior, emotions, habits, motivations, and decision-making.&lt;/p&gt;

&lt;p&gt;That's where psychology comes in.&lt;/p&gt;

&lt;p&gt;The best products don't just solve technical problems. They understand the people using them.&lt;/p&gt;

&lt;h2&gt;
  
  
  Understanding the Human Element
&lt;/h2&gt;

&lt;p&gt;Building great software isn't just about making something work.&lt;/p&gt;

&lt;p&gt;It's about understanding the people you're building it for.&lt;/p&gt;

&lt;p&gt;What frustrates them?&lt;/p&gt;

&lt;p&gt;How do they think?&lt;/p&gt;

&lt;p&gt;What motivates them?&lt;/p&gt;

&lt;p&gt;What makes them hesitate?&lt;/p&gt;

&lt;p&gt;The more you understand your users, the easier it becomes to build software that feels natural instead of confusing.&lt;/p&gt;

&lt;p&gt;Great products don't force people to adapt.&lt;/p&gt;

&lt;p&gt;They adapt to people.&lt;/p&gt;

&lt;h2&gt;
  
  
  Psychology Principles Used in Great Software
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Hick’s Law  (Fewer Choices = Faster Decisions): Hick's Law mathematically proves that human brains take logarithmically longer to make a choice for every option you throw at them. It’s why huge restaurant menus make people nervous, but streamlined ones feel premium. Take the Google Search Homepage for example, Google indexes billions of web pages (the ultimate backend complexity), but the UI gives you exactly one choice: type what you want. It is the perfect visual representation of hiding options&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;2.Jakob’s Law (Users Expect Familiar Interfaces): Jakob's Law states that since your users spend 99% of their time on other apps, they expect your app to work exactly like those ones do. If you try to innovate by changing standard navigation layouts, you don’t look creative you just confuse people. The Bottom Navigation Bar in Instagram, Twitter/X, or Threads is an example Almost every major consumer social app puts the home icon on the far left and the profile on the far right. Because they don't break the "Mental Model," a user opening your app for the first time instantly knows how to move around without a tutorial&lt;/p&gt;

&lt;p&gt;3.Progressive Disclosure : Our brain's working memory can only handle a limited amount of information at once before it bugs out. Progressive disclosure is the art of sequencing information over time so you never choke the user with too much data. An example is the Duolingo Onboarding or Uber/Bolt Checkout Flow.  Imagine if Uber put the destination input, maps, 8 vehicle types, driver details, and credit card forms all on one single screen. It would look like a chaotic airplane dashboard. By breaking it into steps, they reduce mental friction.&lt;/p&gt;

&lt;p&gt;4.The Peak-End Rule :  Humans don’t remember the average of an experience. We only remember two things: the absolute most intense emotional point (the Peak) and the very final moment (the End). If your app is slightly slow but ends with a burst of pure satisfaction, users will remember it as a great app. An example is Asana (The Celebration Unicorn) or Duolingo (Lesson Completed Streak). Project management is boring, repetitive work. But by engineering a sudden, delightful "Peak" animation right when you finish a task, Asana turns a mundane moment into a dopamine hit that makes the software memorable.&lt;/p&gt;

&lt;p&gt;5.Aesthetic-Usability Effect : This principle describes a tendency for users to perceive attractive products as being more usable. A visually pleasing interface builds trust and credibility, making users more tolerant of minor usability issues. While aesthetics cannot replace fundamental usability, a polished design can significantly enhance the overall user experience.&lt;/p&gt;

&lt;h2&gt;
  
  
  Psychology Isn't Only for Users
&lt;/h2&gt;

&lt;p&gt;The best companies understand that psychology doesn't stop with the customer it also affects the people building the product. Healthy engineering teams communicate better, Good product discussions reduce stress and Clear design systems reduce decision fatigue. Understanding human behavior makes better software and healthier teams.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Dark Side of Psychology in Software
&lt;/h2&gt;

&lt;p&gt;while discussing the good and great side of applying Psychological principles to improve life and quality of both our users and software let's not forget that there's also a dark side. Software companies realized that the more time you spend in their app, the more ad revenue they make or the more data they collect. They stopped using psychology to make life simpler and started using it to make life addictive.&lt;/p&gt;

&lt;h2&gt;
  
  
  Dark Psychology Patterns in Software
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;The Variable Reward / Slot Machine Effect :In psychology, a "variable reward schedule" is the most addictive reinforcement model. If an action gives you a reward sometimes but not always, your brain goes crazy wanting to repeat it. It’s the exact science behind casino slot machines. An example is the The Infinite Scroll &amp;amp; Pull-to-Refresh. here is no "end" button. Pulling down to refresh feels exactly like pulling the lever on a slot machine—you don't know if the next piece of content will be boring or a massive hit of dopamine. This keeps users scrolling for hours, destroying their focus.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Artificial Urgency &amp;amp; Fomo : Humans are naturally terrified of losing out on something more than they are excited to gain something (Loss Aversion). An example is Booking sites or E-commerce apps saying "Only 1 room left at this price!" or "37 people are looking at this right now!". Often, these numbers are entirely fabricated or exaggerated by code. The software uses psychological panic to force you into making a fast financial decision before you can rationally think it through.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

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

&lt;p&gt;As developers, designers, and founders, we have a choice.We can use psychology to hook users, drain their time, and spike their anxiety for profit. Or, we can use psychology for good—to respect human attention, lower cognitive load, and make software feel effortless so users can get back to living their lives&lt;/p&gt;

&lt;p&gt;This is exactly why I'm building &lt;a href="https://www.stepmello.com/" rel="noopener noreferrer"&gt;StepMello&lt;/a&gt;. Many walking and fitness apps rely heavily on streaks, constant notifications, and fear of breaking progress. With &lt;a href="https://www.stepmello.com/" rel="noopener noreferrer"&gt;StepMello&lt;/a&gt;, my goal is different. I want a distraction-free experience that encourages people to slow down, reflect, and turn an ordinary walk into a meaningful memory not another digital obligation&lt;/p&gt;

&lt;p&gt;That's all for now.&lt;br&gt;
you can follow me here on dev.to for more and on twitter &lt;a href="https://x.com/EmekaUgbanu_" rel="noopener noreferrer"&gt;@EmekaUgbanu&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>software</category>
      <category>programming</category>
      <category>tutorial</category>
      <category>discuss</category>
    </item>
    <item>
      <title>Good Software Feels Simple But Isn’t</title>
      <dc:creator>Emeka Ugbanu - Software Developer</dc:creator>
      <pubDate>Sat, 11 Jul 2026 13:00:00 +0000</pubDate>
      <link>https://dev.to/emekaugbanu/good-software-feels-simple-but-isnt-3kle</link>
      <guid>https://dev.to/emekaugbanu/good-software-feels-simple-but-isnt-3kle</guid>
      <description>&lt;p&gt;We've all been there, especially as developers or first-time founders.&lt;/p&gt;

&lt;p&gt;We keep adding one more feature, one more screen, one more setting, or one more animation because we believe more equals better.&lt;/p&gt;

&lt;p&gt;It feels productive.&lt;/p&gt;

&lt;p&gt;It feels like progress.&lt;/p&gt;

&lt;p&gt;But most of the time, we're only making our software more complicated.&lt;/p&gt;

&lt;p&gt;The best software rarely feels impressive because of how much it can do.&lt;/p&gt;

&lt;p&gt;It feels impressive because of how much it understands the users and lets them accomplish what they came to do with as little effort as possible.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Do I Mean by "Simple"?
&lt;/h2&gt;

&lt;p&gt;When we say software is &lt;strong&gt;Simple&lt;/strong&gt; it doesn't mean easy to build.&lt;br&gt;
It means software that is natural and make the users feel like the product understands them.&lt;/p&gt;

&lt;p&gt;That's what makes software feel effortless.&lt;/p&gt;

&lt;p&gt;Ironically, creating that experience usually requires more engineering, not less.&lt;/p&gt;

&lt;p&gt;Making a single-button interface feel effortless often requires complex logic behind the scenes to handle edge cases, recover from errors, synchronize data, and keep the experience reliable&lt;/p&gt;

&lt;h2&gt;
  
  
  Simplicity Starts Before You Write Code
&lt;/h2&gt;

&lt;p&gt;We think simplicity comes from clean code.&lt;/p&gt;

&lt;p&gt;I think it starts much earlier.&lt;/p&gt;

&lt;p&gt;It starts with understanding your users.&lt;/p&gt;

&lt;p&gt;How do they think?&lt;/p&gt;

&lt;p&gt;What are they trying to accomplish?&lt;/p&gt;

&lt;p&gt;What frustrates them today?&lt;/p&gt;

&lt;p&gt;The more you understand those answers, the fewer features you'll need because you'll be solving the right problem instead of every possible problem.&lt;/p&gt;

&lt;p&gt;Architecture, user flows, and even the technologies you choose become much easier once you truly understand who you're building for.&lt;/p&gt;

&lt;h2&gt;
  
  
  Avoiding Feature Creep
&lt;/h2&gt;

&lt;p&gt;One of the biggest mistakes I see is feature creep.&lt;/p&gt;

&lt;p&gt;We assume our competitors have more features, so we need more features too.&lt;/p&gt;

&lt;p&gt;Or we think users will love having more options.&lt;/p&gt;

&lt;p&gt;In reality, every new feature comes with a cost.&lt;/p&gt;

&lt;p&gt;It adds more decisions.&lt;/p&gt;

&lt;p&gt;More maintenance.&lt;/p&gt;

&lt;p&gt;More testing.&lt;/p&gt;

&lt;p&gt;More documentation.&lt;/p&gt;

&lt;p&gt;More bugs.&lt;/p&gt;

&lt;p&gt;Sometimes improving an existing feature creates far more value than adding a new one.&lt;br&gt;
There's a quote from Bruce Lee that I think applies perfectly here:&lt;/p&gt;

&lt;p&gt;&lt;em&gt;"I fear not the man who has practiced 10,000 kicks once, but I fear the man who has practiced one kick 10,000 times."&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Great products work the same way.&lt;/p&gt;

&lt;p&gt;Master a few things instead of trying to do everything.&lt;/p&gt;

&lt;h2&gt;
  
  
  Great Software Removes Decisions
&lt;/h2&gt;

&lt;p&gt;One thing I've learned while building products is that users rarely want more choices.&lt;/p&gt;

&lt;p&gt;They want fewer decisions.&lt;/p&gt;

&lt;p&gt;Every unnecessary button, modal, animation, or setting increases the effort required to use your product.&lt;/p&gt;

&lt;p&gt;Good software doesn't make users think.&lt;/p&gt;

&lt;p&gt;It helps them stop thinking about the interface so they can focus on what they came to accomplish.&lt;/p&gt;

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

&lt;p&gt;It's easy to blame slow growth on missing features because features are visible.&lt;/p&gt;

&lt;p&gt;But before adding another one, ask yourself:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Do I truly understand my users?&lt;/li&gt;
&lt;li&gt;Am I solving a real problem?&lt;/li&gt;
&lt;li&gt;Does this make the product simpler or more complicated?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Sometimes the best feature you'll ever build is the one you decide not to build.&lt;/p&gt;

&lt;p&gt;💭 This is just my perspective after building products and making plenty of mistakes along the way.&lt;/p&gt;

&lt;p&gt;That's all for now.&lt;br&gt;
you can follow me here on dev.to for more and on twitter &lt;a class="mentioned-user" href="https://dev.to/emekaugbanu"&gt;@emekaugbanu&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I’m building &lt;a href="https://stepmello.com" rel="noopener noreferrer"&gt;StepMello&lt;/a&gt;, a reflective walking app that helps you slow down, capture moments, and turn everyday walks into meaningful memories. If that sounds interesting, I’d love your feedback&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>architecture</category>
      <category>software</category>
    </item>
    <item>
      <title>Writing Code Was Never the Hard Part</title>
      <dc:creator>Emeka Ugbanu - Software Developer</dc:creator>
      <pubDate>Fri, 10 Jul 2026 14:00:00 +0000</pubDate>
      <link>https://dev.to/emekaugbanu/writing-code-was-never-the-hard-part-5a9</link>
      <guid>https://dev.to/emekaugbanu/writing-code-was-never-the-hard-part-5a9</guid>
      <description>&lt;p&gt;it’s no secret that AI models are getting better at writing code. Since the release of ChatGPT, the progress has been incredible, and every few months they seem to become even more capable.&lt;/p&gt;

&lt;p&gt;A lot of developers have tied their identity to writing code, and I understand why. It’s the most visible part of what we do.&lt;/p&gt;

&lt;p&gt;But I want to offer a different perspective.&lt;/p&gt;

&lt;p&gt;In my experience, writing code was never the hardest part of software engineering.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Do I Mean by That?
&lt;/h2&gt;

&lt;p&gt;Before AI, the hardest part of my job wasn’t typing code into an editor.&lt;/p&gt;

&lt;p&gt;It was spending hours researching a problem, reading documentation, comparing Stack Overflow answers, testing different approaches, and figuring out why one solution was better than another.&lt;br&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fblfjjrk80d8en2nababs.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fblfjjrk80d8en2nababs.gif" alt="Thinking" width="480" height="206"&gt;&lt;/a&gt;&lt;br&gt;
Once I understood the solution and had proven it in a small test project, writing the actual code was usually the tiring part.&lt;/p&gt;

&lt;p&gt;The next challenge was making sure that solution would scale. Could another developer understand it six months later? Was it easy to change? Was there a simpler approach? Was I solving the right problem in the first place?&lt;/p&gt;

&lt;p&gt;Those questions have always been more difficult than writing the implementation.&lt;/p&gt;

&lt;p&gt;If anything, writing code was often the repetitive part that many developers wished could be automated.&lt;/p&gt;

&lt;h2&gt;
  
  
  Should We Be Worried About LLMs and Job Security?
&lt;/h2&gt;

&lt;p&gt;Personally, I don’t think we should panic.&lt;br&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F10mgglgjypvt70ndwpef.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F10mgglgjypvt70ndwpef.gif" alt="Calm" width="386" height="480"&gt;&lt;/a&gt;&lt;br&gt;
Instead, we should appreciate that AI can remove some of the repetitive work and give us more time to focus on what really matters: understanding users, designing better systems, and building better products.&lt;/p&gt;

&lt;p&gt;Being a software engineer has never been just about writing code quickly.&lt;/p&gt;

&lt;p&gt;It’s about making good technical decisions, communicating with teammates, understanding trade-offs, debugging complex problems, thinking about maintainability, and taking responsibility for what you build.&lt;/p&gt;

&lt;p&gt;Those responsibilities don’t disappear because an AI can generate code.&lt;/p&gt;

&lt;h2&gt;
  
  
  How I Think We Should Use LLMs
&lt;/h2&gt;

&lt;p&gt;AI writing your code doesn’t mean you should skip the engineering process.&lt;/p&gt;

&lt;p&gt;The process is still the valuable part.&lt;/p&gt;

&lt;p&gt;Today, I think the ideal workflow is &lt;strong&gt;AI-assisted development&lt;/strong&gt;, not blind vibe coding.&lt;/p&gt;

&lt;p&gt;Think through your architecture first.&lt;/p&gt;

&lt;p&gt;Choose technologies that actually fit your goals.&lt;/p&gt;

&lt;p&gt;Have coding standards and patterns that you want your project to follow.&lt;/p&gt;

&lt;p&gt;Then let AI generate an implementation.&lt;/p&gt;

&lt;p&gt;After that, review it, refactor it, improve it, and repeat the process.&lt;/p&gt;

&lt;p&gt;Think → Generate → Review → Refactor → Repeat.&lt;/p&gt;

&lt;p&gt;You don’t always need the most powerful model either. Even smaller modern open-source models can be incredibly capable when you give them clear context and precise instructions.&lt;/p&gt;

&lt;p&gt;Large frontier models certainly have advantages, but good engineering still matters more than model size.&lt;/p&gt;

&lt;p&gt;Vibe coding often relies on vague prompts and hopes the AI gets everything right.&lt;/p&gt;

&lt;p&gt;As developers, we shouldn’t aim to simply make something work.&lt;/p&gt;

&lt;p&gt;We should aim to understand the solution, own the architecture, and make the code easy to change in the future.&lt;/p&gt;

&lt;h2&gt;
  
  
  Man vs. Machine?
&lt;/h2&gt;

&lt;p&gt;It sounds like the plot of a movie: Man vs. Machine.&lt;/p&gt;

&lt;p&gt;I don’t think that’s the right way to look at it.&lt;/p&gt;

&lt;p&gt;The best use of AI isn’t replacing humans.&lt;/p&gt;

&lt;p&gt;It’s enhancing humans.&lt;/p&gt;

&lt;p&gt;AI should automate repetitive work so that people can spend more time thinking, designing, creating, and solving problems.&lt;/p&gt;

&lt;p&gt;Think about the Mona Lisa.&lt;/p&gt;

&lt;p&gt;Even if a robot could produce a visually identical painting, most people wouldn’t value it the same way as Leonardo da Vinci’s original.&lt;/p&gt;

&lt;p&gt;Not because the robot lacked technical ability, but because the human work represents creativity, intention, emotion, countless decisions, and the story behind its creation.&lt;/p&gt;

&lt;p&gt;Humans are valuable for much more than the output they produce.&lt;/p&gt;

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

&lt;p&gt;Rather than fighting AI or letting it think for us, I think we should focus on integrating it into our workflow in a thoughtful way.&lt;/p&gt;

&lt;p&gt;Let AI handle the repetitive parts.&lt;/p&gt;

&lt;p&gt;Use the extra time to think more deeply, design better systems, understand users, and create better solutions.&lt;/p&gt;

&lt;p&gt;That’s where real value has always come from.&lt;/p&gt;

&lt;p&gt;The tools have changed.&lt;/p&gt;

&lt;p&gt;The responsibility of building great software hasn’t.&lt;/p&gt;

&lt;p&gt;💭 This is just my perspective.&lt;br&gt;
Or maybe I've simply reached the final stage of grief: &lt;strong&gt;acceptance.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;That's all for now.&lt;br&gt;
you can follow me here on dev.to for more and on twitter &lt;a href="https://x.com/EmekaUgbanu_" rel="noopener noreferrer"&gt;@EmekaUgbanu&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I’m building StepMello, a reflective walking app that helps you slow down, capture moments, and turn everyday walks into meaningful memories.&lt;br&gt;
If that sounds interesting, I’d love your feedback.&lt;/p&gt;

&lt;p&gt;👉 StepMello: &lt;a href="https://stepmello.com" rel="noopener noreferrer"&gt;https://stepmello.com&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>ai</category>
      <category>productivity</category>
      <category>programming</category>
    </item>
    <item>
      <title>How to store form data to Google Sheets Using ReactJS,GatsbyJS or NextJS</title>
      <dc:creator>Emeka Ugbanu - Software Developer</dc:creator>
      <pubDate>Wed, 02 Mar 2022 11:11:30 +0000</pubDate>
      <link>https://dev.to/emekaugbanu/how-to-store-form-data-to-google-sheets-using-reactjsgatsbyjs-or-nextjs-248l</link>
      <guid>https://dev.to/emekaugbanu/how-to-store-form-data-to-google-sheets-using-reactjsgatsbyjs-or-nextjs-248l</guid>
      <description>&lt;p&gt;I wrote about this because I was having an issue with storing users’ form data on Google Sheets in Gatsby. I saw it being done from the backend but I wanted to implement it on the frontend with little stress but it was giving me a headache so here is the ultimate solution that saved the day.&lt;/p&gt;

&lt;h2&gt;
  
  
  How the solution works
&lt;/h2&gt;

&lt;p&gt;The main idea of the solution was to make ReactJS, NextJS, or in this case, GatsbyJS POST form data to Google Sheets like REST APIs.&lt;/p&gt;

&lt;h2&gt;
  
  
  First, Initialize Your Workspace
&lt;/h2&gt;

&lt;p&gt;here is documentation on how to set up your projects in ReactJS, GatsbyJS, and NextJS&lt;/p&gt;

&lt;p&gt;ReactJS - &lt;a href="https://reactjs.org/docs/create-a-new-react-app.html" rel="noopener noreferrer"&gt;https://reactjs.org/docs/create-a-new-react-app.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;GatsbyJS - &lt;a href="https://www.gatsbyjs.com/docs/tutorial/part-1/" rel="noopener noreferrer"&gt;https://www.gatsbyjs.com/docs/tutorial/part-1/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;NextJS - &lt;a href="https://nextjs.org/docs/getting-started" rel="noopener noreferrer"&gt;https://nextjs.org/docs/getting-started&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;But in this case, I would use GatsbyJS, If you had set up the project correctly in GatsbyJS, you would see the screen below&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%2F2kx4xiebn11y0nlnmuwn.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%2F2kx4xiebn11y0nlnmuwn.png" alt="How to store form data to Google Sheets Using ReactJS,GatsbyJS or NextJS" width="607" height="431"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Create Your Form
&lt;/h2&gt;

&lt;p&gt;Well, now it’s time to create your form. I would use Material-UI for creating the form and Formik and Yup for handling and validating the form.&lt;/p&gt;

&lt;p&gt;You can read more on the technology stack mentioned above:&lt;/p&gt;

&lt;p&gt;Material-UI - &lt;a href="https://mui.com" rel="noopener noreferrer"&gt;https://mui.com&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Formik&amp;nbsp; - &lt;a href="https://formik.org/docs/overview" rel="noopener noreferrer"&gt;https://formik.org/docs/overview&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Yup - &lt;a href="https://formik.org/docs/guides/validation" rel="noopener noreferrer"&gt;https://formik.org/docs/guides/validation&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;But you can create it with any technology stack of your choice.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to Post the data to Google Sheets
&lt;/h2&gt;

&lt;p&gt;TO post our form data to Google Sheets will be using Stein. Stein is an open-source program to help you turn any Google Sheet into a database. And let you POST data to Google Sheets.&lt;/p&gt;

&lt;p&gt;we also need to install the stein-js-client. Its a JavaScript client library to interact with the Stein API.&lt;/p&gt;

&lt;p&gt;Go over to Google Sheets and open a new Spreadsheet by clicking File, then New, and then Spreadsheet.&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%2Fruc6y998mfbgaw0f88lt.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%2Fruc6y998mfbgaw0f88lt.png" alt="Emeka Ugbanu Google Sheets" width="800" height="424"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Name the sheet to name of your choice and save.&lt;/p&gt;

&lt;p&gt;Click the share button on the top right of your screen, and edit the permission to public.&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%2Fp6euwem6dv85656hz3q4.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%2Fp6euwem6dv85656hz3q4.png" alt="Emeka Ugbanu Google Sheets" width="799" height="442"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Copy the link and go to &lt;a href="https://steinhq.com" rel="noopener noreferrer"&gt;https://steinhq.com&lt;/a&gt; and create your free account.&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%2Fgg4t92d5vosiqztcqgyl.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%2Fgg4t92d5vosiqztcqgyl.png" alt="Emeka Ugbanu Steinhq" width="799" height="396"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Click on Create API. You'll be redirected to your details page. Here, you can see you sheet url and API url. Click on copy on API URL. This URL will be used as the endpoint for sending Requests.&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%2F3x4891hhsbtb3ifcf6zp.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%2F3x4891hhsbtb3ifcf6zp.png" alt="Emeka Ugbanu Steinhq" width="800" height="392"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, let's install stein-js-client. Type npm install stein-js-client in your terminal to install the package.&lt;/p&gt;

&lt;p&gt;After it has been installed, import it at the top of your file. We will make the POST Request in the submitHandler function.&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 SteinStore from "stein-js-client";
 const store = new SteinStore("url");

submitHandler = () =&amp;gt; {
   store
  .append("Sheet1", [
    {
      title: "Awesome article",
      author: "Me!",
      content: "A brief summary",
      link: "blog.me.com/awesome-article"
    }
  ])
  .then(res =&amp;gt; {
    console.log(res);
  });
    })
  }
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Replace the submitHandler function with the code above. Here, we are using stein-js-client to post the data to the URL and get back the response in the console using the .then keyword.&lt;/p&gt;

&lt;p&gt;Paste the copied API URL endpoint from stein and replace it with the URL in new SteinStore("url").&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 SteinStore from "stein-js-client";
 const store = new SteinStore("https://api.steinhq.com/v1/storages/61eea0ad8d29ba237915e07d");

submitHandler = () =&amp;gt; {
   store
  .append("Sheet1", [
    {
      title: "Awesome article",
      author: "Me!",
      content: "A brief summary",
      link: "blog.me.com/awesome-article"
    }
  ])
  .then(res =&amp;gt; {
    console.log(res);
  });
    })
  }
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, open up Google Sheets and fill up the first columns, that is name, age, salary, and hobby. Please fill them out carefully, or else it will not work. It should be case sensitive.&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%2Fn6epbdbzphxyno2cefmy.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%2Fn6epbdbzphxyno2cefmy.png" alt="Emeka Ugbanu Sheet" width="800" height="369"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, run your React app and fill in the input fields. You'll see that the data is getting populated into your Google Sheets.&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%2F3vl6ax90ttuo1hv0c2wn.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%2F3vl6ax90ttuo1hv0c2wn.png" alt="Emeka Ugbanu Sheet" width="800" height="235"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now instead of the default values used here pass the values gotten from the form&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;submitHandler = () =&amp;gt; {
   store
  .append("Sheet1", [
    {
      title: values.title,
      author: values.author,
      content: values.content,
      link: values.link,
    }
  ])
  .then(res =&amp;gt; {
    console.log(res);
  });
    })
  }
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now You get 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%2Fjy3m91gai3mes8jcfwc1.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%2Fjy3m91gai3mes8jcfwc1.png" alt="Emeka Ugbanu Sheet" width="799" height="263"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can read more on stein &lt;br&gt;
features:&lt;a href="https://docs.steinhq.com/introduction" rel="noopener noreferrer"&gt;https://docs.steinhq.com/introduction&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That's all for now. Now you know how How to store form data to Google Sheets Using ReactJS,GatsbyJS or NextJS application.&lt;/p&gt;

&lt;p&gt;you can follow me here on dev.to for more and on twitter &lt;a href="https://twitter.com/EmekaUgbanu_" rel="noopener noreferrer"&gt;@EmekaUgbanu_&lt;/a&gt; and also thanks to &lt;a href="https://twitter.com/PaulieScanlon" rel="noopener noreferrer"&gt;@PaulieScanlon&lt;/a&gt; for offering me help in using Gatsby Serverless Functions with Google Sheets. You can know about that &lt;a href="https://github.com/gatsby-inc/gatsby-funcjam-21-byte-size#-store-data-in-google-sheets" rel="noopener noreferrer"&gt;here&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>google</category>
      <category>react</category>
      <category>tutorial</category>
      <category>api</category>
    </item>
  </channel>
</rss>
