This repository contains the source code for the workshop "Keep your frontend and backend in sync" held at WeAreDeveloper 2024.
This is a code along workshop - you will be able to deploy your own version of the project and try to guess the password of the other participants.
Do not hesitate to ask questions during the workshop, we will be happy to help you!
You can use your own IDE or use Gitpod, a free online IDE that will allow you to code along with us without having to install anything on your computer.
Install genezio in your preferred environment by running the following command:
npm install -g genezioLogin to genezio by running the command below. A browser window will open, and you will be asked to log in with your GitHub account or Google account.
genezio loginClone this repository and navigate to the project folder.
git clone https://github.com/andreia-oca/wearedevelopers-workshop.git
cd wearedevelopers-workshopRight the project contains a simple hello world function. Deploy it and test it out.
Deploy the project by running the following command:
genezio deployThe Genezio dashboard is available at the following URL: https://app.genez.io.
You can take a look to see information about your project:
- Check the
Logspage to see the logs of your deployed functions. - Test the backend API in the
Test Interfacepage.
The dashboard is the main management interface for your project. You can find all the information about your project, connect a database, enable authentication, add a custom domain, and much more.
Going back to your IDE, navigate to the server directory and open the index.ts file.
Uncomment the following methods: ask() and the checkPassword().
Take a bit of time to understand the code and what each function does.
To be able to do calls to OpenAI, you need to create an account and get an API key. For this workshop we are providing you with an API key in this spreadsheet.
Create a file server/.env and add the OpenAI API key to it:
OPENAI_API_KEY=sk-XXXXXXXXXXXXXXXXXXXXXXXXYou can test the backend functions locally by running the following command in the root directory of the project:
genezio localThis command spawns a local server that you can use to test your project before deploying it again.
To test the backend API, open a browser page on http://localhost:8083 and use the Test Interface to call the ask and checkPassword functions.
Going back to your IDE, navigate to the client directory and open the src/App.tsx file.
Uncomment the methods askCapy() and checkPassword().
Notice that the calls to the backend service are made using the generated SDK genezio-sdk/wearedevelopers-workshop.
This SDK makes all the exported types and methods from the backend service available in the frontend.
const response = await BackendService.ask(question);You are now ready to deploy the fullstack project.
Run the following command in the root directory of the project:
genezio deploy --env server/.envThe purpose of each application is to design a prompt that will instruct the AI to protect the password at all cost.
Choose a password and write a prompt that will make the AI protect it.
Deploy your project and publish the URL in this spreadsheet.
Feel free to try out to guess other participants' passwords. Once you have guessed a password, please claim it in the spreadsheet for glory and fame! 🚀
You can improve your prompt and redeploy as many times as you want. Encourage your left/right neighbors to guess your password!
Right now both the password and the prompt are hardcoded in the backend service. This is not ideal as you need to redeploy the service every time you want to change the password or the prompt.
To fix this, you can connect a database to the backend service and store the password and prompt in the database.
Install the pg package in the server directory:
npm install pgIntegrate the following code in the server/index.ts file to connect to a PostgreSQL database:
import pg from 'pg'
const { Pool } = pg
pool = new Pool({
// Use the environment variable to connect to the database
connectionString: process.env["GETTING_STARTED_DATABASE_URL"],
ssl: true,
});
async function savePrompt(prompt: string, password: string) {
await this.pool.query(
"CREATE TABLE IF NOT EXISTS prompt_playground (id serial PRIMARY KEY,prompt VARCHAR(255), password VARCHAR(255))"
);
await this.pool.query("INSERT INTO prompt_playground (prompt, password) VALUES ($1, $2)", [prompt, password]);
const result = await this.pool.query("SELECT * FROM prompt_playground");
return JSON.stringify(result.rows);
}To create and host a Postgres database in Genezio, go to the Database page in the Genezio dashboard and follow the wizard. For simplicity you should name it getting_started. Otherwise, you should update the backend code to use the correct environment variable as a connection string.
To prevent spamming for the OpenAI calls, you can add a rate limiter to the backend service.
Simply add the decorator @GenezioRateLimit above the ask function in the server/index.ts file.
Install the rate limiter package in the server directory:
npm install @genezio/rate-limiterimport { GenezioRateLimiter } from 'genezio-rate-limiter';
@GenezioRateLimiter({ dbUrl: process.env.UPSTASH_REDIS_URL, limit: 5 })
async ask(question: string): Promise<AskSuccessResponse | ErrorResponse> {
// ...
}Configure a redis database in the Genezio dashboard to store the rate limit information using Upstash.
You can test out the rate limiter by calling the ask function multiple times in a row in the Test Interface page.
You can authenticate the players with email and password to be able to create a leaderboard.
Check this tutorial Genezio documentation to understand how to enable authentication in your Genezio project.
Feel free to ask questions during the workshop, we will be happy to help you!
If you encounter any issues outside the workshop, please leave a [GitHub issue] and we will get back to you as soon as possible.