Build a Real Estate Website in 30 Minutes with PropertyWebBuilder

A practical, step-by-step tutorial showing you how to launch a professional property website from scratch

What You'll Build

By the end of this 30-minute tutorial, you'll have:

✅ A fully functional real estate website
✅ Admin dashboard for managing properties
✅ Multi-language support (English, Spanish, French)
✅ Responsive design that works on mobile
✅ Property search and filtering
✅ Contact forms and lead capture
✅ Professional theme (Brisbane, Bologna, or Bristol)
✅ Deployed to the web (free hosting)

No prior Rails experience required (but basic command line knowledge helps).

Prerequisites

Before starting, install:

Ruby 3.2+
bash ruby --version # Should be 3.2.0 or higher
Rails 8.0+
bash gem install rails rails --version # Should be 8.0.0 or higher
PostgreSQL (for production deployment)
```bash
# macOS
brew install postgresql@14

# Ubuntu/Debian
sudo apt-get install postgresql

# Windows
# Download from postgresql.org
```

Git
bash git --version

Optional but recommended:
- GitHub account (for deployment)
- Railway.app or Render.com account (free hosting)

Step 1: Create Your PropertyWebBuilder Site (5 minutes)

Option A: Using the Template

The fastest way to get started:

# Clone the PWB template
git clone https://github.com/etewiah/pwb-template my-real-estate-site
cd my-real-estate-site

# Install dependencies
bundle install

# Create database and load sample data
rails db:create db:migrate db:seed

# Start the server
rails server

Open http://localhost:3000 — you should see your site!

Option B: Starting from Scratch

If you want to build from a new Rails app:

# Create new Rails app
rails new my-real-estate-site --database=postgresql
cd my-real-estate-site

# Add PropertyWebBuilder to Gemfile
echo 'gem "property_web_builder"' >> Gemfile
bundle install

# Run PWB installer
rails generate pwb:install

# Setup database
rails db:create db:migrate db:seed

# Start server
rails server

Step 2: Explore Your New Site (5 minutes)

Frontend (Public Site)

Visit: http://localhost:3000

You'll see:
- Homepage with featured properties
- Search functionality (location, price, bedrooms)
- Property listings with photos and details
- Contact forms for enquiries
- Multi-language selector (top right)

Try:
1. Clicking on a property to see details
2. Switching languages
3. Using the search filters

Admin Dashboard

Visit: http://localhost:3000/admin

Default credentials:
- Email: admin@example.com
- Password: password123

You'll see:
- Properties management (add, edit, delete)
- Settings (site name, logo, contact info)
- Themes (switch between Brisbane, Bologna, Bristol)
- Languages (configure translations)
- Users (invite team members)

⚠️ Change the admin password immediately:
1. Go to "Settings" → "Users"
2. Click on admin@example.com
3. Update password

Step 3: Customize Your Site (10 minutes)

3.1 Update Site Settings

In the admin dashboard:

Settings → General

Site Name: "Prime Properties" (your agency name)
Tagline: "Find your dream home"
Email: your-email@example.com
Phone: +1 (555) 123-4567
Address: 123 Main St, Your City

Settings → Social Media

Facebook: https://facebook.com/yourpage
Instagram: https://instagram.com/youragency
Twitter: https://twitter.com/youragency

3.2 Choose a Theme

Settings → Theme

PWB includes three professional themes:

Brisbane — Modern, minimal, lots of whitespace
Bologna — Classic, professional, traditional estate agent look
Bristol — Bold, contemporary, image-focused

Select one and click "Save." Your site updates instantly.

3.3 Add Your First Property

Properties → New Property

Fill in:

Title: Stunning 3-Bedroom Family Home
Price: $450,000
Property Type: House
Bedrooms: 3
Bathrooms: 2
Plot Size: 0.25 acres
Description: 
"Beautiful family home in quiet neighborhood. 
Recently renovated kitchen, large backyard, 
close to schools and parks."

Address: 456 Oak Street, Your City

Upload photos:
- Drag and drop at least 3-5 property photos
- First photo becomes the featured image
- Rearrange by dragging

Set status:
- ☑️ Published (visible on site)
- ☐ Featured (shows on homepage)

Click "Create Property"

3.4 Configure Languages

Settings → Languages

Enable the languages you need:
- ☑️ English
- ☑️ Spanish
- ☐ French
- ☐ German
- ☐ Portuguese

Click "Save" — language selector appears on frontend.

To customize translations:

# Edit config/locales/en.yml (English)
# Edit config/locales/es.yml (Spanish)

Step 4: Add Sample Properties (5 minutes)

Let's add a few more properties to make the site look real.

Quick method — Use the seed task:

# Stop the server (Ctrl+C)
rails db:seed:properties
# This adds 10 sample properties with images

Manual method — Add via admin:

Repeat Step 3.3 for 2-3 more properties with different types:
- Apartment
- Commercial Property
- Land/Plot

Pro tip: Use free stock photos from:
- Unsplash.com
- Pexels.com
- Search "real estate interior"

Step 5: Deploy to Production (5 minutes)

Option A: Deploy to Railway (Recommended)

Railway.app offers free hosting with PostgreSQL included.

# Install Railway CLI
npm install -g @railway/cli

# Login
railway login

# Initialize project
railway init

# Add PostgreSQL
railway add postgresql

# Deploy
railway up

# Open in browser
railway open

Set production admin password:

railway run rails console
# In console:
User.first.update(password: 'your-secure-password')

Option B: Deploy to Render

Render.com also offers free tier hosting.

Go to render.com
Click "New +" → "Web Service"
Connect your GitHub repo
Configure:
Build Command: bundle install; rails db:migrate Start Command: rails server
Add PostgreSQL database (free tier)
Deploy

Option C: Deploy to Heroku

# Install Heroku CLI
brew install heroku

# Login
heroku login

# Create app
heroku create your-real-estate-site

# Add PostgreSQL
heroku addons:create heroku-postgresql:mini

# Deploy
git push heroku main

# Run migrations
heroku run rails db:migrate db:seed

# Open site
heroku open

What You've Achieved

In 30 minutes, you've:

✅ Installed PropertyWebBuilder
✅ Customized branding and settings
✅ Added multiple properties with photos
✅ Configured multi-language support
✅ Deployed to production hosting

Your site is now live on the internet.

Next Steps

Immediate Improvements

1. Custom Domain

# Railway
railway domain

# Heroku  
heroku domains:add www.yoursite.com

2. SSL Certificate

Both Railway and Render/Heroku provide free SSL automatically.

3. Email Configuration

# config/environments/production.rb
config.action_mailer.smtp_settings = {
  address: 'smtp.sendgrid.net',
  port: 587,
  domain: 'yoursite.com',
  user_name: ENV['SENDGRID_USERNAME'],
  password: ENV['SENDGRID_PASSWORD'],
  authentication: 'plain',
  enable_starttls_auto: true
}

Free email services:
- SendGrid (100 emails/day free)
- Mailgun (5,000 emails/month free)
- Postmark (100 emails/month free)

4. Google Analytics

<!-- Add to app/views/layouts/application.html.erb -->
<%= render 'shared/google_analytics' if Rails.env.production? %>

Create app/views/shared/_google_analytics.html.erb:

<!-- Google Analytics GA4 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

Customization Ideas

5. Custom Homepage

# Generate custom homepage
rails generate controller pages home

Edit app/views/pages/home.html.erb

# config/routes.rb
root to: 'pages#home'

6. Add Lead Capture Forms

PWB includes contact forms by default. To customize:

# app/controllers/inquiries_controller.rb
def create
  @inquiry = Inquiry.new(inquiry_params)
  if @inquiry.save
    InquiryMailer.new_inquiry(@inquiry).deliver_later
    redirect_to root_path, notice: 'Thank you for your inquiry!'
  end
end

7. Integrate with Property Portals

PWB supports XML feeds for:
- Rightmove (UK)
- Zoopla (UK)
- Immoweb (Belgium)
- Kyero (Spain)

# config/routes.rb
get '/feeds/rightmove', to: 'feeds#rightmove', format: :xml

8. Custom Themes

Create your own theme:

# app/assets/stylesheets/themes/my_custom_theme.scss
.theme-my-custom {
  --primary-color: #2563eb;
  --secondary-color: #7c3aed;
  // ... your styles
}

Troubleshooting

"Database doesn't exist"

rails db:create
rails db:migrate

"Couldn't find User with id=1"

rails db:seed  # Creates default admin user

Images not uploading

Check ActiveStorage is configured:

rails active_storage:install
rails db:migrate

Styles not loading

# Clear assets cache
rails assets:clobber
rails assets:precompile

Can't access admin panel

Default URL: http://localhost:3000/admin

Default credentials:
- Email: admin@example.com
- Password: password123

Reset password:

rails console
User.first.update(password: 'newpassword')

Going Further

Documentation

Official Docs: GitHub Wiki
API Reference: /docs/api
Component Guide: /docs/components

Community

GitHub Discussions: Ask questions, share sites
Discord: Join the PWB community (link in repo)
Twitter: @etewiah for updates

Advanced Features

Once comfortable, explore:

Multi-tenancy — Host multiple agency sites from one installation
Custom property types — Add boats, vehicles, etc.
Advanced search — Polygon drawing, saved searches
CRM integration — Salesforce, Pipedrive
Payment processing — Stripe for premium listings

Conclusion

You've just built a professional real estate website in 30 minutes.

What took agencies $5,000-$10,000 and weeks of development, you did in half an hour.

The site you built includes:
- Property management
- Search and filtering
- Multi-language support
- Responsive design
- Admin dashboard
- Contact forms
- Professional themes

Next challenge: Add your real properties, customize the design, and start getting leads.

Resources

PropertyWebBuilder GitHub: https://github.com/etewiah/property_web_builder
Demo Site: https://demo.propertywebbuilder.com
Video Tutorial: [YouTube Walkthrough] (coming soon)
Template Repo: https://github.com/etewiah/pwb-template

Built something cool with PropertyWebBuilder? Share it! Tag @etewiah on Twitter or submit to the PWB showcase.

Questions? Open a GitHub issue or discussion — the community is helpful and active.

Happy building! 🏡