Introduction

What is Replit Agent

How does Replit Agent work

Prompting Replit Agent

Choosing your tech stack

Replit in action - Building the Survey

Replit in action - Integrating Notion

( the primaryDescriptionMarkdown is long - several lines, include images, as long as you want )

In this course we <headline of what we do>. <why this technology is good> but <here's how learning it is problem>. 

In <the length of these lessons> we cover <three salient points about what we cover. Your BEST points>. Its <however long it is> and comes with <these bonus features, and reasons to buy. code, etc.>

It's taught by <author name> who <credibility, reason you should listen to them>. <social proof, if you have it yet>

<then you can list other supporting stuff you want to add, anything you want here>

-------
Example:
-------

We created a free course to create your first GraphQL server (from scratch) using Node and TypeScript. TypeScript and GraphQL are a powerful combo, but there's a lot of confusing edges if you're getting it setup the first time.

In this course we cover the basics of getting TypeScript setup with Node, how GraphQL works, and how to set up a GraphQL server using Apollo server. It's two hours long, it comes with complete code examples, and we walk through the code step-by-step.

It's taught by my friend, Shopify-engineer Hassan Djirdeh and he's integrated what he's learned using GraphQL in production as an engineer at Shopify. We've already had over 1,300 students enroll and it's been getting great reviews so far.

// ... and so on

Learn how to build beautiful, fully-functional web applications with Replit Agent, an advanced AI-coding agent. This course will guide you through the workflow of using Replit Agent to build a Typeform-style survey application with React and TypeScript. You will learn effective prompting techniques, explore and debug code that's generated by Replit Agent, and create a custom Notion integration for forwarding survey responses to a Notion database.

Building a Typeform-Style Survey with Replit Agent and Notion

How Replit Agent works and why it's advantageous over alternatives like v0, Bolt, and Lovable

How to use effective prompting techniques to generate high quality applications with Replit Agent

How to build a Typeform-style survey using React, TypeScript, Tailwind CSS, and Framer Motion

How to understand the code in every file generated by Replit Agent

How to create your first Notion integration

How to forward survey responses to a Notion database

 The next thing that we need to do is to, send the survey responses to a Notion Database? So we wanted to set up the notion integration. However it's giving us these other suggestions and this is probably not the time to do this right now since the core functionality hasn't yet been flushed out just yet, where we want to have these responses saved to a Notion database.

And so let's just tell it to set up a notion integration. So that responses are saved to a notion database.

So let's give it some time to think. But ideally what's going to happen here is that it's going to, hopefully ask us to provide some environment variables. And Perfect. Yeah, that's exactly what it does? So it recognized that, it's already implemented, the code for sending, the responses to a notion database? But as you can see because we didn't provide any environment variables it was sending back this no value to our client.

And it thought that the response was successful, it was successful, it's just that it wasn't being sent to our notion database basically that all happens in this try-catch block here, which is never reached since we haven't yet provided these environment variables. And so let's do that right now.

So how exactly do we get a notion API key? So we would have to go to this page, that notion suggests notion. So my integrations I'm already logged into my Notion account, but you would have to log into your Notion account to access this page ? And right over here you can see that in your Notion integrations dashboard, that you can actually create new integrations?

And an integration gives applications the necessary permissions to operate within your workspace ? So let's just create a new integration. And then from there let's just give it the hypothetical name of, solar. Survey integration?

Something very straightforward. Nothing too complex. From there, we're going to select a workspace and, this could be your work workspace, but in this case for the purposes of the demo, I'm just gonna choose my own personal workspace. And for an integration type, we're just going to keep at the default internal.

And this is just to keep the integration private for the time being. But if you do switch to using a public integration, you're probably gonna have to fill out a couple additional fields. But for now, we're just gonna keep it private. And you can add a logo.

Now, if you don't add a logo to your integration, that's totally fine. The default logo will just be the first letter of the integration's name. So in this case, the logo would be just the letter s. That's basically what it'll be. And so once you have filled out all the necessary fields, you click save and it'll tell you that the integration was successfully created.

And if you click on this configure integration settings button, you're going to notice the integration secret right here. And that is going to be your notion API key. If you scroll down a little bit more, you can also see some of the permissions that you can allow the integration to enable for the application ?

So in this case right here, if we go back to our survey application, we're going to notice that there is a single method here notion that pages that create, and this is basically adding a role to your database? So you'll only need the insert permission. You don't necessarily need to update or to read content permissions, but that's totally up to you if you want to keep those.

But I like to personally limit the permission. So this way if anyone were to have access to this API key they can't necessarily do much else ? We're just going to insert content into I. This database and nothing else, nothing more ? So we're going to save those permissions and we're going to copy this internal integration secret since that's our notion, API key.

And then from there, we're going to paste that into here. And you might also see this term secrets secrets is Replits way of storing environment variables. With secrets you can actually give Replit agent the option of actually allowing these environment variables to be shared across multiple Replit applic.

So this way, let's say, you've been building, multiple rack applications in repelled and you don't want to. Go through the tedious process of copying and pasting your open AI API key multiple times in those applications. You can just basically store it in secrets and then give it the permissions to share it across, all of your repos.

So this way you're able to  have the open AI API key accessible to all those applications. And what's left now is the Notion database id, and this is pretty straightforward. To obtain, you'll need to go to your Notion Workspace, and you're going to want to create a new page.

---
title: "Replit in action - Integrating Notion"
privateVideoUrl: https://stream.mux.com/5pCvp5mR006B01XuFH3ycQzcp3VioJkq6VFr9PeQ003rNU.m3u8
isPublicLesson: true

---

 The next thing that we need to do is to, send the survey responses to a Notion Database? So we wanted to set up the notion integration. However it's giving us these other suggestions and this is probably not the time to do this right now since the core functionality hasn't yet been flushed out just yet, where we want to have these responses saved to a Notion database.

And so let's just tell it to set up a notion integration. So that responses are saved to a notion database.

So let's give it some time to think. But ideally what's going to happen here is that it's going to, hopefully ask us to provide some environment variables. And Perfect. Yeah, that's exactly what it does? So it recognized that, it's already implemented, the code for sending, the responses to a notion database? But as you can see because we didn't provide any environment variables it was sending back this no value to our client.

And it thought that the response was successful, it was successful, it's just that it wasn't being sent to our notion database basically that all happens in this try-catch block here, which is never reached since we haven't yet provided these environment variables. And so let's do that right now.

So how exactly do we get a notion API key? So we would have to go to this page, that notion suggests notion. So my integrations I'm already logged into my Notion account, but you would have to log into your Notion account to access this page ? And right over here you can see that in your Notion integrations dashboard, that you can actually create new integrations?

And an integration gives applications the necessary permissions to operate within your workspace ? So let's just create a new integration. And then from there let's just give it the hypothetical name of, solar. Survey integration?

Something very straightforward. Nothing too complex. From there, we're going to select a workspace and, this could be your work workspace, but in this case for the purposes of the demo, I'm just gonna choose my own personal workspace. And for an integration type, we're just going to keep at the default internal.

And this is just to keep the integration private for the time being. But if you do switch to using a public integration, you're probably gonna have to fill out a couple additional fields. But for now, we're just gonna keep it private. And you can add a logo.

Now, if you don't add a logo to your integration, that's totally fine. The default logo will just be the first letter of the integration's name. So in this case, the logo would be just the letter s. That's basically what it'll be. And so once you have filled out all the necessary fields, you click save and it'll tell you that the integration was successfully created.

And if you click on this configure integration settings button, you're going to notice the integration secret right here. And that is going to be your notion API key. If you scroll down a little bit more, you can also see some of the permissions that you can allow the integration to enable for the application ?

So in this case right here, if we go back to our survey application, we're going to notice that there is a single method here notion that pages that create, and this is basically adding a role to your database? So you'll only need the insert permission. You don't necessarily need to update or to read content permissions, but that's totally up to you if you want to keep those.

But I like to personally limit the permission. So this way if anyone were to have access to this API key they can't necessarily do much else ? We're just going to insert content into I. This database and nothing else, nothing more ? So we're going to save those permissions and we're going to copy this internal integration secret since that's our notion, API key.

And then from there, we're going to paste that into here. And you might also see this term secrets secrets is Replits way of storing environment variables. With secrets you can actually give Replit agent the option of actually allowing these environment variables to be shared across multiple Replit applic.

So this way, let's say, you've been building, multiple rack applications in repelled and you don't want to. Go through the tedious process of copying and pasting your open AI API key multiple times in those applications. You can just basically store it in secrets and then give it the permissions to share it across, all of your repos.