Horizon Impact
Corporate Web Presence & Business Representation – Case Study
A professional web presence for Horizon Impact built with Next.js 15.1.3 and TypeScript. The website represents Horizon Impact's business as an impact investment fund manager focused on Southern Africa—showcasing who they are, their focus areas, and their approach—rather than handling investments or lifecycles internally. It serves as their public-facing representative and credibility front.
Project Overview
The Horizon Impact website is a corporate web presence that represents the business as an impact investment fund manager in Southern Africa. Built with Next.js 15.1.3, TypeScript, and Redux Toolkit, it presents the company, their focus on impact investing, and their role in the ecosystem—rather than running deal sourcing, due diligence, or portfolio operations on the site. Investment handling and lifecycle management are internal; the site is their public representative and information hub.
Key Features
Professional web presence showcasing Horizon Impact's business and focus
Secure Authentication
JWT-based authentication and role-based access for authorized areas of the web presence
Company & Focus Overview
Clear presentation of Horizon Impact's business, focus areas, and role in Southern Africa impact investment
Impact & ESG Messaging
Presentation of impact and ESG (Environmental, Social, Governance) focus as part of the company story
Contact & Engagement
Ways for visitors and stakeholders to reach out or engage with the company through the site
Professional Design & UX
Responsive, accessible design that reinforces credibility and supports clear information discovery
Database Architecture & ERD
Database design supporting the web application's content and features
The database architecture supports the web presence with clear relationships between entities and efficient querying. The ERD below illustrates the schema used by the application for its content, users, and related data.
Entity Relationship Diagram
Core Entities
Users, Funds, Investments, Companies, Impact Metrics
Relationships
Associations supporting the web application
Data Integrity
Prisma ORM with MongoDB optimization
System Architecture
Architecture for a scalable, professional web presence
The system architecture illustrates the application flow for the web presence: Next.js 15.1.3 frontend, API routes, authentication, database integration with Prisma ORM, and services that support the company's digital presence.
Architecture Diagram
Frontend Layer
Next.js 15.1.3, TypeScript, Redux Toolkit
Backend Layer
Next.js API, Prisma ORM, MongoDB
Security & Auth
NextAuth.js, Role-based Access Control
Project Statistics
Database Collections
API Endpoints
React Components
Key Sections
Frontend Architecture
Built with Next.js 15.1.3 App Router and TypeScript for type-safe development. The frontend leverages Redux Toolkit for complex state management, Framer Motion for animations, and Shadcn/ui components with Tailwind CSS for consistent, accessible design.
Backend Architecture
Robust backend architecture with Next.js API routes, Prisma ORM for database management, NextAuth.js for authentication, and MongoDB for flexible data storage. Zod provides runtime type validation for all data operations.
Database Architecture
Data model supporting the web application's content and features
Core Entities
- • Users & Roles
- • Content & Pages
- • Company Data
- • Application State
Content & Display
- • Site Content
- • Focus Areas
- • Messaging & Brand
- • Metadata
Application Logic
- • Auth & Sessions
- • API Data
- • Forms & Contact
- • Feature Flags
Supporting Data
- • ESG / Impact Messaging
- • Company Story
- • Regional Focus
- • Analytics (site use)