MekaCash Ltd - Portfolio Website

A modern, responsive portfolio website for MekaCash Ltd, an IT solutions company focused on empowering businesses and individuals across Africa through innovative technology services.

Summary

MekaCash Ltd is an IT services company dedicated to bridging the digital divide in Africa. The company provides comprehensive technology solutions including web and app development, IT consulting, data analytics, managed services, SaaS development, and digital transformation services. This portfolio website showcases the company's services, mission, vision, and provides a platform for client engagement.

Live Website: https://mekacash.live

Description

This is a modern single-page application (SPA) built with React and TypeScript that serves as the corporate portfolio website for MekaCash Ltd. The website features:

• Hero Section: Dynamic carousel with animated text showcasing company values and services
• Services Overview: Detailed presentation of six core service offerings
• Company Information: Mission, vision, and corporate philosophy
• Contact Form: Interactive contact form for client inquiries
• Refund Policy: Comprehensive refund policy page
• Responsive Design: Fully responsive layout optimized for all devices
• Interactive Animations: Scroll-triggered animations and smooth transitions

The platform emphasizes the company's commitment to understanding local African markets and providing tailored IT solutions that address unique regional challenges.

Features

• 🎨 Modern UI/UX: Clean, professional design with gradient accents and smooth animations
• 📱 Fully Responsive: Optimized for desktop, tablet, and mobile devices
• 🎭 Interactive Elements:
  • Animated carousel with autoplay
  • Typed text animations
  • Scroll-triggered animations
  • Smooth scroll navigation
• 📧 Contact Form: Integrated contact form with validation
• 🗺️ Location Integration: Embedded Google Maps showing company location
• 🚀 Fast Performance: Built with Vite for optimal build times and performance
• ♿ Accessible: Built with accessibility best practices using Radix UI components

Technologies Used

This project is built with modern web technologies:

• Frontend Framework: React 18.3.1
• Language: TypeScript 5.5.3
• Build Tool: Vite 5.4.1
• Routing: React Router DOM 6.26.2
• Styling:
  • Tailwind CSS 3.4.11
  • Tailwind CSS Animate
  • PostCSS
• UI Components:
  • shadcn-ui (Radix UI primitives)
  • Lucide React (Icons)
• State Management:
  • TanStack React Query 5.56.2
  • React Hook Form 7.53.0
• Form Validation: Zod 3.23.8
• Animations:
  • Typed.js 2.1.0 (Text typing animations)
  • Embla Carousel 8.3.0 (Carousel component)
• Code Quality: ESLint 9.9.0

Project Structure

mekacash/
├── public/                 # Static assets
│   ├── images/            # Image assets
│   └── favicon.ico
├── src/
│   ├── components/        # React components
│   │   ├── ui/           # shadcn-ui components
│   │   ├── Layout.tsx    # Main layout wrapper
│   │   ├── Navbar.tsx    # Navigation bar
│   │   ├── Footer.tsx    # Footer component
│   │   └── TypedText.tsx # Text animation component
│   ├── pages/            # Page components
│   │   ├── Home.tsx      # Home/landing page
│   │   ├── RefundPolicy.tsx
│   │   └── NotFound.tsx
│   ├── hooks/            # Custom React hooks
│   ├── lib/              # Utility functions
│   ├── App.tsx           # Main app component
│   └── main.tsx          # Application entry point
├── package.json
├── vite.config.ts        # Vite configuration
├── tailwind.config.ts    # Tailwind CSS configuration
└── tsconfig.json         # TypeScript configuration

Installation

Prerequisites

• Node.js (v16 or higher recommended)
• npm or yarn package manager

Setup Instructions

1. Clone the repository

   git clone git@github.com:ying0121/mekacash.git
   cd mekacash

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open your browser Navigate to http://localhost:5173 (or the port shown in your terminal)

Available Scripts

• npm run dev - Start the development server with hot module replacement
• npm run build - Build the production-ready application
• npm run build:dev - Build for development environment
• npm run preview - Preview the production build locally
• npm run lint - Run ESLint to check code quality

Building for Production

To create an optimized production build:

npm run build

The built files will be in the dist/ directory, ready for deployment to any static hosting service.

Deployment

The project can be deployed to various platforms:

• Vercel: Connect your GitHub repository for automatic deployments
• Netlify: Deploy via Git or drag-and-drop the dist folder
• GitHub Pages: Use GitHub Actions to build and deploy
• Traditional Hosting: Upload the dist folder contents to your web server

Company Information

MekaCash Ltd

• Location: HSE NO 7 ROYAL SUITES, UTAWALA NAIROBI, KENYA
• Postal Address: 7052-00300 Nairobi, Kenya
• Phone: +254 074 865 1734
• Email: info@mekacash.live
• Business Hours: Monday – Friday, 8:00 AM to 5:00 PM EAT

Services Offered

1. Websites & App Development - Bespoke digital experiences
2. IT Consulting - Infrastructure optimization and security
3. Data & Business Intelligence - Data analytics and insights
4. Managed Services - 24/7 IT infrastructure management
5. SaaS Development - Cloud-based software solutions
6. Digital Transformation - Legacy system modernization

Contributing

This is a private project for MekaCash Ltd. For questions or inquiries, please contact info@mekacash.live.

License

This project is proprietary and confidential to MekaCash Ltd.

Support

For technical support or inquiries:

• Email: info@mekacash.live
• Phone: +254 074 865 1734

---

Built with ❤️ by the MekaCash Ltd team