Building the AlAblam Legal Platform — A Full-Stack Engineering Deep Dive

Overview

When Abdulaziz Alablam Advocates & Legal Consultants approached me, they needed more than a website — they needed a complete digital transformation. The existing setup was a static brochure site with zero operational capability. The goal was to build a premium, multi-lingual, full-stack platform that would handle real client inquiries, showcase the firm's expertise, and provide an admin-controlled content management system.

This article walks through the technical decisions, architecture, and challenges I encountered building alablam.org.

---

The Requirements

Before writing a single line of code, I spent time understanding the business:

• Public-facing site: Bilingual (Arabic & English), RTL-aware, premium legal branding.
• Inquiry system: Clients submit case inquiries → routed to the right legal team.
• Admin dashboard: Non-technical staff can manage content, view inquiries, and update team profiles.
• Security: A legal firm handles sensitive client data — security was non-negotiable.
• Performance: Sub-2-second load times, Lighthouse score ≥ 90.

---

Tech Stack Decision

// Frontend
const frontend = {
  framework: "React + Vite",
  language: "TypeScript",
  styling: "Tailwind CSS v4",
  animation: "Framer Motion",
};

// Backend
const backend = {
  runtime: "Node.js",
  framework: "Express.js",
  auth: "JWT + bcrypt",
  database: "MySQL (Supabase)",
  monitoring: "Sentry",
};

I chose Vite over Next.js for the frontend here because the site didn't require SSR — all dynamic data was fetched via API. This kept the build blazing fast.

---

Architecture

The system follows a clean separation:

client/          → React SPA (Vite)
server/          → Express REST API
  ├── routes/    → /auth, /inquiries, /content, /admin
  ├── middleware/ → authMiddleware, rateLimiter, helmet
  └── db/        → MySQL connection pool, migrations

API Security Layers

Security was implemented at multiple levels:

1. Rate Limiting — express-rate-limit on all public endpoints (10 req/min on inquiry submission).
2. Helmet — HTTP security headers out of the box.
3. Input Validation — zod schema validation on every request body.
4. JWT Rotation — Short-lived access tokens (15 min) + refresh token rotation.
5. Sentry — Error monitoring with PII scrubbing enabled.

---

The Inquiry System

The most complex part was building the case inquiry flow:

// server/routes/inquiries.ts
router.post("/submit", rateLimiter, validateBody(inquirySchema), async (req, res) => {
  const { name, email, phone, caseType, description } = req.body;

  // 1. Store in DB
  const inquiry = await db.inquiry.create({ data: req.body });

  // 2. Send notification email to legal team
  await sendEmail({
    to: process.env.LEGAL_TEAM_EMAIL,
    subject: `New ${caseType} Inquiry — ${inquiry.id}`,
    template: "new-inquiry",
    data: { name, caseType, inquiry },
  });

  // 3. Send confirmation to client
  await sendEmail({
    to: email,
    subject: "We received your inquiry",
    template: "inquiry-confirmation",
    data: { name },
  });

  res.json({ success: true, inquiryId: inquiry.id });
});

This pattern — store → notify team → confirm to client — handled everything reliably.

---

Results

After 4 months of development and 2 weeks of testing:

Metric	Result
Lighthouse Performance	92 / 100
Load Time (3G)	< 2.1 seconds
Monthly Inquiries Managed	100+
Uptime	99.9%
Security Headers	A+ (securityheaders.com)

---

Lessons Learned

1. Start with the data model. Every bug I encountered in the admin dashboard came from an underspecified schema. Get that right first.

2. Email reliability is hard. I went through three email providers before settling on one that delivered consistently without hitting spam filters.

3. Bilingual UX is more than RTL. Arabic users don't just need text mirrored — they expect different visual hierarchy, font weights, and content density. Involve a native speaker in design reviews.

4. Rate limit aggressively. A legal firm's contact form is a prime target for scraping and spam. Ship rate limiting from day one.

---

Final Thoughts

This project reinforced something I believe deeply: the best engineering work is invisible to the end user. The client didn't care about JWT rotation or schema validation — they cared that the platform worked, felt premium, and helped them serve their clients better.

That's the real goal.

→ View the live site
→ GitHub Repository