OWASP Backend Workshop

Welcome to your first backend project!

This is a hands-on workshop where you'll build your very own backend server from scratch. Don't worry if you've never done this before — this guide will walk you through every step, explaining everything in simple terms.

What is This Project?

This is a backend server that connects to an AI service called Groq. Think of it like this:

You have a simple web page (frontend) where users can type questions
Your backend server receives those questions
The backend talks to Groq's AI to get smart answers
The backend sends the answer back to the web page

In simple words: You're building the "middle person" that connects a website to an AI brain.

What Problem Does This Solve?

Imagine you want to build a chatbot or AI assistant on your website. You can't directly connect your website to AI services because:

Security: You need to hide your secret API keys (passwords)
Control: You want to validate what users send before passing it to AI
Processing: Sometimes you need to modify or log the data

That's where a backend comes in. It's like a secure bridge between your website and external services.

What Will You Build?

By the end of this workshop, you will have:

A working Node.js backend server
An API endpoint that accepts questions
Integration with Groq AI service
A simple web interface to test your backend
Understanding of how frontend and backend communicate

What Does "Backend" Mean?

Think of a restaurant:

Frontend = The dining area where customers sit and order (what users see)
Backend = The kitchen where food is prepared (where the real work happens)
API = The waiter who takes orders and brings food (connects frontend and backend)

In web development:

Frontend: The website you see in your browser (HTML, CSS, JavaScript)
Backend: The server that processes requests, talks to databases, handles business logic
API: The communication channel between them (like a messenger)

Your backend will:

Listen for incoming requests
Process the data
Talk to external services (like Groq AI)
Send responses back

Prerequisites

Before you start, you need a few tools installed on your computer. Don't worry — we'll explain what each one does!

1. Node.js (Required)

What is it?
Node.js lets you run JavaScript code on your computer (not just in a browser). It's what powers your backend server.

How to check if you have it:

Open your terminal (Command Prompt on Windows, Terminal on Mac/Linux) and type:

node --version

If you see something like v18.17.0 or v20.10.0, you're good!

Don't have it?
Download from nodejs.org — choose the LTS version (Long Term Support).

2. VS Code (Recommended)

What is it?
A code editor — like Microsoft Word, but for writing code.

Download: code.visualstudio.com

3. Git (Optional but Recommended)

What is it?
A tool to download code from GitHub and track changes.

How to check:

git --version

Don't have it?
Download from git-scm.com

How to Get This Project on Your Laptop

You have two options:

Option A: Clone Using Git (Recommended)

Open your terminal
Navigate to where you want to save the project:
```
cd Desktop
```
Clone the repository:
```
git clone <your-repo-url>
```
Go into the project folder:
```
cd Backend_workshop
```

Option B: Download ZIP from GitHub

Go to the GitHub repository page
Click the green Code button
Click Download ZIP
Extract the ZIP file to your Desktop
Open the folder in VS Code

Understanding the Project Structure

After downloading, you'll see these files and folders:

Backend_workshop/
├── index.js              ← Your main server file (EMPTY — you'll write this!)
├── routes/
│   └── groq.routes.js    ← Defines API endpoints (already written)
├── services/
│   └── groq.services.js  ← Talks to Groq AI (already written)
├── .env                  ← Secret keys (you'll create this)
├── .env.example          ← Template for .env file
├── package.json          ← List of dependencies
├── node_modules/         ← Installed packages (appears after npm install)
├── index.html            ← Simple frontend to test your backend
└── .gitignore            ← Tells Git what files to ignore

Let's Explain Each File:

`index.js` — Your Main Server File

This is intentionally empty! This is where YOU will write the backend code.

Think of it as the "main entrance" of your backend. It will:

Import necessary packages
Create the server
Connect routes
Start listening for requests

`routes/` Folder

What are routes?
Routes are like different pages on a website, but for your backend.

For example:

/ → Health check (is the server running?)
/ask → Send a question to AI

The file groq.routes.js already defines these routes for you.

`services/` Folder

What are services?
Services contain the "business logic" — the actual work your backend does.

The file groq.services.js has a function that talks to the Groq AI API.

`.env` — Environment Variables (Secret Keys)

This file stores secret information like API keys.

Why is it important?

You don't want to share your API keys publicly
.env is listed in .gitignore, so it won't be uploaded to GitHub

You'll create this file yourself in the next section.

`package.json` — Project Configuration

This file tells Node.js:

What your project is called
What packages (libraries) it needs
How to run scripts

You don't need to edit this file.

`node_modules/` — Installed Packages

This folder appears after you run npm install.

It contains all the code libraries your project needs (like Express, Groq SDK, etc.).

NEVER EDIT FILES IN THIS FOLDER! It's auto-generated.

`index.html` — Simple Frontend

This is a basic web page you can open in your browser to test your backend.

It has:

A text box to type questions
A button to send the question to your backend
A response area to show the AI's answer

Environment Setup

What is `.env`?

.env is a special file that stores secret keys and configuration settings.

Think of it like a locked safe where you keep passwords.

How to Create Your `.env` File

In your project folder, you'll see a file called .env.example
Copy it and rename the copy to .env
Open .env in VS Code

It should look like this:

GROQ_API_KEY="your_api_key"
PORT="3000"

How to Get Your Groq API Key

Go to console.groq.com
Sign up for a free account
Go to API Keys section
Click Create API Key
Copy the key
Paste it in your .env file:

GROQ_API_KEY="gsk_your_actual_key_here"
PORT="3000"

Why Isn't `.env` Pushed to GitHub?

Because it contains secret keys! If you upload it to GitHub, anyone can steal your API key and use it.

That's why .env is listed in .gitignore — Git will ignore it and never upload it.

Installing Dependencies

What Does `npm install` Do?

npm stands for Node Package Manager. It's like an app store for code libraries.

When you run npm install, it:

Reads package.json to see what packages you need
Downloads them from the internet
Puts them in the node_modules/ folder

How to Install

Open your terminal in the project folder and run:

npm install

What you'll see:

A progress bar
Lots of text scrolling
A message saying "added X packages"

What happens after:

A node_modules/ folder appears
You're ready to code!

How to Run Your Server

Once you've written your code in index.js, it's time to start the server!

Starting the Backend

In your terminal, run:

node index.js

What You Should See

If everything is correct, you'll see:

Server running on port 3000

Congratulations! Your backend is now running!

Common Errors You Might See

Error: Cannot find module 'express'

Why? You forgot to run npm install

Fix: Run npm install first

Error: PORT is not defined

Why? Your .env file isn't loading

Fix: Make sure you:

Created the .env file (not .env.example)
Added dotenv.config() in your code

Error: GROQ_API_KEY is not defined

Why? You didn't add your API key to .env

Fix: Open .env and paste your Groq API key

Error: Port 3000 is already in use

Why? Another program is using port 3000

Fix: Either:

Close the other program
Change the port in .env to 3001 or 8000

How to Test Your Backend

Option 1: Using the HTML File (Easiest!)

Make sure your backend is running (node index.js)
Open index.html in your browser (just double-click it)
Type a question like "What is Node.js?"
Click Send to Backend
You should see an AI response!

Option 2: Using Your Browser

Open your browser and go to:

http://localhost:3000/

You should see:

{"status": "Server is running"}

This confirms your backend is alive!

Option 3: Using Postman (Advanced)

Postman is a tool for testing APIs.

Download Postman from postman.com
Create a new POST request
URL: http://localhost:3000/ask

Body (JSON):

{
  "prompt": "Explain what an API is"
}

Click Send
You should get an AI response!

Common Beginner Mistakes

1. Forgetting `npm install`

Always run npm install before running your server!

2. Wrong Node Version

Make sure you have Node.js version 16 or higher.

Check with: node --version

3. `.env` Not Loading

Make sure:

The file is named .env (not .env.txt or .env.example)
It's in the root of your project (same folder as index.js)
You called dotenv.config() in your code

4. Port Already in Use

If you see "port already in use":

Close any other servers you're running
Or change the port in .env

5. Forgetting to Import Packages

Make sure you import everything you use:

import express from 'express';
import dotenv from 'dotenv';
import cors from 'cors';

What You've Learned

By completing this workshop, you now understand:

What a backend is and why it's needed
How to set up a Node.js project from scratch
Environment variables and why they're important
How to install dependencies using npm
How to create a REST API with Express
How to integrate external APIs (like Groq)
How frontend and backend communicate (HTTP requests)
How to test APIs using browsers and tools

How This Maps to Real Production Backends

What you built is a simplified version of real-world backends, but the concepts are the same!

In production systems:

What You Built	Real Production
`index.js`	Main server file (same!)
`routes/`	API endpoints (same structure!)
`services/`	Business logic (same pattern!)
`.env`	Environment variables (same!)
Groq AI	Any external API (databases, payment systems, etc.)
`node_modules/`	Dependencies (same!)

The difference?

Production backends have more routes
They connect to databases (like MongoDB, PostgreSQL)
They have authentication (login systems)
They have error logging and monitoring
They run on cloud servers (AWS, Azure, Google Cloud)

But the foundation is exactly what you just built!

Next Steps

Want to level up? Try these challenges:

Add a new route — Create a /hello endpoint that returns "Hello, World!"
Add input validation — Check if the prompt is too short or too long
Add logging — Console.log every request that comes in
Add rate limiting — Prevent users from spamming requests
Connect to a database — Store all questions and answers in MongoDB

Need Help?

If you're stuck:

Read the error message carefully — It usually tells you what's wrong
Check your .env file — Most issues come from missing environment variables
Make sure you ran npm install — Dependencies must be installed
Ask your workshop instructor — That's what they're here for!

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
client		client
server		server
.env.example		.env.example
.gitignore		.gitignore
Readme.md		Readme.md
package.json		package.json

Uh oh!

Folders and files

Latest commit

History

Repository files navigation

OWASP Backend Workshop

What is This Project?

What Problem Does This Solve?

What Will You Build?

What Does "Backend" Mean?

Prerequisites

1. Node.js (Required)

2. VS Code (Recommended)

3. Git (Optional but Recommended)

How to Get This Project on Your Laptop

Option A: Clone Using Git (Recommended)

Option B: Download ZIP from GitHub

Understanding the Project Structure

Let's Explain Each File:

index.js — Your Main Server File

routes/ Folder

services/ Folder

.env — Environment Variables (Secret Keys)

package.json — Project Configuration

node_modules/ — Installed Packages

index.html — Simple Frontend

Environment Setup

What is .env?

How to Create Your .env File