Atote Labs
Marketing and editorial website for Atote Labs, a Nairobi-based startup studio. Covers the studio's identity, its portfolio of ventures, insights and articles, and a contact system. Built with React 19, Vite, Tailwind CSS v4, and a Node.js/Express backend with PostgreSQL.
- Client
- Atote Labs
React 19 · React Router · Tailwind CSS v4 · Vite · Express.js · PostgreSQL · Prisma
01 Product overview
What the product does
Atote Labs is a startup studio based in Nairobi that builds software products from concept to launch. The website communicates the studio's identity, introduces its ventures, publishes editorial content, and handles inbound inquiries. The platform has a React frontend backed by an Express API and PostgreSQL.
02 Problem and context
What it needed to solve
The studio needed a credible public identity that could introduce its ventures and grow with its portfolio. The content model also needed room for articles, insights, and inbound inquiries without forcing each new entry into a fixed page.
03 My contribution
What I worked on
- Designed and built the complete frontend in React 19 with React Router and Tailwind CSS v4
- Built the Express backend with PostgreSQL and Prisma ORM for article and inquiry management
- Implemented light and dark theme toggle with system preference detection
- Structured the Ventures section to scale as new portfolio companies are added
- Deployed the frontend to Cloudflare Pages and the backend to a managed Node.js environment
05 Engineering and outcomes
Implementation details
System
- React 19 frontend with React Router for five-page navigation: Home, About, Ventures, Insights, Contact
- Express.js API backend with PostgreSQL and Prisma ORM for content and inquiry persistence
- ThemeContext for global light and dark mode with system preference detection
- Tailwind CSS v4 with custom theme tokens for the studio's brand palette
- VentureCard component system for scalable portfolio showcase
- ArticleDetail page with structured content rendering for editorial insights
Verified results
- Studio Identity PlatformFive-page site covering the brand, ventures, editorial content, and contact.
- Scalable Venture ShowcaseComponent-driven portfolio section designed to grow as the studio's pipeline of products and companies expands.
- Theme SystemFull light and dark mode with system preference detection and smooth transitions throughout.
Lessons
- A studio website needs a clear hierarchy because dense information quickly obscures the ventures it is meant to explain.
- Editorial sections need a clear content model early because changing the schema later affects routes, editing workflows, and existing entries.