Due Date: Sun. 9/27 at 8:00 PM Time Estimate: up to about 6 hours Deliverables: Backend deployed on Render + backend and frontend code, README, and key prompts on GitHub + short video + brief form response
Assignment Overview
Goal: Build a simple backend service on Render.com and integrate it with your portfolio website or a GitHub Pages site. This assignment teaches you how to build server-side code that handles operations that are better done on the backend (like using APIs securely, storing data, or processing user input).
Why This Matters: Many features are best implemented on the backend because: (1) you can keep API keys and secrets secure, (2) you can process and store data safely, (3) you can do computationally intensive work, and (4) you can validate user input before using it. This assignment teaches you to identify when a backend is useful and how to build one quickly using AI.
Examples of what you might build:
A chatbot on your website that talks to an AI (e.g., a character version of yourself or a famous person) using OpenAI or Claude API
A form that saves data to a database
A page that fetches data from an API that requires authentication
A tool that processes user input in some way (e.g., translates text, generates images, analyzes sentiment)
See the course website for an example: check out this Carnegie Chat example, which uses a Python backend on Render to power an AI chatbot.
Tutorial: Watch this first!
This video walks through the steps for getting an example up and running on Render. We strongly recommend you watch this first so that you can see what steps you should take, and so that you can get some inspiration for how to prompt for what you need. Your code will be different, so focus on capturing the main ideas, and refer back to HW3 for help with APIs.
Requirements & Scoring
What You Must Submit
Backend code deployment: A public Render deployment link to your running backend service. (Note: If you wish to use a different service like Vercel, that's ok too, though we will be best equipped to help you with Render.)
Backend code on GitHub: A new public repository containing your backend code (Python using Flask or FastAPI is recommended) along with your readme and prompt log described below. Note that this repository is different from the repository you will use for your frontend.
README: In your backend repo, add a README that briefly explains:
What your backend does (what endpoints it has, what parameters it accepts, what it returns)
How the frontend communicates with the backend (which endpoints it calls, when, and what it does with the response)
How to set up and run the backend (including any environment variables or API keys needed locally)
How authentication or secrets are handled (e.g., API keys stored on the backend, not in frontend code)
Prompt log: In your backend repo, add a short note (in README or a separate file like prompt_log.md) listing which AI model(s)/tool(s) you used and the key prompts that shaped implementation.
Frontend code deployed and on GitHub: Add your frontend code to Github pages (either as a new feature on your portfolio or as a separate page, like the Carnegie Chat example). This is the HTML/CSS/JavaScript that communicates with your backend. We recommend keeping the frontend on Pages and the backend on Render. Having the two halves live at different URLs will give you some experience working with a well-defined boundary. You may instead serve both from a single Render service if you'd rather avoid dealing with CORS, but be aware that Render's free tier sleeps when idle, so the whole page will be slow to wake up rather than just the first request.
Portfolio: If your work is not a feature on your portfolio (i.e. if it's not already directly integrated into your portfolio somehow) add a link to it in your projects section.
Short Video: Make a short video that shows what you've created and how it works (screenshare of the frontend interacting with the backend is fine). This can be brief, but should contain enough information for us to grade your work if we can't run it ourselves. Submit a link to the video (YouTube or Google Drive with view permissions) below, and make sure we can view it by testing your link in an incognito window.
Google form:Fill this out with some key information, like the public URL for your frontend (which might just be a link to your portfolio), the repository URL for your backend, the repository URL for your frontend, and the link to your video. Be sure to fill this out before the deadline.
Privacy and Security:Once again, do not commit API keys, credentials, or secrets to GitHub. Keep all secrets on the Render backend using environment variables or an uploaded secret file that is not in your repository. We will not accept submissions that expose private keys publicly. Watch the tutorial video for information on how to do this.
Grading
You'll receive full credit for submitting a working backend-frontend integration with clear documentation and clean communication: Your frontend should make requests to your backend and display the results or confirm that the request was handled successfully. It should handle errors gracefully. Focus on core functionality and clean communication between frontend and backend rather than UI polish.
Detailed Instructions
Choose what your backend will do. Decide on something interesting that requires server-side logic: handle authentication, process data, call a third-party API securely, store information, etc.
Focus on functionality: For this assignment, prioritize getting the backend and frontend working together over adding lots of features and polishing the UI or user experience. Don't spend much time on design details. Later in the course (Project 2), we'll bring together your knowledge of frontends, APIs, and backends into one really polished project. For that and any future work, you can either build on earlier assignments in this class or start fresh with an entirely new idea, as long as your work meets the assignment specifications.
A caution on scope: Last semester's class rated this assignment noticeably harder than HW3, and the difficulty usually came from the platforms rather than the code. You may treat this as the seed of your Project 2 (which we officially begin next week), but we'd suggest aiming for something interesting without being exceptionally complex here, and saving the ambitious idea for the project itself. Every additional service you glue on is one more place to get stuck. A few comments from last semester's students:
"Setting up auth and database was tricky and AI wasn't super helpful."
"It's harder when it involves jumping between different services, especially for the database configuration part."
"Honestly, the hardest part for me was understanding how ports worked and how to run things locally. Otherwise, I found AI to be pretty helpful in understanding how the backend should connect to the front end. It just struggled to tell me why."
Write your backend. We recommend using Python with Flask, but you may also use FastAPI or another backend framework, or you may use a different language altogether. Use AI tools to help you write the code. Make sure your backend:
Has at least one endpoint that accepts data and returns a meaningful response
Handles any API keys or secrets using environment variables or a secret file that is not present on your repo or your frontend
Returns JSON or another structured format that your frontend can use
Deploy your backend to Render. Create a free account at render.com, create a new Web Service, connect your GitHub repo, and deploy. Render will give you a public URL (e.g., https://my-backend.onrender.com).
Write your frontend. Create an HTML/CSS/JavaScript page (on your portfolio or a new repo) that:
Makes requests to your backend using fetch() or another HTTP client
Displays the responses nicely (or provides confirmation that the request was handled)
Handles errors (e.g., if the backend is down or the user provides bad input)
Test end-to-end. Make sure your frontend can call your backend and display real results. Test error cases too (e.g., what happens if the user submits an empty form).
Document everything. Write a clear README explaining what your backend does, how to run it locally, how the frontend calls it, and where secrets are stored.
Push both repos to GitHub (backend + frontend) and fill out the Google form with your Render URL and GitHub repos before the deadline.
Make your video and upload it, and fill out the google form before the deadline.
Testing Locally
Get everything working on your own machine before you deploy. Debugging is much faster locally, and every trip through Render costs you a few minutes of waiting.
Start the backend. Run your backend file (for Flask, usually something like python app.py). It should print a local address such as http://127.0.0.1:5000. Leave that terminal running.
Check that it responds before you involve the frontend at all. Open an endpoint in your browser, or send it a request with curl: curl -X POST http://127.0.0.1:5000/chat -H "Content-Type: application/json" -d '{"message":"Hello"}' If you get JSON back, the backend works, and anything still broken is in the frontend or in the connection between the two. (On Windows, use curl.exe in PowerShell, since plain curl there is a different command and won't accept these options.)
Point your frontend at the local backend. Temporarily replace the Render URL in your JavaScript with your local address, then open your frontend .html file in the browser.
Watch both sides. Errors appear in two different places: the terminal running your backend, and the browser console (right-click, Inspect, Console). Check both, and if you need help ask us or AI (and mention what you found).
Put the Render URL back before you push. Forgetting this is a common way to submit a site that works on your laptop and nowhere else.
One difference to expect: secrets are handled separately in each place. On Render you set environment variables in the dashboard, but locally you'll need to set them in your shell or in a file that your .gitignore excludes.
What is a Backend? Key Concepts
A backend is a program running on a server that your frontend (website) can communicate with. Here are some key ideas:
Server: A computer or service that runs your code and is always available to respond to requests.
Endpoint: A specific URL on your backend that does something (e.g., https://my-backend.onrender.com/chat).
Request: Your frontend asks the backend to do something by sending data (usually as JSON).
Response: The backend processes the request and sends back a result (usually as JSON).
Environment variables: Settings stored on the server (like API keys) that your code can read but aren't in the code itself.
Framework: A library that makes it easy to write a backend (Flask, FastAPI, Django, etc.).
Render: A service that hosts your backend for free (or cheap) and handles all the server stuff for you.
CORS: A security rule that controls which websites can talk to your backend. You may need to ask AI to enable CORS for your frontend to communicate with your backend.
When you use AI to write your backend, ask it to explain what each endpoint does and how to test it locally.
Tips
Start simple: Begin with a single endpoint that does one thing well. You can add more endpoints later if you have time.
Test locally first: Before deploying to Render, test your backend on your laptop. Make sure it works before you push it live.
Run the server locally (for example, run your backend Python file and you should see an IP address show up.) While it is running locally, you should be able to substitute this IP address for your endpoint in your frontend .html code, and if you open your frontend in the browser, you should be able to interact with the service. You can also use curl as shown farther below to send very specific requests to your endpoint.
Use environment variables: Store API keys, database URLs, and secrets as environment variables or in a secret file on Render. Never put them in your code. See the Render docs for how to set these.
Handle errors gracefully: Your backend should return helpful error messages (not just crash). Your frontend should display these errors to the user.
Remember CORS: If your frontend is on GitHub Pages (https://username.github.io) and your backend is on Render, you may need to enable CORS on the backend so the browser allows the requests. Most backend frameworks have easy middleware for this.
Use the documentation: Render, Flask, and FastAPI all have good documentation. Read the basics so you understand what your AI-generated code is doing.
Ask AI to explain: After getting code from an AI model, ask it to explain what each function and endpoint does so you can demonstrate understanding and debug if needed.
Remember, Ed and OH are here to help! Even if we don't know the answer to your question right away, we can probably point you in a good direction.
Use fetch() in JavaScript to call your backend. Example: fetch('https://my-backend.onrender.com/chat', { method: 'POST', body: JSON.stringify({message: "Hello"}) })
Test requests locally using curl: curl -X POST https://my-backend.onrender.com/chat -d '{"message":"Hello"}' -H "Content-Type: application/json"
Questions? Ask on Ed, attend office hours, or email the instructor. Consult the course AI usage and collaboration policies on the course homepage.