Tutor form → Database

[dilanurbayraktar]

Front-End and Back-End Having a Convo 💬

Summary 💻

For this ticket, you will implement the functionality of putting the information from the Tutor Form into the database when someone successfully fills it out. We already have the form collecting input as variables, butttt we need them stored in the database for later use.

Deliverables 🚀

• Schedule at least two meetings as a pair
• Create a new branch using the "create a branch" button
• Create your POST request endpoint
• Create your frontend endpoint fetch
• See if the data can be put into the database
• Open a PR and request review from @brandondionisio.

Steps 👍

• If you go into TutorForm.tsx, you can see that all the form fields are being stored in a useState variable which is cleared when the "submit" button is clicked and there is valid information put. Instead of clearing all of the variables, make a function handleSubmit that is called when the "submit" button is successfully pressed (with onClick). Make the function console.log something so you know it works correctly.
• Since we are putting new data into the tutor table in the database, you will need to use a POST request. So, open backend/src/index.ts and create a new POST request with a route URL of "/tutorsubmission".
• To make sure you can reach your endpoint, make your POST request console.log something and then attempt to fetch the endpoint in your handleSubmit function. If you go to your browser console, you should be able to see your console.log message.
• Now, it's time to post some data! You can use the following format to pass in the form information to the endpoint you made: const response = await fetch("https://your-api-endpoint.com/form-submit", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(formData),});
• Now, with the information passed to your endpoint, you can extract all the variables with const {information1, information2, ...} = req.body. Console.log this form data to see if it was posted correctly.
• Finally, you can make the drizzle query in your endpoint to add the new row in the tutor table. You can use: await db.insert(tutors).values({information1, information2, ...});. Verify that the new row gets put into the database and yay you're done, amazing work.

Tip for success 📈

• Use npx tsx src/index.ts to run the backend server
• Resource on express routing: here
• Use the already created routes and fetches as a template for your own
• Resource on the fetch API: here

Where to get help!

Reach out to @dilanurbayraktar and @brandondionisio.