🚀 Ready to Level Up?
Congratulations! You've built the foundation of your website and learned how to work effectively with AI for coding. Now it's time to add the features that will make your site truly functional and professional.
In this part, we'll cover:
- Setting up a database - Your website's memory bank
- Creating a user table - Managing user accounts
- Implementing authentication - Secure login and signup
- Adding password recovery - Using an email API for user support
Remember Our Approach
We'll continue using AI assistance throughout this process. The key is breaking down complex features into clear, manageable steps that AI can help us implement effectively.
📊 What is a Database?
Think of a database as a digital notebook that stores all your website's important information neatly organized into tables. Each table is like a spreadsheet with rows and columns.
Table
Like a sheet in Excel where you store related information (e.g., all your users).
Column
Like headings on your sheet (e.g., username, password, email).
Row
Each individual record under the columns (each user's data).
🧰 Setting Up PostgreSQL
PostgreSQL is a reliable and free database system that's perfect for our needs. It's what many professional websites use, and it integrates well with modern web applications.
How to Install PostgreSQL
Follow these easy steps:
Go to PostgreSQL Download and choose your operating system.
Download and follow the installation guide.
Set a password during installation (save this password somewhere secure!).
Install pgAdmin (an easy-to-use graphical tool that comes with PostgreSQL).
Open pgAdmin and create a new database called minibreaks_db (or whatever fits your project).
Important Note
Keep your database password safe! You'll need it to connect your website to the database. Consider using a password manager or writing it down securely.
🗃️ Creating a User Table
We'll use AI to help us easily create the table. Here's how to ask clearly for what we need:
Example Prompt (for non-engineers):
"Create SQL commands to set up a table named 'users'. Each user needs:
- An automatically assigned ID number
- A username that must be unique
- A password (encrypted)
- An email (optional)
- A timestamp to know when the user joined"
ChatGPT will give you clear, simple SQL commands you can run directly in pgAdmin.
Save these commands in your project as db/schema.sql with a simple note at the top:
-- user table for the website
CREATE TABLE users (
id SERIAL PRIMARY KEY,
username VARCHAR(50) UNIQUE NOT NULL,
password_hash VARCHAR(255) NOT NULL,
email VARCHAR(100),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);Pro Tip
Always store password hashes, never plain text passwords! AI will help you implement proper password hashing when we build the authentication logic.
🔑 Building Authentication Step-by-Step
To help AI generate accurate results, let's break down the authentication feature clearly into multiple prompts. This approach ensures we get focused, high-quality code for each piece.
Step 1: Sign-Up Page
Prompt Example:
"Create a simple sign-up webpage that asks users to create a username and password. Include an optional field for users to enter their email, but don't make this mandatory. Use modern styling and include proper form validation."
Step 2: Login Page
Prompt Example:
"Create a basic login page where users can enter their username and password to log in to their account. Include a 'Remember me' checkbox and a link to password recovery."
Step 3: Password Recovery Page (Without Email Sending)
Prompt Example:
"Create a page that lets users recover their password by entering their email. For now, just create the form and logic, but leave the email sending functionality as a placeholder that I can complete later."
Why Break It Down?
By splitting authentication into separate prompts, you get cleaner, more focused code. AI can concentrate on one task at a time, resulting in better quality and easier debugging.
🔐 Connecting Email Sending with an External API
We'll use the Brevo API to enable our website to send emails. Brevo (formerly Sendinblue) offers a reliable, free tier that's perfect for getting started.
Setting Up Brevo API
Visit Brevo API documentation.
Sign up for a free account and get an API key from your dashboard.
Keep your API key secure - you'll need it for the next step.
Using AI to Complete Email Integration
Now comes the magic moment! Prompt your AI coding assistant clearly in your code editor (e.g., GitHub Copilot, Cursor):
Email Integration Prompt:
"Complete the password recovery feature by using Brevo transactional email API (https://developers.brevo.com/docs/send-a-transactional-email). Send a password reset link to the user's email address when they request it."
Watch the AI assistant complete the magic! The AI agent should be able to fetch the web page and understand how to use the API.
Important Note
It's important to explicitly call out to use the API, otherwise AI may pull a different framework, which is usually a wrapper of the API. In my experience, AI pulled a deprecated library for email sending, and it didn't work. 😫
AI Magic in Action
This is where AI truly shines! It can read the API documentation, understand the required parameters, and generate the exact code you need to integrate email functionality. No need to manually parse through documentation or figure out the API calls yourself.
🛡️ Security Best Practices
When building authentication features, security should always be a priority. Here are the essential practices to implement:
Password Security
- Always hash passwords before storing them
- Never store passwords in plain text
- Enforce strong password requirements (but not crazy to annoy users)
API Key Security
- Store API keys in environment variables
- Never commit API keys to version control
- Use different keys for development and production
- Regularly rotate your API keys
User Input Validation
- Validate all user inputs on both client and server
- Sanitize data before database queries
- Use parameterized queries to prevent SQL injection
- Implement rate limiting for login attempts (we will discuss more in next part)
📓 Homework
Time to put everything into practice! Complete these tasks before moving to the next part:
Documentation Tip
Keep a simple text file or document where you record the prompts you used and what AI generated. This becomes invaluable when you need to make changes or debug issues later. It's like having a conversation history with your AI assistant!
🎯 What's Next
Congratulations! You've just added some seriously advanced functionality to your website. In Part 8, we'll prepare your creation for the real world by focusing on testing and deployment preparation.
We'll explore:
- Essential questions to ask before going live
- Key areas to test and validate
- What to pay attention to before deployment
- Different deployment environments and strategies
🚀 Coming up: We'll explore how to ensure your website is ready for real users, including performance considerations, security checks, and deployment best practices that will make your launch smooth and successful.