{"id":2833,"date":"2023-08-28T18:20:02","date_gmt":"2023-08-29T01:20:02","guid":{"rendered":"https:\/\/www.couchbase.com\/blog\/building-a-survey-app-with-netlify-and-couchbase\/"},"modified":"2023-08-28T18:20:02","modified_gmt":"2023-08-29T01:20:02","slug":"building-a-survey-app-with-netlify-and-couchbase","status":"publish","type":"post","link":"https:\/\/www.couchbase.com\/blog\/pt\/building-a-survey-app-with-netlify-and-couchbase\/","title":{"rendered":"Build a Survey App with Netlify and Couchbase"},"content":{"rendered":"\n<p><span>The Couchbase DevRel team has been working with the <\/span><a href=\"https:\/\/badwebsite.club\/\"><span>Bad Website Club<\/span><\/a><span> on <\/span><a href=\"https:\/\/www.freecodecamp.org\/\"><span>freeCodeCamp <\/span><\/a><span>materials.\u00a0<\/span><\/p>\n\n\n\n<p><i><span>freeCodeCamp is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, online publications and local organizations that intend to make learning software development accessible to anyone.<\/span><\/i><\/p>\n\n\n\n<p><i><span>The Bad Website Club is an online community helping new learners in their programming journey.<\/span><\/i><\/p>\n\n\n\n<p><span>We have been streaming to show fCC learners what could happen to their project in more &#8216;real-life\u2019 conditions. We started with the Responsive Web Design course, took some examples like the Survey form, completed them and pushed them to production. The whole series is streamed on YouTube, LinkedIn, Twitter and Twitch, and the recordings are available on this youtube playlist if you want to check it out: <\/span><a href=\"https:\/\/www.youtube.com\/watch?v=OkO1ZHH1N54&amp;list=PLcspbWiU9RutKoHwXID713a_GcTgeT6j6\"><span data-rich-links='{\"fple-t\":\"New Couchbase Streams: Starting July 31st!\",\"fple-u\":\"https:\/\/www.youtube.com\/watch?v=OkO1ZHH1N54&amp;list=PLcspbWiU9RutKoHwXID713a_GcTgeT6j6\",\"fple-mt\":null,\"type\":\"first-party-link\"}'>New Couchbase Streams: Starting July 31st!<\/span><\/a><\/p>\n\n\n\n<p><iframe loading=\"lazy\" title=\"New Couchbase Streams: Starting July 31st!\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/OkO1ZHH1N54?list=PLcspbWiU9RutKoHwXID713a_GcTgeT6j6\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n\n\n\n<p><span>I was personally streaming on the <\/span><a href=\"https:\/\/www.freecodecamp.org\/learn\/2022\/responsive-web-design\/build-a-survey-form-project\/build-a-survey-form\"><span>Survey project<\/span><\/a><span>. In this blog post series, I will show you all the additional steps you can do publish the code on GitHub, deploy the Survey online with Netlify, and storing its content on Couchbase Capella.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1 &#8211; Create an HTML Form<\/h2>\n\n\n\n<p><span>Getting a lot of inspiration from the FreeCodeCamp survey example (copy, paste, and trim), I get the following HTML form. It&#8217;s a bit simpler than the original one.<\/span><\/p>\n\n\n<p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]&lt;!DOCTYPE html&gt;<br \/>\n&lt;html&gt;<br \/>\n\u00a0\u00a0&lt;head&gt;<br \/>\n\u00a0\u00a0\u00a0\u00a0&lt;link rel=&#8221;stylesheet&#8221; href=&#8221;.\/styles.css&#8221; \/&gt;<br \/>\n\u00a0\u00a0&lt;\/head&gt;<br \/>\n\u00a0\u00a0&lt;body&gt;<br \/>\n\u00a0\u00a0\u00a0\u00a0&lt;div class=&#8221;container&#8221;&gt;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;header class=&#8221;header&#8221;&gt;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h1 id=&#8221;title&#8221; class=&#8221;text-center&#8221;&gt;Survey Form&lt;\/h1&gt;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;p id=&#8221;description&#8221; class=&#8221;description text-center&#8221;&gt;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Thank you for taking the time to help us improve the platform<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/p&gt;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/header&gt;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;form id=&#8221;survey-form&#8221;&gt;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=&#8221;form-group&#8221;&gt;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;label id=&#8221;name-label&#8221; for=&#8221;name&#8221;&gt;Name&lt;\/label&gt;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type=&#8221;text&#8221;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name=&#8221;name&#8221;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0id=&#8221;name&#8221;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0class=&#8221;form-control&#8221;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0placeholder=&#8221;Enter your name&#8221;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0required<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=&#8221;form-group&#8221;&gt;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;label id=&#8221;number-label&#8221; for=&#8221;number&#8221;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&gt;Age&lt;span class=&#8221;clue&#8221;&gt;(optional)&lt;\/span&gt;&lt;\/label<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&gt;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type=&#8221;number&#8221;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name=&#8221;age&#8221;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0id=&#8221;number&#8221;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0min=&#8221;10&#8243;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0max=&#8221;99&#8243;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0class=&#8221;form-control&#8221;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0placeholder=&#8221;Age&#8221;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;<\/p>\n<p> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=&#8221;form-group&#8221;&gt;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;p&gt;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Would you recommend this awesome survey to a Friend ?<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/p&gt;<\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;label<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&gt;&lt;input<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name=&#8221;recommend&#8221;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0value=&#8221;recommend&#8221;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type=&#8221;checkbox&#8221;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0class=&#8221;input-checkbox&#8221;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;yes&lt;\/label<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&gt;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;<\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=&#8221;form-group&#8221;&gt;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button type=&#8221;submit&#8221; id=&#8221;submit&#8221; class=&#8221;submit-button&#8221;&gt;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Submit<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/button&gt;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/form&gt;<br \/>\n\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;<br \/>\n\u00a0\u00a0&lt;\/body&gt;<br \/>\n&lt;\/html&gt;[\/crayon]<\/p>\n\n\n\n<p><span>The <em>styles.css<\/em> file is exactly the same than the original. <a href=\"https:\/\/survey-form.freecodecamp.rocks\/\">Open here<\/a> to see the survey form in action. You can open<\/span><span> in your browser, right click on the page and you should see something like <strong>view page source<\/strong> or <strong>inspect<\/strong>. Click on that and this will open a panel which shows the code of the page. While you are in this view you can click on link like <\/span><em><span>style.css<\/span><\/em><span> or click on the <strong>styles<\/strong>\u00a0tab to view the CSS applied to certain elements as well.<\/span><\/p>\n\n\n\n<p><span>To test this code sample you can first clone this repository to your local computer using the terminal or you can download it as a zip file).<\/span><\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/wp-content\/uploads\/sites\/5\/2026\/05\/260500053-9b4fb80b-f98e-4a0a-9ff0-09e76bede954.png\" alt=\"Screenshot of button in github where you can clone or download code\"><\/p>\n\n\n\n<p><span>Go to your browser and on the top bar select <\/span><strong>file<\/strong><span>, <\/span><strong>open<\/strong><span>, than select the <em>index.html<\/em> file from the folder (or zip folder) that was downloaded. Take a look at your browser URL, it shows a path to a local file. And you should see something like this, that does not do anything when you click on submit.<\/span><\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/wp-content\/uploads\/sites\/5\/2026\/05\/htmlform.png\" alt=\"The screenshot of the survey from created during the freecode camp Survery lesson\"><\/p>\n\n\n\n<p><span>The question then is, how do we deploy it to the Internet, how do we make it do something? We need some backend code to be executed after the click. And then make that code store the form content in the database.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2 &#8211; Git, Github, Netlify<\/h2>\n\n\n\n<p><span>Let&#8217;s start by deploying this form live on the Internet. To that end we are going to use Netlify. First thing first, making sure that we have the <\/span><a href=\"https:\/\/docs.netlify.com\/cli\/get-started\/\"><span>Netlify CLI<\/span><\/a><span> available, and that we are logged in. If it&#8217;s not installed, the fastest route is to type in your terminal:<\/span><\/p>\n\n\n<p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]npm install netlify-cli -g[\/crayon]<\/p>\n\n\n\n<p><span>You wil find more details in the <a href=\"https:\/\/docs.netlify.com\/cli\/get-started\/\">Netlify get started docs<\/a>.<\/span><\/p>\n\n\n\n<p><span>Typing <\/span><em><span>netlify version<\/span><\/em><span> in my terminal currently gives me <\/span><em><span>netlify-cli\/15.6.0 win32-x64 node-v18.5.0<\/span><\/em><span>. So I know it&#8217;s installed and ready.<\/span><\/p>\n\n\n\n<p><span>Then the next thing to do is type <\/span><em><span>netlify login<\/span><\/em><span> in your terminal. It will take you through the Netflify sign in form.<\/span><\/p>\n\n\n\n<p><span>Now everything should be ready to move to the deployment phase. But just to make sure we are going to test things locally. Because that&#8217;s what most developers do. To that end, type <\/span><span>netlify dev<\/span><span> in your terminal.<\/span><\/p>\n\n\n\n<p><span>It should output the following in your terminal and open your form in your browser.<\/span><\/p>\n\n\n<p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]\u25c8 Netlify Dev \u25c8<br \/>\n\u25c8 Ignored general context env var: LANG (defined in process)<br \/>\n\u25c8 No app server detected. Using simple static server<br \/>\n\u25c8 Unable to determine public folder to serve files from. Using current working directory<br \/>\n\u25c8 Setup a netlify.toml file with a [dev] section to specify your dev server settings.<br \/>\n\u25c8 See docs at: https:\/\/cli.netlify.com\/netlify-dev#project-detection<br \/>\n\u25c8 Running static server from &#8220;freecodecamp-survey&#8221;<br \/>\n\u25c8 Setting up local development server<\/p>\n<p>\u25c8 Static server listening to 3999<\/p>\n<p>Adding local .netlify folder to .gitignore file&#8230;<\/p>\n<p>\u00a0\u00a0\u00a0\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u25c8 Server now ready on https:\/\/localhost:8888 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518[\/crayon]<\/p>\n\n\n\n<p><span>If you take a look at the browser URL bar again, you will see that it is different. It looks like a webite address, not a local file. Congratulations, you just run your first local server, serving your HTML and CSS file, using N<\/span><span>etlify dev<\/span><span>! You have a website running on your machine. Now let&#8217;s make this accessible to everyone on Internet, both the source code and the site itself.<\/span><\/p>\n\n\n\n<p><span>Go to GitHub (or GitLab, or Heptapod, or any other code source hosting solutions, there are others out there!) and create a new Repository. Visit<\/span><a href=\"https:\/\/github.com\/new\"> <span>https:\/\/github.com\/new<\/span><\/a><span> for Github. You are now in the repo wizard creation. I have only setup my organization, my repo name and a description than clicked on the <\/span><i><span>Create Repository<\/span><\/i><span> button.<\/span><\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/wp-content\/uploads\/sites\/5\/2026\/05\/githubRepoCreation.png\" alt=\"A screenshot of Github's repository creation wizard\"><\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/wp-content\/uploads\/sites\/5\/2026\/05\/intialGithubRepo.png\" alt=\"A screenshot of a newly intitialized Github repo\"><\/p>\n\n\n\n<p><span>It will give you all the instructions needed to convert your working folder in a <em>git<\/em> repo, and link it to your GitHub project. This is what I typed in my terminal (you can either copy and paste the below into your terminal or press enter after each line of the below to have it execute. Note, you will have to change line 6 to be your project repository URL):<\/span><\/p>\n\n\n<p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]echo &#8220;# myproject&#8221; &gt;&gt; README.md<br \/>\ngit init<br \/>\ngit add README.md<br \/>\ngit commit -m &#8220;first commit&#8221;<br \/>\ngit branch -M main<br \/>\ngit remote add origin https:\/\/github.com\/ldoguin\/myproject.git<br \/>\ngit push -u origin main[\/crayon]<\/p>\n\n\n\n<p><span>This is the resulting terminal output:<\/span><\/p>\n\n\n<p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;][C:CodeCouchbasemyproject] $ echo &#8220;# myproject&#8221; &gt;&gt; README.md<br \/>\n[C:CodeCouchbasemyproject] $ ls<\/p>\n<p>\u00a0\u00a0\u00a0\u00a0Directory: C:CodeCouchbasemyproject<\/p>\n<p>Mode \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 LastWriteTime \u00a0 \u00a0 \u00a0 \u00a0 Length Name<br \/>\n&#8212;- \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &#8212;&#8212;&#8212;&#8212;- \u00a0 \u00a0 \u00a0 \u00a0 &#8212;&#8212; &#8212;-<br \/>\n-a&#8212;-\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 8\/4\/2023\u00a0 12:11 PM \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 28 README.md<\/p>\n<p>[C:CodeCouchbasemyproject] $ git init<br \/>\nhint: Using &#8216;master&#8217; as the name for the initial branch. This default branch name<br \/>\nhint: is subject to change. To configure the initial branch name to use in all<br \/>\nhint: of your new repositories, which will suppress this warning, call:<br \/>\nhint:<br \/>\nhint: \u00a0 git config &#8211;global init.defaultBranch &lt;name&gt;<br \/>\nhint:<br \/>\nhint: Names commonly chosen instead of &#8216;master&#8217; are &#8216;main&#8217;, &#8216;trunk&#8217; and<br \/>\nhint: &#8216;development&#8217;. The just-created branch can be renamed via this command:<br \/>\nhint:<br \/>\nhint: \u00a0 git branch -m &lt;name&gt;<br \/>\nInitialized empty Git repository in C:\/Users\/Laurent Doguin\/Documents\/Couchbase\/myproject\/.git\/<br \/>\n[C:CodeCouchbasemyproject] $ git config &#8211;global init.defaultBranch main<br \/>\n[C:CodeCouchbasemyproject] $ git branch -m main<br \/>\n[C:CodeCouchbasemyproject] $ git add .README.md .index.html .styles.css<br \/>\n[C:CodeCouchbasemyproject] $ git commit -m &#8220;first commit&#8221;<br \/>\n[main (root-commit) 356ece7] first commit<br \/>\n\u00a03 files changed, 245 insertions(+)<br \/>\n\u00a0create mode 100644 README.md<br \/>\n\u00a0create mode 100644 index.html<br \/>\n\u00a0create mode 100644 styles.css<br \/>\n[C:CodeCouchbasemyproject] $ git remote add origin https:\/\/github.com\/ldoguin\/myproject.git<br \/>\n[C:CodeCouchbasemyproject] $ git push -u origin main<br \/>\nEnumerating objects: 5, done.<br \/>\nCounting objects: 100% (5\/5), done.<br \/>\nDelta compression using up to 8 threads<br \/>\nCompressing objects: 100% (4\/4), done.<br \/>\nWriting objects: 100% (5\/5), 1.95 KiB | 999.00 KiB\/s, done.<br \/>\nTotal 5 (delta 0), reused 0 (delta 0), pack-reused 0<br \/>\nTo https:\/\/github.com\/ldoguin\/myproject.git<br \/>\n\u00a0* [new branch]\u00a0 \u00a0 \u00a0 main -&gt; main<br \/>\nbranch &#8216;main&#8217; set up to track &#8216;origin\/main&#8217;.<br \/>\n[C:CodeCouchbasemyproject] $[\/crayon]<\/p>\n\n\n\n<p>\u00a0<\/p>\n\n\n\n<p><span>Now if I go back to the Github page and reload it, this what I see:<\/span><\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/wp-content\/uploads\/sites\/5\/2026\/05\/firstCommitReo.png\" alt=\"A screenshot of the github repository after an intial commit was pushed\"><\/p>\n\n\n\n<p><span>Congratulations, your code is now available on Github, for everyone to see, learn from, contribute to. It&#8217;s now time for Production! Let&#8217;s make that website live \ud83d\udcaa<\/span><\/p>\n\n\n\n<p><span>Go ahead and visit<\/span><a href=\"https:\/\/app.netlify.com\/start\/deploy\"> <span>https:\/\/app.netlify.com\/start\/deploy<\/span><\/a><span>. This will get you to Netify&#8217;s new project wizard. You will see various buttons to help you start, GitHub, GitLab, Bitbucket, AzureDevops. Let&#8217;s click on GitHub.<\/span><\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/wp-content\/uploads\/sites\/5\/2026\/05\/netlifyWizard.png\" alt=\"A screenshot of the Netlify Wizard for new project creation\"><\/p>\n\n\n\n<p><span>You will see a couple windows asking you to link your GitHub profile to Netlify. Go ahead and proceed, it will take you to the following page.<\/span><\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/wp-content\/uploads\/sites\/5\/2026\/05\/netlifyWizard2.png\" alt=\"A screenshot of the second step of Netlify's project creation wizard after picking Github\"><\/p>\n\n\n\n<p><span>Netlify is telling me I have no Netlify app installed on any GitHub org. Click on <\/span><strong>Configure Netlify on GitHub<\/strong><span>, it will open a poup window asking you to select the GitHub org you want to install Netlify in, and which repo to give it access to.<\/span><\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/wp-content\/uploads\/sites\/5\/2026\/05\/ghAuthz.png\" alt=\"A screenshot of Github's authorization matrix\"><\/p>\n\n\n\n<p><span>I leave the default and proceed to the next step. From now on you should see every repo in your GitHub account.<\/span><\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/wp-content\/uploads\/sites\/5\/2026\/05\/NetlifyProjectList.png\" alt=\"A screenshot of Netlify's project List showing linked Github project \"><\/p>\n\n\n\n<p><span>I will leave the default and click on <\/span><span><strong>Deploy <\/strong><\/span><span><strong>myproject<\/strong><\/span><i><span>:<\/span><\/i><\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/wp-content\/uploads\/sites\/5\/2026\/05\/netlifyConfigureroject.png\" alt=\"A screenshot of the default Netlify project configuration\"><\/p>\n\n\n\n<p>\u00a0<\/p>\n\n\n\n<p><span>You will see a link to your newly deployed on the internet website, for me it&#8217;s <\/span><em><span>https:\/\/jolly-sfogliatella-3e6c07.netlify.app\/<\/span><\/em><span>. Netlify provides sandboxes environment under the <\/span><em><span>netlify.app<\/span><\/em><span> domain for you to deploy things without having your own domain name.<\/span><\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/wp-content\/uploads\/sites\/5\/2026\/05\/netlifyProjectCreatedWiz.png\" alt=\"A screenshot of a newly created Project\"><\/p>\n\n\n\n<p><span>Congratulations, your website is now live on the Internet. Take a minute to celebrate \ud83c\udf89.<\/span><\/p>\n\n\n\n<p><span>Now we can link this Netlify project by entering <\/span><em><span>netlify link<\/span><\/em><span> in the terminal. A list of options will be offered. Select the default one, which should be <\/span><em><span>Use current git remote origin (https:\/\/github.com\/yourOrg\/yourProject)<\/span><\/em><span>. Because you have deployed through GitHub, Netlify has the git information of your repo and can infer which project to use (and also at that point you probably have only one project). This is what the output looks for me:<\/span><\/p>\n\n\n<p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;][C:CodeCouchbasemyproject] $ netlify link<\/p>\n<p>netlify link will connect this folder to a site on Netlify<\/p>\n<p>? How do you want to link this folder to a site? Use current git remote origin (https:\/\/github.com\/ldoguin\/myproject)<\/p>\n<p>Looking for sites connected to &#8216;https:\/\/github.com\/ldoguin\/myproject&#8217;&#8230;<\/p>\n<p>Directory Linked<\/p>\n<p>Admin url: https:\/\/app.netlify.com\/sites\/jolly-sfogliatella-3e6c07<br \/>\nSite url:\u00a0 https:\/\/jolly-sfogliatella-3e6c07.netlify.app<\/p>\n<p>You can now run other `netlify` cli commands in this directory<br \/>\n[C:CodeCouchbasemyproject] $[\/crayon]<\/p>\n\n\n\n<p>We can try a couple things now. I am going add a \ud83d\udc3c emoji to my form because why not. In <em>index.html<\/em>, I am modifying line 9 from this: <em>&lt;h1 id=&#8221;title&#8221; class=&#8221;text-center&#8221;&gt;Survey Form&lt;\/h1&gt;<\/em> to this <em>&lt;h1 id=&#8221;title&#8221; class=&#8221;text-center&#8221;&gt;Survey Form \ud83d\udc3c&lt;\/h1&gt;<\/em><\/p>\n\n\n\n<p><span>I then save the file, and push this changes to Github. Then, in the terminal, I type <\/span><em><span>netlify open:site<\/span><\/em><span>:<\/span><\/p>\n\n\n<p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;][C:CodeCouchbasemyproject] $ git add .index.html<br \/>\n[C:CodeCouchbasemyproject] $ git commit -m&#8221;Panda&#8221;<br \/>\n[main caa6f87] Panda\u00a0<br \/>\n\u00a01 file changed, 1 insertion(+), 1 deletion(-)<br \/>\n[C:CodeCouchbasemyproject] $ git push<br \/>\nEnumerating objects: 5, done.<br \/>\nCounting objects: 100% (5\/5), done.<br \/>\nDelta compression using up to 8 threads<br \/>\nCompressing objects: 100% (3\/3), done.<br \/>\nWriting objects: 100% (3\/3), 360 bytes | 180.00 KiB\/s, done.<br \/>\nTotal 3 (delta 1), reused 0 (delta 0), pack-reused 0<br \/>\nremote: Resolving deltas: 100% (1\/1), completed with 1 local object.<br \/>\nTo https:\/\/github.com\/ldoguin\/myproject.git<br \/>\n\u00a0\u00a0\u00a0356ece7..8a2ebe2\u00a0 main -&gt; main<br \/>\n[C:CodeCouchbasemyproject] $ netlify open:site\u00a0\u00a0<br \/>\nOpening &#8220;jolly-sfogliatella-3e6c07&#8221; site url:<br \/>\n&gt; https:\/\/jolly-sfogliatella-3e6c07.netlify.app[\/crayon]<\/p>\n\n\n\n<p>Something very cool is happening. Because your GitHub repo is linked to Netlify, a new deployment will be automatically done by Netlify. So when opening the website, you will see the Panda &lt;3.<\/p>\n\n\n\n<p><span>At that point we have a Github Repository that holds our code, that is integrated to Netlify, that will automatically create new deployment when you push new code. And we also have a configured <\/span><span>netlify<\/span><span> CLI in our working folder. We are ready to write backend code!<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3 &#8211; Backend<\/h2>\n\n\n\n<p><span>In this chapter we will answer the following question: What happens when someone fill the form and click on <strong>submit<\/strong> ?<\/span><\/p>\n\n\n\n<p><span>The answer right now is: Nothing. Let&#8217;s change that. By writing some JavaScript. We are going to display a popup alert when someone enters valid information and click on <strong>Submit<\/strong>. In your <em>index.html<\/em> file you will put the following <em>&lt;script&gt;<\/em> code between the last closing div tag <\/span><em><span>&lt;\/div&gt;<\/span><\/em><span> and before the closing body tag <\/span><em><span>&lt;\/body&gt;<\/span><\/em><span>.<\/span><span>\u00a0<\/span><\/p>\n\n\n<p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]&lt;script&gt;<br \/>\n\u00a0\u00a0const form = document.getElementById(&#8216;survey-form&#8217;); &lt;1&gt;<br \/>\n\u00a0\u00a0form.addEventListener(&#8216;submit&#8217;, handleForm); &lt;2&gt;<\/p>\n<p>\u00a0\u00a0async function handleForm(e) {<br \/>\n\u00a0\u00a0\u00a0\u00a0e.preventDefault() &lt;3&gt;<br \/>\n\u00a0\u00a0\u00a0\u00a0alert(&#8220;Form Submission !&#8221;) &lt;4&gt;<br \/>\n\u00a0\u00a0}<\/p>\n<p>\u00a0\u00a0&lt;\/script&gt;[\/crayon]<\/p>\n\n\n\n<p>\u00a0<\/p>\n\n\n<p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]&lt;1&gt; Get the Dom element representing the form by using its id<br \/>\n&lt;2&gt; Each time the submit event occurs, run the handleForm function<br \/>\n&lt;3&gt; The natural behavior of a form submission is to reload the page, we don&#8217;t need that, hence we prevent the default behavior to happen<br \/>\n&lt;4&gt; The alert function display a popup with a message[\/crayon]<\/p>\n\n\n\n<p>If you save your code and reload the page, fill the form, click on <strong>submit<\/strong>, you should see something like this:<\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/wp-content\/uploads\/sites\/5\/2026\/05\/formSubmission.png\" alt=\"A screenshot of a sucessfull form submission\"><\/p>\n\n\n\n<p><span>Now that we have something happening when a user submits the form, let&#8217;s go a bit further. We want to look at the content of the form and make sure we can get the right data in JSON. We want a string for the name, and integer for the age and a boolean for the recommendation.<\/span><\/p>\n\n\n\n<p><span>And it turns out that the HTML checkbox is not playing nice. The value it gives by default is no value, and once checked it gives the content of the value field. We are going to add another input field, hidden, to make sure the default value will be False.<\/span><\/p>\n\n\n<p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;] \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;label&gt;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0id=&#8221;hiddenRecommend&#8221;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name=&#8221;recommend&#8221;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0value=&#8221;false&#8221;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type=&#8221;hidden&#8221;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0id=&#8221;recommend&#8221;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name=&#8221;recommend&#8221;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0value=&#8221;true&#8221;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type=&#8221;checkbox&#8221;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0class=&#8221;input-checkbox&#8221;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;yes&lt;\/label&gt;[\/crayon]<\/p>\n\n\n\n<p><span>Now about the JavaScript Code, the are some interesting new lines to look into.<\/span><\/p>\n\n\n\n<p><p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]npm install netlify-cli -g[\/crayon]<\/p>\n0<\/p>\n\n\n\n<p><p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]npm install netlify-cli -g[\/crayon]<\/p>\n1<\/p>\n\n\n\n<p>With that being sorted, let&#8217;s get serious and start creating a Netlify function. Enter <em>netlify function:create<\/em> in your terminal. You should see something like:<\/p>\n\n\n\n<p><p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]npm install netlify-cli -g[\/crayon]<\/p>\n2<\/p>\n\n\n\n<p><span>Select <strong>Serverless<\/strong> function, leaves the default for the next question about path, keep JavaScript as the language, keep the default <em>hello-world<\/em> template, than give a name to your function. Mine is called <\/span><em><span>saveform<\/span><\/em><span>. This will generate new files in the netlify folder. If you run <\/span><em><span>netlify dev<\/span><\/em><span> now, you will see new lines in the logs:<\/span><\/p>\n\n\n\n<p><p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]npm install netlify-cli -g[\/crayon]<\/p>\n3<\/p>\n\n\n\n<p>This means that our netlify dev server is also serving our newly created function. Take a look at the newly generated file <em>.\/netlify\/functions\/saveform\/saveform.js<\/em>.<\/p>\n\n\n\n<p><p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]npm install netlify-cli -g[\/crayon]<\/p>\n4<\/p>\n\n\n\n<p><p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]npm install netlify-cli -g[\/crayon]<\/p>\n5<\/p>\n\n\n\n<p>Let&#8217;s try it out by calling this function when the user clicks on <strong>submit<\/strong>. Just add the following code after the last <em>console.log<\/em> call:<\/p>\n\n\n\n<p><p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]npm install netlify-cli -g[\/crayon]<\/p>\n6<\/p>\n\n\n\n<p><p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]npm install netlify-cli -g[\/crayon]<\/p>\n7<\/p>\n\n\n\n<p><span>Add, commit and push. <\/span><em><span>netlify open:admin<\/span><\/em><\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/wp-content\/uploads\/sites\/5\/2026\/05\/netlifyDeployList.png\" alt=\"A screenshot showing the Netlify site administrator overview, with the list of all deployments already done\"><\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/wp-content\/uploads\/sites\/5\/2026\/05\/netlifyFunctionReturnCall.png\" alt=\"A screenshot of the form page and the developer tools opened, showing the message returned by the Netlify function\"><\/p>\n\n\n\n<p><span>At this point, you have a frontend and a backend deployed, on the Internet. But all we are doing is calling the default function created by Netlify&#8217;s wizard. The next step is to send the content of the form to that function, and store it in a database.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 4 &#8211; Database<\/h2>\n\n\n\n<p><span>First thing to do is figure out how to send the form details to the function. This requires us to change our GET method to a POST method. These things are called HTTP request methods, sometimes reffered to as HTTP verbs. You can take a look at the full list on<\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Methods\"> <span>MDN<\/span><\/a><span>. A Get method request is used to only retrieve data. A post method request is used to create or change data. This is exactly what we want. We want to create a new entry in our Dababase when someone submits a form. An HTTP request has a method, some headers(Metadata about your requests, here we are saying the request will be JSON content with the Content-Typ header), and a body. The body of our request will be JSON text.<\/span><\/p>\n\n\n\n<p><p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]npm install netlify-cli -g[\/crayon]<\/p>\n8<\/p>\n\n\n\n<p><p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]npm install netlify-cli -g[\/crayon]<\/p>\n9<\/p>\n\n\n\n<p><span>Our frontend HTTP request to our backend is changed, now we need to adapt the backend code.<\/span><\/p>\n\n\n\n<p><p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]\u25c8 Netlify Dev \u25c8<br \/>\n\u25c8 Ignored general context env var: LANG (defined in process)<br \/>\n\u25c8 No app server detected. Using simple static server<br \/>\n\u25c8 Unable to determine public folder to serve files from. Using current working directory<br \/>\n\u25c8 Setup a netlify.toml file with a [dev] section to specify your dev server settings.<br \/>\n\u25c8 See docs at: https:\/\/cli.netlify.com\/netlify-dev#project-detection<br \/>\n\u25c8 Running static server from &#8220;freecodecamp-survey&#8221;<br \/>\n\u25c8 Setting up local development server<\/p>\n<p>\u25c8 Static server listening to 3999<\/p>\n<p>Adding local .netlify folder to .gitignore file&#8230;<\/p>\n<p>\u00a0\u00a0\u00a0\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u25c8 Server now ready on https:\/\/localhost:8888 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518[\/crayon]<\/p>\n0<\/p>\n\n\n\n<p>\u00a0<\/p>\n\n\n\n<p><p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]\u25c8 Netlify Dev \u25c8<br \/>\n\u25c8 Ignored general context env var: LANG (defined in process)<br \/>\n\u25c8 No app server detected. Using simple static server<br \/>\n\u25c8 Unable to determine public folder to serve files from. Using current working directory<br \/>\n\u25c8 Setup a netlify.toml file with a [dev] section to specify your dev server settings.<br \/>\n\u25c8 See docs at: https:\/\/cli.netlify.com\/netlify-dev#project-detection<br \/>\n\u25c8 Running static server from &#8220;freecodecamp-survey&#8221;<br \/>\n\u25c8 Setting up local development server<\/p>\n<p>\u25c8 Static server listening to 3999<\/p>\n<p>Adding local .netlify folder to .gitignore file&#8230;<\/p>\n<p>\u00a0\u00a0\u00a0\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u25c8 Server now ready on https:\/\/localhost:8888 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518[\/crayon]<\/p>\n1<\/p>\n\n\n\n<p>You should see a different message in the web dev console, you should see <em>{&#8220;name&#8221;:&#8221;yourName&#8221;}<\/em>.<\/p>\n\n\n\n<p><span>We have sent the form data to the backend and made sure of it. Now on to the database side of things. Working at Couchbase, this is the database I am going to use. A simple way to try, go to<\/span><a href=\"https:\/\/cloud.couchbase.com\/sign-up\"> <span>https:\/\/cloud.couchbase.com\/sign-up<\/span><\/a><span>, create an account, you get a 30 day trial, no credit card required.<\/span><\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/wp-content\/uploads\/sites\/5\/2026\/05\/capellaGetStarted.png\" alt=\"A screenshot of the first Couchbase Capella Get started wizard step \"><\/p>\n\n\n\n<p><span>You can leave the default on, or choose your favorite cloud provider and closest region. Click on <\/span><strong><i>Deploy now<\/i><\/strong><span> and wait for the deployment of your database.<\/span><\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/wp-content\/uploads\/sites\/5\/2026\/05\/capellaTrialHome.png\" alt=\"A screenshot of the Couchbase Capella trial home\"><\/p>\n\n\n\n<p><span>Two things we want to do from there. Make sure we can connect to that database from our backend code, and make sure we can write the data somewhere. Go ahead and click the <strong>Connect<\/strong> tab.<\/span><\/p>\n\n\n\n<p><span>In Couchbase we store data in Buckets. By default the trial comes with a travel-sample bucket preimported. We are not going to use it. Instead we are going to create our own bucket. Click on <\/span><strong>Settings<\/strong><span> on the top level menu, than on <\/span><strong>Buckets<\/strong><span> on the left menu.<\/span><\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/wp-content\/uploads\/sites\/5\/2026\/05\/bucketHome.png\" alt=\"A screenshot of the Bucket settings in Couchbase Capella\"><\/p>\n\n\n\n<p><span>Now click on <\/span><strong>+ Create Bucket<\/strong><span>, give it a name and leave the rest to default settings.Than Click on <\/span><strong>Create Bucket<\/strong><span>.<\/span><\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/wp-content\/uploads\/sites\/5\/2026\/05\/surveyFormBucketCreated.png\" alt=\"A screenshot of the Buckets settings home, with the newly created bucket visible\"><\/p>\n\n\n\n<p><span>We have a new Bucket, now we need to create associated credentials. Click the <\/span><strong>Database Access<\/strong><span> button, than <\/span><strong>Create Database Access<\/strong><span> button.<\/span><\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/wp-content\/uploads\/sites\/5\/2026\/05\/emptyCredentials.png\" alt=\"A screenshot of the empty Credentials settings\"><\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/wp-content\/uploads\/sites\/5\/2026\/05\/credentialCreation.png\" alt=\"A screenshot fo the credentials creation detail\"><\/p>\n\n\n\n<p><span>Make sure you remember both username and passaord and click on <\/span><strong>Create Database<\/strong><span>. One last thing to do is to allow this database to be reachable publicly. Right now it&#8217;s hidden. Click on <\/span><strong>Allowed IP Addresses<\/strong><span>, than <\/span><strong>Add Allowed IP<\/strong><span>. Click on <\/span><span><strong>Allow Access<\/strong> <\/span><strong>from Anywhere<\/strong><span>, follow the instructions. This should prefill the form, than click on the <\/span><strong>Add Allowed IP<\/strong><span> button. You might think this is a bit cumbersome. Why isn&#8217;t it the default?<\/span><\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/wp-content\/uploads\/sites\/5\/2026\/05\/addAllowedIp.png\" alt=\"A screenshot of the Allow Access from Anywhere popup\"><\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/wp-content\/uploads\/sites\/5\/2026\/05\/addedIp.png\" alt=\"A screenshot of the resuting operation with the newly added IP range\"><\/p>\n\n\n\n<p><span>Now click on the <\/span><strong>Connect<\/strong><span> tab. You will see the <em>Connection String<\/em>, select your database credentials, switch the language to Node, and it will give us the right instructions to connect to the database from our backend code.<\/span><\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/www.couchbase.com\/wp-content\/uploads\/sites\/5\/2026\/05\/connectInstructions.png\" alt=\"A screenshot of the SDK connection instructions, with doc and code\"><\/p>\n\n\n\n<p><span>We can copy and paste this to our function code, and add a couple more things:<\/span><\/p>\n\n\n\n<p><p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]\u25c8 Netlify Dev \u25c8<br \/>\n\u25c8 Ignored general context env var: LANG (defined in process)<br \/>\n\u25c8 No app server detected. Using simple static server<br \/>\n\u25c8 Unable to determine public folder to serve files from. Using current working directory<br \/>\n\u25c8 Setup a netlify.toml file with a [dev] section to specify your dev server settings.<br \/>\n\u25c8 See docs at: https:\/\/cli.netlify.com\/netlify-dev#project-detection<br \/>\n\u25c8 Running static server from &#8220;freecodecamp-survey&#8221;<br \/>\n\u25c8 Setting up local development server<\/p>\n<p>\u25c8 Static server listening to 3999<\/p>\n<p>Adding local .netlify folder to .gitignore file&#8230;<\/p>\n<p>\u00a0\u00a0\u00a0\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u25c8 Server now ready on https:\/\/localhost:8888 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518[\/crayon]<\/p>\n2<\/p>\n\n\n\n<p><p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]\u25c8 Netlify Dev \u25c8<br \/>\n\u25c8 Ignored general context env var: LANG (defined in process)<br \/>\n\u25c8 No app server detected. Using simple static server<br \/>\n\u25c8 Unable to determine public folder to serve files from. Using current working directory<br \/>\n\u25c8 Setup a netlify.toml file with a [dev] section to specify your dev server settings.<br \/>\n\u25c8 See docs at: https:\/\/cli.netlify.com\/netlify-dev#project-detection<br \/>\n\u25c8 Running static server from &#8220;freecodecamp-survey&#8221;<br \/>\n\u25c8 Setting up local development server<\/p>\n<p>\u25c8 Static server listening to 3999<\/p>\n<p>Adding local .netlify folder to .gitignore file&#8230;<\/p>\n<p>\u00a0\u00a0\u00a0\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u25c8 Server now ready on https:\/\/localhost:8888 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518[\/crayon]<\/p>\n3<\/p>\n\n\n\n<p>For Couchbase you need to install it. Running <em>npm i couchbase@4.2.4<\/em> will do the trick. Right now Netlify\/Couchbase compatibilty is assured for Couchbase version 4.2.4 or below. This is due to the nature of our SDK. It&#8217;s a JavaScript interface on top our our C SDK. And C dependencies expect to find their system dependencies in the right version. Right now Couchbase 4.2.5 is expecting to find <em>GLIBC_29<\/em> but it&#8217;s not available on the Ubuntu system running our Netlify backend code.<\/p>\n\n\n\n<p><span>Now that we have dependencies, let&#8217;s be explicit in how build them. You can add a <\/span><em><span>netlify.toml<\/span><\/em><span> file at the root of the repository with the following content:<\/span><\/p>\n\n\n\n<p><p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]\u25c8 Netlify Dev \u25c8<br \/>\n\u25c8 Ignored general context env var: LANG (defined in process)<br \/>\n\u25c8 No app server detected. Using simple static server<br \/>\n\u25c8 Unable to determine public folder to serve files from. Using current working directory<br \/>\n\u25c8 Setup a netlify.toml file with a [dev] section to specify your dev server settings.<br \/>\n\u25c8 See docs at: https:\/\/cli.netlify.com\/netlify-dev#project-detection<br \/>\n\u25c8 Running static server from &#8220;freecodecamp-survey&#8221;<br \/>\n\u25c8 Setting up local development server<\/p>\n<p>\u25c8 Static server listening to 3999<\/p>\n<p>Adding local .netlify folder to .gitignore file&#8230;<\/p>\n<p>\u00a0\u00a0\u00a0\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u25c8 Server now ready on https:\/\/localhost:8888 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518[\/crayon]<\/p>\n4<\/p>\n\n\n\n<p><span>It&#8217;s doing a couple things. Installing the dependencies and removing the debug symbol table from <\/span><em><span>couchbase_impl.node<\/span><\/em><span>. This file is the C library used by our Node SDK. And it&#8217;s too big for Netlify right now. So we are removing unnecessary clutter coming from the build process.<\/span><\/p>\n\n\n\n<p><p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]\u25c8 Netlify Dev \u25c8<br \/>\n\u25c8 Ignored general context env var: LANG (defined in process)<br \/>\n\u25c8 No app server detected. Using simple static server<br \/>\n\u25c8 Unable to determine public folder to serve files from. Using current working directory<br \/>\n\u25c8 Setup a netlify.toml file with a [dev] section to specify your dev server settings.<br \/>\n\u25c8 See docs at: https:\/\/cli.netlify.com\/netlify-dev#project-detection<br \/>\n\u25c8 Running static server from &#8220;freecodecamp-survey&#8221;<br \/>\n\u25c8 Setting up local development server<\/p>\n<p>\u25c8 Static server listening to 3999<\/p>\n<p>Adding local .netlify folder to .gitignore file&#8230;<\/p>\n<p>\u00a0\u00a0\u00a0\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u25c8 Server now ready on https:\/\/localhost:8888 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518[\/crayon]<\/p>\n5<\/p>\n\n\n\n<p><span>Now you could add the new files, commit and push to GitHub. But that would push your password to GitHub. We don&#8217;t want that. Instead you can test it by running <\/span><em><span>netlify dev<\/span><\/em><span>. Go ahead and resubmit the form.<\/span><\/p>\n\n\n\n<p><span>If everything went well, you have written data to your Database! You can check this out easily by going to the Couchbase Capella UI. Cick on <\/span><strong>Data Tools<\/strong><span>, select your Bucket, Scope and collection, and you should see your survey from document.<\/span><\/p>\n\n\n\n<p><span>This is great, you just wrote code to connect your database!<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 5 &#8211; Configuration Management<\/h2>\n\n\n\n<p><span>To avoid pushing our credentials on GitHub, we are going to use environment variables. Environment variables are common to every Operating Systems and is the best way to manage configuration across different environments (different OSs, clouds, test, staging, preproduction, production, whatever fits your workflow).<\/span><\/p>\n\n\n\n<p><p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]\u25c8 Netlify Dev \u25c8<br \/>\n\u25c8 Ignored general context env var: LANG (defined in process)<br \/>\n\u25c8 No app server detected. Using simple static server<br \/>\n\u25c8 Unable to determine public folder to serve files from. Using current working directory<br \/>\n\u25c8 Setup a netlify.toml file with a [dev] section to specify your dev server settings.<br \/>\n\u25c8 See docs at: https:\/\/cli.netlify.com\/netlify-dev#project-detection<br \/>\n\u25c8 Running static server from &#8220;freecodecamp-survey&#8221;<br \/>\n\u25c8 Setting up local development server<\/p>\n<p>\u25c8 Static server listening to 3999<\/p>\n<p>Adding local .netlify folder to .gitignore file&#8230;<\/p>\n<p>\u00a0\u00a0\u00a0\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u25c8 Server now ready on https:\/\/localhost:8888 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518[\/crayon]<\/p>\n6<\/p>\n\n\n\n<p><p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]\u25c8 Netlify Dev \u25c8<br \/>\n\u25c8 Ignored general context env var: LANG (defined in process)<br \/>\n\u25c8 No app server detected. Using simple static server<br \/>\n\u25c8 Unable to determine public folder to serve files from. Using current working directory<br \/>\n\u25c8 Setup a netlify.toml file with a [dev] section to specify your dev server settings.<br \/>\n\u25c8 See docs at: https:\/\/cli.netlify.com\/netlify-dev#project-detection<br \/>\n\u25c8 Running static server from &#8220;freecodecamp-survey&#8221;<br \/>\n\u25c8 Setting up local development server<\/p>\n<p>\u25c8 Static server listening to 3999<\/p>\n<p>Adding local .netlify folder to .gitignore file&#8230;<\/p>\n<p>\u00a0\u00a0\u00a0\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u25c8 Server now ready on https:\/\/localhost:8888 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518[\/crayon]<\/p>\n7<\/p>\n\n\n\n<p><span>On Mac or Linux, you can run <\/span><em><span>export MYVARIABLE=&#8221;value&#8221;<\/span><\/em><span> in your terminal. On Windows you can run <\/span><em><span>$Env:MYVARIABLE=&#8221;value&#8221;<\/span><\/em><\/p>\n\n\n\n<p><span>To define them in Netlify&#8217;s context, you can go though the UI and do it manually, or use the CLI:<\/span><\/p>\n\n\n\n<p><p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]\u25c8 Netlify Dev \u25c8<br \/>\n\u25c8 Ignored general context env var: LANG (defined in process)<br \/>\n\u25c8 No app server detected. Using simple static server<br \/>\n\u25c8 Unable to determine public folder to serve files from. Using current working directory<br \/>\n\u25c8 Setup a netlify.toml file with a [dev] section to specify your dev server settings.<br \/>\n\u25c8 See docs at: https:\/\/cli.netlify.com\/netlify-dev#project-detection<br \/>\n\u25c8 Running static server from &#8220;freecodecamp-survey&#8221;<br \/>\n\u25c8 Setting up local development server<\/p>\n<p>\u25c8 Static server listening to 3999<\/p>\n<p>Adding local .netlify folder to .gitignore file&#8230;<\/p>\n<p>\u00a0\u00a0\u00a0\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u25c8 Server now ready on https:\/\/localhost:8888 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518[\/crayon]<\/p>\n8<\/p>\n\n\n\n<p><span>Now you can add your files, commit and push your code. Congratulations, you went fullstack. Backend, Frontend and Database. And deployed everything live! But our work is not over. There are still a couple things we can do to make this more professional.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 6 &#8211; User feedback<\/h2>\n\n\n\n<p><span>Right now we don&#8217;t have much happening when the user clicks on the <\/span><strong>Submit<\/strong><span> button of our form. We need to change this to let them know they have been successfully recored, or not. First step it check for an error on the dev side of things. HTTP status code are well made, anything equals or higher than 400 is usually an error, so we can do something like this:<\/span><\/p>\n\n\n\n<p><p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]\u25c8 Netlify Dev \u25c8<br \/>\n\u25c8 Ignored general context env var: LANG (defined in process)<br \/>\n\u25c8 No app server detected. Using simple static server<br \/>\n\u25c8 Unable to determine public folder to serve files from. Using current working directory<br \/>\n\u25c8 Setup a netlify.toml file with a [dev] section to specify your dev server settings.<br \/>\n\u25c8 See docs at: https:\/\/cli.netlify.com\/netlify-dev#project-detection<br \/>\n\u25c8 Running static server from &#8220;freecodecamp-survey&#8221;<br \/>\n\u25c8 Setting up local development server<\/p>\n<p>\u25c8 Static server listening to 3999<\/p>\n<p>Adding local .netlify folder to .gitignore file&#8230;<\/p>\n<p>\u00a0\u00a0\u00a0\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u25c8 Server now ready on https:\/\/localhost:8888 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2502<br \/>\n\u00a0\u00a0\u00a0\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518[\/crayon]<\/p>\n9<\/p>\n\n\n\n<p><p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]echo &#8220;# myproject&#8221; &gt;&gt; README.md<br \/>\ngit init<br \/>\ngit add README.md<br \/>\ngit commit -m &#8220;first commit&#8221;<br \/>\ngit branch -M main<br \/>\ngit remote add origin https:\/\/github.com\/ldoguin\/myproject.git<br \/>\ngit push -u origin main[\/crayon]<\/p>\n0<\/p>\n\n\n\n<p>To test it, just make a typo somewhere in your Connection String or Credentials to Couchbase. You should see errors in the webconsole once clicking on <i>Submit<\/i>. But the web console is just for us, we need to add a proper error or success message to our user.<\/p>\n\n\n\n<p><span>I added a couple span HTML elements with error and success message right before the end of the form. Note the <em>hide<\/em> CSS class that makes them invisible for now.<\/span><\/p>\n\n\n\n<p><p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]echo &#8220;# myproject&#8221; &gt;&gt; README.md<br \/>\ngit init<br \/>\ngit add README.md<br \/>\ngit commit -m &#8220;first commit&#8221;<br \/>\ngit branch -M main<br \/>\ngit remote add origin https:\/\/github.com\/ldoguin\/myproject.git<br \/>\ngit push -u origin main[\/crayon]<\/p>\n1<\/p>\n\n\n\n<p><span>And here is the corresponding CSS. Displaying the error in red, hiding or showing an element, and a nice fade-out animation because I am fancy like that.<\/span><\/p>\n\n\n\n<p><p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]echo &#8220;# myproject&#8221; &gt;&gt; README.md<br \/>\ngit init<br \/>\ngit add README.md<br \/>\ngit commit -m &#8220;first commit&#8221;<br \/>\ngit branch -M main<br \/>\ngit remote add origin https:\/\/github.com\/ldoguin\/myproject.git<br \/>\ngit push -u origin main[\/crayon]<\/p>\n2<\/p>\n\n\n\n<p><span>Now to put everything together. The first two lines get the new span elements just added. The call to <\/span><em><span>form.reset()<\/span><\/em><span> is clearing all values from the form when the returned response status code is <em>200<\/em>. Than the rest is playing with CSS classes to make the message appear, than fading out with the addition of the fade-out class, than a 7000ms timeout function will remove every classes and hide the element again. It&#8217;s pretty much the same when there is an error.<\/span><\/p>\n\n\n\n<p><p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]echo &#8220;# myproject&#8221; &gt;&gt; README.md<br \/>\ngit init<br \/>\ngit add README.md<br \/>\ngit commit -m &#8220;first commit&#8221;<br \/>\ngit branch -M main<br \/>\ngit remote add origin https:\/\/github.com\/ldoguin\/myproject.git<br \/>\ngit push -u origin main[\/crayon]<\/p>\n3<\/p>\n\n\n\n<p><p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]echo &#8220;# myproject&#8221; &gt;&gt; README.md<br \/>\ngit init<br \/>\ngit add README.md<br \/>\ngit commit -m &#8220;first commit&#8221;<br \/>\ngit branch -M main<br \/>\ngit remote add origin https:\/\/github.com\/ldoguin\/myproject.git<br \/>\ngit push -u origin main[\/crayon]<\/p>\n4<\/p>\n\n\n\n<p>Now you can test submit a form again and see the different success or error message, depending on what you decided to do. When you are happy you can add, commit and push that code.<\/p>\n\n\n\n<p><span>Congratulations, you made it to the end of this guide! You have used git, GitHub, Netlify and Couchbase Capella to deploy an HTML form on the web, and made sure that the content was stored in a database each time users submit the form.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ready for more?<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Check out <a href=\"https:\/\/www.couchbase.com\/developers\/\">Couchbase developer resources<\/a>: sample applications, code, and tutorials.<\/li>\n\n\n<li>Join our <a href=\"https:\/\/www.couchbase.com\/developers\/community\/\">Community Hub<\/a> to use Discord, Forums, and more.<\/li>\n\n<\/ul>\n\n\n\n<p><a href=\"https:\/\/www.couchbase.com\/developers\/community\/\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14769 size-large\" src=\"https:\/\/www.couchbase.com\/wp-content\/uploads\/sites\/5\/2026\/05\/image_2023-08-28_191205758-1024x865-1.png\" alt=\"\" width=\"900\" height=\"760\"><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Couchbase DevRel team has been working with the Bad Website Club on freeCodeCamp materials.\u00a0 freeCodeCamp is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, online publications and local organizations that intend to make learning software development accessible to anyone. The Bad Website Club is an [&hellip;]<\/p>\n","protected":false},"author":49,"featured_media":2832,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[127,136,301,163,64],"tags":[674,231,726],"ppma_author":[110],"class_list":["post-2833","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-application-design","category-best-practices-and-tutorials","category-cloud","category-javascript","category-tools-sdks","tag-netlify","tag-tutorial","tag-web-application"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.6 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Build a Survey App with Netlify and Couchbase - The Couchbase Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.couchbase.com\/blog\/pt\/building-a-survey-app-with-netlify-and-couchbase\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build a Survey App with Netlify and Couchbase\" \/>\n<meta property=\"og:description\" content=\"The Couchbase DevRel team has been working with the Bad Website Club on freeCodeCamp materials.\u00a0 freeCodeCamp is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, online publications and local organizations that intend to make learning software development accessible to anyone. The Bad Website Club is an [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.couchbase.com\/blog\/pt\/building-a-survey-app-with-netlify-and-couchbase\/\" \/>\n<meta property=\"og:site_name\" content=\"The Couchbase Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-29T01:20:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/05\/image_2023-08-28_192155937.png\" \/>\n\t<meta property=\"og:image:width\" content=\"3732\" \/>\n\t<meta property=\"og:image:height\" content=\"1871\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Laurent Doguin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ldoguin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Laurent Doguin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/ko\\\/building-a-survey-app-with-netlify-and-couchbase\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/ko\\\/building-a-survey-app-with-netlify-and-couchbase\\\/\"},\"author\":{\"name\":\"Laurent Doguin\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#\\\/schema\\\/person\\\/c0aa9b8f1ed51b7a9e2f7cb755994a5e\"},\"headline\":\"Build a Survey App with Netlify and Couchbase\",\"datePublished\":\"2023-08-29T01:20:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/ko\\\/building-a-survey-app-with-netlify-and-couchbase\\\/\"},\"wordCount\":5204,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/ko\\\/building-a-survey-app-with-netlify-and-couchbase\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/05\\\/image_2023-08-28_192155937.png\",\"keywords\":[\"netlify\",\"tutorial\",\"web application\"],\"articleSection\":[\"Application Design\",\"Best Practices and Tutorials\",\"Couchbase Capella\",\"JavaScript\",\"Tools &amp; SDKs\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/ko\\\/building-a-survey-app-with-netlify-and-couchbase\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/ko\\\/building-a-survey-app-with-netlify-and-couchbase\\\/\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/ko\\\/building-a-survey-app-with-netlify-and-couchbase\\\/\",\"name\":\"Build a Survey App with Netlify and Couchbase - The Couchbase Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/ko\\\/building-a-survey-app-with-netlify-and-couchbase\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/ko\\\/building-a-survey-app-with-netlify-and-couchbase\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/05\\\/image_2023-08-28_192155937.png\",\"datePublished\":\"2023-08-29T01:20:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/ko\\\/building-a-survey-app-with-netlify-and-couchbase\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/ko\\\/building-a-survey-app-with-netlify-and-couchbase\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/ko\\\/building-a-survey-app-with-netlify-and-couchbase\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/05\\\/image_2023-08-28_192155937.png\",\"contentUrl\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/05\\\/image_2023-08-28_192155937.png\",\"width\":3732,\"height\":1871},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/ko\\\/building-a-survey-app-with-netlify-and-couchbase\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build a Survey App with Netlify and Couchbase\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/\",\"name\":\"The Couchbase Blog\",\"description\":\"Couchbase, the NoSQL Database\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#organization\",\"name\":\"The Couchbase Blog\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/06\\\/logo.svg\",\"contentUrl\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/06\\\/logo.svg\",\"width\":\"1024\",\"height\":\"1024\",\"caption\":\"The Couchbase Blog\"},\"image\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#\\\/schema\\\/person\\\/c0aa9b8f1ed51b7a9e2f7cb755994a5e\",\"name\":\"Laurent Doguin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b8c466908092b46634af916b6921f30187a051e4367ded7ac9b1a3f2c5692fd2?s=96&d=mm&r=g12929ce99397769f362b7a90d6b85071\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b8c466908092b46634af916b6921f30187a051e4367ded7ac9b1a3f2c5692fd2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b8c466908092b46634af916b6921f30187a051e4367ded7ac9b1a3f2c5692fd2?s=96&d=mm&r=g\",\"caption\":\"Laurent Doguin\"},\"description\":\"Laurent is a nerdy metal head who lives in Paris. He mostly writes code in Java and structured text in AsciiDoc, and often talks about data, reactive programming and other buzzwordy stuff. He is also a former Developer Advocate for Clever Cloud and Nuxeo where he devoted his time and expertise to helping those communities grow bigger and stronger. He now runs Developer Relations at Couchbase.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/ldoguin\"],\"honorificPrefix\":\"Mr\",\"birthDate\":\"1985-06-07\",\"gender\":\"male\",\"award\":[\"Devoxx Champion\",\"Couchbase Legend\"],\"knowsAbout\":[\"Java\"],\"knowsLanguage\":[\"English\",\"French\"],\"jobTitle\":\"Director Developer Relation & Strategy\",\"worksFor\":\"Couchbase\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/pt\\\/author\\\/laurent-doguin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Build a Survey App with Netlify and Couchbase - The Couchbase Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.couchbase.com\/blog\/pt\/building-a-survey-app-with-netlify-and-couchbase\/","og_locale":"pt_BR","og_type":"article","og_title":"Build a Survey App with Netlify and Couchbase","og_description":"The Couchbase DevRel team has been working with the Bad Website Club on freeCodeCamp materials.\u00a0 freeCodeCamp is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, online publications and local organizations that intend to make learning software development accessible to anyone. The Bad Website Club is an [&hellip;]","og_url":"https:\/\/www.couchbase.com\/blog\/pt\/building-a-survey-app-with-netlify-and-couchbase\/","og_site_name":"The Couchbase Blog","article_published_time":"2023-08-29T01:20:02+00:00","og_image":[{"width":3732,"height":1871,"url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/05\/image_2023-08-28_192155937.png","type":"image\/png"}],"author":"Laurent Doguin","twitter_card":"summary_large_image","twitter_creator":"@ldoguin","twitter_misc":{"Written by":"Laurent Doguin","Est. reading time":"18 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.couchbase.com\/blog\/ko\/building-a-survey-app-with-netlify-and-couchbase\/#article","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/ko\/building-a-survey-app-with-netlify-and-couchbase\/"},"author":{"name":"Laurent Doguin","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/c0aa9b8f1ed51b7a9e2f7cb755994a5e"},"headline":"Build a Survey App with Netlify and Couchbase","datePublished":"2023-08-29T01:20:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/ko\/building-a-survey-app-with-netlify-and-couchbase\/"},"wordCount":5204,"commentCount":0,"publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/ko\/building-a-survey-app-with-netlify-and-couchbase\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/05\/image_2023-08-28_192155937.png","keywords":["netlify","tutorial","web application"],"articleSection":["Application Design","Best Practices and Tutorials","Couchbase Capella","JavaScript","Tools &amp; SDKs"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.couchbase.com\/blog\/ko\/building-a-survey-app-with-netlify-and-couchbase\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.couchbase.com\/blog\/ko\/building-a-survey-app-with-netlify-and-couchbase\/","url":"https:\/\/www.couchbase.com\/blog\/ko\/building-a-survey-app-with-netlify-and-couchbase\/","name":"Build a Survey App with Netlify and Couchbase - The Couchbase Blog","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/ko\/building-a-survey-app-with-netlify-and-couchbase\/#primaryimage"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/ko\/building-a-survey-app-with-netlify-and-couchbase\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/05\/image_2023-08-28_192155937.png","datePublished":"2023-08-29T01:20:02+00:00","breadcrumb":{"@id":"https:\/\/www.couchbase.com\/blog\/ko\/building-a-survey-app-with-netlify-and-couchbase\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.couchbase.com\/blog\/ko\/building-a-survey-app-with-netlify-and-couchbase\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.couchbase.com\/blog\/ko\/building-a-survey-app-with-netlify-and-couchbase\/#primaryimage","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/05\/image_2023-08-28_192155937.png","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/05\/image_2023-08-28_192155937.png","width":3732,"height":1871},{"@type":"BreadcrumbList","@id":"https:\/\/www.couchbase.com\/blog\/ko\/building-a-survey-app-with-netlify-and-couchbase\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.couchbase.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Build a Survey App with Netlify and Couchbase"}]},{"@type":"WebSite","@id":"https:\/\/www.couchbase.com\/blog\/#website","url":"https:\/\/www.couchbase.com\/blog\/","name":"The Couchbase Blog","description":"Couchbase, the NoSQL Database","publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.couchbase.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/www.couchbase.com\/blog\/#organization","name":"The Couchbase Blog","url":"https:\/\/www.couchbase.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/06\/logo.svg","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/06\/logo.svg","width":"1024","height":"1024","caption":"The Couchbase Blog"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/c0aa9b8f1ed51b7a9e2f7cb755994a5e","name":"Laurent Doguin","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/b8c466908092b46634af916b6921f30187a051e4367ded7ac9b1a3f2c5692fd2?s=96&d=mm&r=g12929ce99397769f362b7a90d6b85071","url":"https:\/\/secure.gravatar.com\/avatar\/b8c466908092b46634af916b6921f30187a051e4367ded7ac9b1a3f2c5692fd2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b8c466908092b46634af916b6921f30187a051e4367ded7ac9b1a3f2c5692fd2?s=96&d=mm&r=g","caption":"Laurent Doguin"},"description":"Laurent is a nerdy metal head who lives in Paris. He mostly writes code in Java and structured text in AsciiDoc, and often talks about data, reactive programming and other buzzwordy stuff. He is also a former Developer Advocate for Clever Cloud and Nuxeo where he devoted his time and expertise to helping those communities grow bigger and stronger. He now runs Developer Relations at Couchbase.","sameAs":["https:\/\/x.com\/ldoguin"],"honorificPrefix":"Mr","birthDate":"1985-06-07","gender":"male","award":["Devoxx Champion","Couchbase Legend"],"knowsAbout":["Java"],"knowsLanguage":["English","French"],"jobTitle":"Director Developer Relation & Strategy","worksFor":"Couchbase","url":"https:\/\/www.couchbase.com\/blog\/pt\/author\/laurent-doguin\/"}]}},"acf":[],"authors":[{"term_id":110,"user_id":49,"is_guest":0,"slug":"laurent-doguin","display_name":"Laurent Doguin","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/b8c466908092b46634af916b6921f30187a051e4367ded7ac9b1a3f2c5692fd2?s=96&d=mm&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":""}],"_links":{"self":[{"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/posts\/2833","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/users\/49"}],"replies":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/comments?post=2833"}],"version-history":[{"count":0,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/posts\/2833\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/media\/2832"}],"wp:attachment":[{"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/media?parent=2833"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/categories?post=2833"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/tags?post=2833"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/ppma_author?post=2833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}