TO

TechOhns

Building Tomorrow's Digital Solutions

The official web platform and integrated CMS for TechOhns — a full-stack software development agency based in Zambia.

🌟 Overview

TechOhns is a premium, high-performance web platform built to showcase the agency's portfolio, services, and technical expertise. It features a completely custom, responsive design system and a fully integrated Admin CMS to manage the entire platform without touching the codebase.

✨ Key Features

• Public Showcase: Beautiful, animated landing pages (Home, About, Services, Portfolio, Blog).
• Integrated Admin CMS: Secure dashboard to manage projects, blog posts, services, and team members.
• Lead Generation: Integrated contact form wired directly to the Supabase database.
• Dynamic Content: Server-side rendered (SSR) dynamic routes for individual projects and blog posts.
• Premium UI: Powered by Tailwind CSS and Framer Motion for smooth micro-interactions.
• Secure Authentication: Supabase SSR Auth protecting the admin routes.

---

🛠️ Technology Stack

Category	Technology	Description
Framework	Next.js (App Router)	React framework for server-side rendering and routing
Language	TypeScript	Strongly typed JavaScript
Styling	Tailwind CSS	Utility-first CSS framework
Animations	Framer Motion	Production-ready animation library
Database & Auth	Supabase	PostgreSQL backend, Auth, and Storage
Icons	Lucide React	Beautiful and consistent icon toolkit

---

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• A Supabase account and project

1. Clone the repository

git clone https://github.com/TheOhns/techohnsweb.git
cd techohnsweb

2. Install dependencies

npm install

3. Setup Environment Variables

Create a .env.local file in the root directory and add your Supabase credentials:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

4. Setup Database

Run the provided SQL migration file in your Supabase SQL Editor to generate the necessary tables:

• supabase/migration.sql

5. Run the Development Server

npm run dev

The platform will be available at http://localhost:3000.

---

📂 Project Structure

techohns/
├── src/
│   ├── app/
│   │   ├── (public)/          # Public-facing website routes
│   │   ├── (admin)/           # Protected CMS dashboard routes
│   │   ├── layout.tsx         # Root layout & font definitions
│   │   └── globals.css        # Global styles & CSS variables
│   ├── components/
│   │   ├── admin/             # Dashboard specific components
│   │   ├── sections/          # Large page sections (Hero, etc)
│   │   ├── shared/            # Reusable UI (Nav, Footer)
│   │   └── ui/                # Base UI elements
│   ├── lib/                   # Utility functions, constants, validation
│   ├── stores/                # Zustand state management
│   └── types/                 # Global TypeScript definitions
├── supabase/
│   └── migration.sql          # Database schema definitions

---

🔒 Admin Access

To access the admin dashboard:

1. Navigate to /admin/login
2. Authenticate using an account created via your Supabase Auth dashboard.
3. Once authenticated, you will be securely redirected to /admin to manage the platform's content.

---

Built with passion by Samuel Wakumelo & Pumulo Mubiana

© 2026 TechOhns. All rights reserved.