Mohammed's Tech & Finance Blog
Building My First Business Website: Real Lessons from Code, Hosting, and Deployment

Building My First Business Website: Real Lessons from Code, Hosting, and Deployment

Building My First Business Website: Real Lessons from Code, Hosting, and Deployment

When I first set out to build a business website from scratch, I thought the main challenge would be writing good code.

But the reality was broader — building a real-world project meant stepping into decisions about hosting, deployment pipelines, domains, theming, branding, multilingual support, SEO, and user experience.

In this post, I want to share what it was really like — not just the code, but the full-stack thinking that a business website demands.

🛠️ Project Overview

The website I built was for a trading and sourcing company offering services like:

  • Agency and brokerage representation
  • Product sourcing (food, electronics, furniture, and more)
  • Shipping and customs facilitation
  • Product inspection and reporting

It needed to:

  • Be multilingual (English and Arabic)
  • Showcase products and services clearly
  • Allow easy inquiries via contact forms
  • Build trust through a clean, professional design
  • Support light/dark mode cleanly

The stack and infrastructure choices:

  • Frontend: Next.js (with App Router and TypeScript)
  • Styling: Tailwind CSS (with custom theming)
  • Internationalization (i18n): next-i18next
  • Hosting: Vercel
  • Domain Provider: Hostinger
  • Deployment CI/CD: GitHub → Vercel automatic deploys

🎨 Design Simplicity: Choosing Function over Flash

I made a deliberate decision early on:

  • Prioritise clarity and speed over heavy animations or flashy design.
  • Keep layouts minimalistic, letting content and service offerings be the focus.
  • Ensure responsive design for mobile and desktop.

The mission was to build trust through usability, not distract with visual noise.

🌍 Handling Multilingual Requirements (English + Arabic)

Adding Arabic support introduced real complexity:

  • Dynamic Right-to-Left (RTL) layouts.
  • Language-aware routing using Next.js App Router.
  • Adjusted spacing, alignment, and reading order conditionally.

Challenge:
Preserving visual and functional consistency across two completely different reading directions.

Solution:

  • Used logical dir="rtl" and conditional class switching based on locale.
  • Ensured text expansion/shrinkage between languages didn’t break layouts.

It pushed me to think about accessibility and cultural UX — not just translation.

🛠️ CI/CD: Building an Easy Deployment Pipeline

Challenge:
I needed a deployment flow that wouldn't slow me down or introduce human error.

Solution:

  • Connected GitHub to Vercel.
  • Set up automatic deploys triggered by pushes to the main branch.
  • Used Vercel preview URLs for branch deployments to test changes safely.
  • Managed environment variables like API URLs and domain names in Vercel settings.

CI/CD made updating the project frictionless and professional.

🌐 Hosting and Domain Choices

Hosting (Vercel):

  • Seamless for Next.js projects.
  • Free for small business scale.
  • Automatic SSL and CDN integration.

Domain (Hostinger):

  • Managed DNS settings to point domain to Vercel servers.
  • Faced some DNS propagation delays — took about 6 hours to fully resolve worldwide.

Lesson:
Always plan some buffer time when switching DNS or setting up new domains.

🌗 Light/Dark Theme Logic and Challenges

Supporting light and dark modes wasn't just a "toggle button" problem:

  • Needed full dynamic styling that looked polished in both themes.
  • Some components (like tables, card shadows, borders) had to adapt color intelligently.
  • Made sure background gradients, text contrasts, and button styles shifted properly.

Implementation Details:

  • Used Tailwind’s built-in dark: variant system.
  • Toggled themes via class="dark" on <html>, using next-themes library for easier control.
  • Stored user theme preferences in localStorage for persistence across sessions.

Challenge:
Testing in RTL languages and dark mode simultaneously exposed edge cases (like flipped gradients and icon misalignments).

🎨 Branding and Theming with Tailwind

Instead of hardcoding colors, I wanted dynamic, easy-to-update branding.

Steps I Took:

  • Extended Tailwind’s theme in tailwind.config.ts with custom colors for primary, secondary, accent, etc.
  • Built color palettes around warm neutrals and deep blues to create trust and calmness.
  • Used semantic classes (e.g., bg-primary, text-accent) rather than hardcoding text-blue-500 everywhere.

Benefits:

  • If the brand colors ever change, I only need to update Tailwind config — not hundreds of classes across the site.
  • Keeps the design consistent, flexible, and scalable.

🧹 Polish: Why the Last 10% Matters

After launch, I focused heavily on polish:

  • Added SEO meta tags and OpenGraph tags.
  • Built a custom 404 page for missing routes.
  • Enhanced form validation for better UX.
  • Compressed images and lazy-loaded assets for performance gains.

These small touches aren't always obvious — but they build professionalism and improve real user experience.

🚀 Final Reflection

Building my first real-world business website taught me more than any course or tutorial could.

It wasn’t just about coding pages — it was about building a real system:

  • Thinking about infrastructure and deployment.
  • Thinking about users from different cultures and device types.
  • Thinking about branding, polish, and future-proofing.

This project made me fall in love with the intersection of business and technology — where smart systems meet real human needs.

And this is just the beginning.

This is the end product https://www.gcmcltdco.com/en. Let me know what you think.