IfeCodes

Hi, my name is

Full-Stack & Mobile Developer

Iaskedhowwebsiteswork.NowIbuildthem.

View My Work Download Resume

01.

About Me

I'm Ife, a full-stack developer who started with a simple question: "How do websites actually work?" That curiosity turned into a passion for building things that live on the internet - and beyond.

I work across the stack with React Native (Expo) for mobile, Next.js and React for web, and Node.js for backend services. Recently, I've been diving deep into DevOps - writing CI/CD pipelines.

I'm currently participating in the HNG Internship i14, where I'm sharpening my craft by building production-grade applications under real-world constraints. Every project is a chance to learn something new and push the boundaries of what I can create.

Full-Stack

Frontend to backend, I build complete solutions

Mobile

Cross-platform apps with React Native & Expo

DevOps

CI/CD - automating deployments and infrastructure management

HNG i14

Currently leveling up in the HNG Internship

02.

Skills & Tech

Frontend

HTML/CSS

TailwindCSS

TypeScript

React

Next.js

Vue.js

Svelte

Mobile

React Native

Expo

NativeWind

Backend

Node.js

Express.js

Next.js

PostgreSQL

MongoDB

Prisma

Supabase

DevOps

CI/CD

03.

Projects

Preview of Svelte Fe Portfolio

Featured

Frontend

Svelte Fe Portfolio

This project is a personal portfolio website designed to showcase a developer's skills, experience, and projects through a highly interactive and visually engaging interface. It features dynamic content, sophisticated animations, and a responsive design that adapts seamlessly across various devices. Leveraging SvelteKit with TypeScript, Tailwind CSS, and GSAP, the application demonstrates robust frontend engineering, focusing on performance and an exceptional user experience. The architecture includes server-side data loading and a comprehensive theming system, highlighting advanced capabilities in modern web development.

SvelteKitSvelteTypeScriptTailwind CSSGSAP +8

Preview of Data Visualization Platform (Hng Stage 5a I14)

Featured

Frontend

Data Visualization Platform (Hng Stage 5a I14)

This project is a high-performance, production-grade real-time analytics dashboard designed to visualize live-streaming system metrics. It provides interactive displays for CPU, memory, and network utilization, alongside a dynamic activity feed, all updated in real-time through a simulated data stream. Built with Vue 3, TypeScript, Vite, ECharts, and Tailwind CSS, the platform showcases efficient client-side data stream management and robust data visualization. Its architecture emphasizes modularity, performance optimizations like data point capping and interval cleanup, and a responsive design. This project demonstrates strong skills in modern frontend development, real-time data handling, and building scalable, performant user interfaces.

VueTypeScriptViteEChartsVue-ECharts +3

Preview of Whisperbox E2e (Hng Stage 4 I14)

Featured

Full Stack

Whisperbox E2e (Hng Stage 4 I14)

WhisperBox is a secure, end-to-end encrypted (E2EE) messaging application built with Next.js, React, and TypeScript. It provides real-time chat, presence awareness, and robust client-side key management. The application leverages the Web Crypto API for hybrid encryption (RSA-OAEP + AES-GCM) and IndexedDB for secure key storage. Its architecture showcases a deep understanding of cryptographic principles, secure data handling, and real-time communication patterns. This project demonstrates strong full-stack development capabilities, security engineering, and complex state management.

Next.jsReactTypeScriptTailwind CSSWeb Crypto API +5

Featured

Dev Tool

Ai Summarizer (Hng Stage 4 I14)

This project is an AI Page Summarizer, a Chrome Extension built on Manifest V3 that streamlines content consumption. It intelligently extracts readable content from any webpage, securely sends it to the Groq AI API, and delivers a concise, structured summary directly within the extension's popup. Leveraging TypeScript, Webpack, and the Chrome Extension API, the architecture features robust inter-script communication, secure background service worker API calls, and local caching. This project effectively demonstrates advanced browser extension development, secure AI integration, and a keen understanding of multi-context application design.

TypeScriptWebpackHTMLCSSChrome Extension API +2

Preview of Habit Tracker PWA (Hng Stage 3 I14)

Featured

Frontend

Habit Tracker PWA (Hng Stage 3 I14)

This project is a robust Progressive Web Application (PWA) for habit tracking, built with Next.js, React, and TypeScript. Users can securely register, log in, manage their habits with full CRUD operations, and track completion streaks, all while enjoying offline functionality. The architecture prioritizes client-side performance and reliability through a Service Worker and `localStorage` persistence, complemented by a comprehensive testing strategy. This demonstrates strong command over modern web development, PWA principles, and quality assurance practices.

Next.jsReactTypeScriptTailwind CSSVitest +5

Preview of Invoice Management App (Hng Stage 2 I14)

Featured

Frontend

Invoice Management App (Hng Stage 2 I14)

This project is a sophisticated Invoice Management Application, meticulously engineered to provide comprehensive CRUD operations for invoices, including dynamic status tracking and robust form validation. Built with React, TypeScript, Vite, and Tailwind CSS, it leverages the React Context API for efficient global state management. The application features a robust component-based architecture, dynamic CSS variable-based theming for light/dark mode, and a strong emphasis on accessibility and responsiveness. This demonstrates strong ability in building highly interactive, maintainable, and user-centric single-page applications with attention to modern frontend best practices.

ReactTypeScriptViteTailwind CSSReact Router DOM +3

Preview of Hng Stage8 Be Wallet Service With Paystack JWT API Keys

Featured

Full Stack

Hng Stage8 Be Wallet Service With Paystack JWT API Keys

This project delivers a production-ready backend wallet service designed to manage user funds and transactions securely. It allows users to deposit money via Paystack, transfer funds between wallets, and track their financial history, all secured by a robust authentication system. Built with Next.js API Routes, TypeScript, MongoDB, Google OAuth, and JWT, the service features dual authentication (JWT for users, permission-based API keys for service integration), atomic transactions, and secure webhook handling for payment processing. This showcases strong capabilities in designing secure, scalable financial APIs, managing complex external integrations, and implementing critical data integrity measures.

Next.jsTypeScriptNode.jsMongoDBMongoose +5

Preview of Gitview

Featured

Frontend

Gitview

GitView is a modern GitHub user and repository explorer application, enabling users to efficiently search for any GitHub username and explore their profiles, repositories, and follower data. Built with React, Vite, and Tailwind CSS, it leverages TanStack Query for robust data fetching, caching, and background synchronization. The application features an optimized client-side architecture with smart caching, debounced API calls, and pagination for enhanced performance and reduced API burden, including graceful handling of GitHub API rate limits. This project demonstrates strong frontend engineering principles, including modular component design, advanced data state management, and effective API integration for a smooth and responsive user experience.

ReactViteTailwind CSSTanStack QueryAxios +3

Preview of Lacurve

Featured

Frontend

Lacurve

This project is the frontend for 'lacurve,' a comprehensive web platform designed to connect buyers with vendors for product transactions. It features robust user authentication, distinct dashboards for buyers and sellers, and core e-commerce functionalities like product listing, shopping cart management, and order processing. Built with React and Redux Toolkit, the application showcases sophisticated global state management, including state persistence, and implements advanced client-side routing with role-based access control. The project demonstrates strong engineering decisions in its component architecture, API integration, and structured form validation, making it a solid foundation for a multi-user e-commerce platform.

ReactRedux ToolkitRedux PersistReact Router DOMAxios +6

Featured

Dev Tool

Components

This project presents a robust and reusable React component library, meticulously engineered to provide a consistent, accessible, and customizable foundation for building modern user interfaces. It offers a collection of essential UI elements like versatile buttons, flexible inputs, and adaptable text areas, all designed for seamless integration into larger applications. Developed using React, TypeScript, and Tailwind CSS, the library prioritizes type safety, maintainability, and efficient styling. Key architectural decisions include polymorphic component design with `asChild`, extensive use of `React.forwardRef` for extensibility, and `React.useId` for enhanced accessibility. This project effectively demonstrates strong frontend architecture, adherence to accessibility standards, and the implementation of advanced React patterns for robust and scalable UI development.

ReactTypeScriptTailwind CSSCSSreact-icons

Preview of Hng Stage2 Fe Multi Framework Ticket App

Featured

Full Stack

Hng Stage2 Fe Multi Framework Ticket App

This multi-framework web application provides a comprehensive ticket booking and management system, enabling users to view events, book tickets, and manage their reservations through a responsive interface. It features identical functionality and user experience delivered across distinct React, Vue.js, and PHP/Twig implementations. The project demonstrates advanced proficiency in adapting core business logic and UI design across diverse frontend architectures, including Single Page Applications and server-side rendering. This showcases robust engineering skills in component design, routing, state management, and ensuring cross-platform consistency.

ReactVue.jsPHPTwigTypeScript +10

Preview of Backend Template

Featured

Dev Tool

Backend Template

This project is a powerful CLI tool designed to rapidly scaffold production-ready Node.js backend applications using Express.js. It enables developers to generate highly configurable projects, choosing between monolith or microservice architectures, and integrates optional features such as JWT authentication with MongoDB, CORS, Helmet, and rate limiting. Leveraging Node.js, Express.js, TypeScript/JavaScript, and deployment targets like Docker or PM2, the tool simplifies complex backend setups through dynamic code generation and an interactive command-line wizard. This demonstrates strong expertise in system architecture, developer tooling, and building maintainable, scalable backend solutions.

Node.jsTypeScriptJavaScriptExpress.jsMongoDB +18

Preview of Onboarding Widget Manager

Featured

Full Stack

Onboarding Widget Manager

This project is a comprehensive Onboarding Widget Manager, providing an intuitive dashboard for creating and managing guided user tours across websites. It features a lightweight, embeddable JavaScript widget that delivers interactive multi-step tours, complemented by robust analytics tracking for user engagement. Built with Next.js, React, TypeScript, Vite, and Firebase, the system employs a monorepo architecture to cleanly separate the dashboard from the performant widget. The project highlights strong engineering in developing a scalable full-stack solution, from client-side interactivity to backend data management and external API integration.

Next.jsReactTypeScriptViteFirebase +8

Preview of QuizNova AI

Featured

Full Stack

QuizNova AI

QuizNova AI is a modern, full-stack quiz application leveraging Google's Generative AI to create dynamic, personalized learning experiences. It enables users to upload documents (PDF/DOCX) or input topics to generate AI-powered quizzes with varied difficulty levels and detailed explanations. Built with Next.js, MongoDB, and NextAuth.js, the project features a comprehensive authentication system, persistent progress tracking, and Progressive Web App capabilities for offline access. This demonstrates strong engineering in AI integration, secure full-stack development, and robust data management for a scalable educational platform.

Next.jsReactTypeScriptTailwind CSSMongoDB +13

Frontend

Profile Card (Hng Stage 1b I14)

This project is an accessible and responsive profile card, designed to display key user information. I built it using my favorite animated character(Avatar Aang). It features a dynamically updating timestamp alongside static data like avatar, name, bio, and social links. Built with vanilla HTML5, CSS3, and JavaScript, the application emphasizes fundamental frontend best practices. Key engineering decisions include a semantic HTML structure, robust responsive design using CSS Grid and Flexbox, and extensive `data-testid` attributes for enhanced testability. This project demonstrates strong proficiency in crafting high-quality, performant, and user-friendly web interfaces.

HTML5CSS3JavaScriptCSS GridFlexbox

Preview of Todo Card Vanilla (Hng Stage 1a I14)

Frontend

Todo Card Vanilla (Hng Stage 1a I14)

This project implements a sophisticated, interactive 'Todo Card' UI component entirely with vanilla HTML, CSS, and JavaScript. It is an extension of the stage 0 task, just not with ReactJS. It provides robust functionalities including inline editing, dynamic status and priority management, real-time due date tracking with overdue alerts, and a collapsible description. Leveraging meticulous state management and direct DOM manipulation, the component demonstrates advanced front-end engineering without relying on external frameworks. The comprehensive attention to responsive design and web accessibility makes this a strong example of fundamental web development skills.

HTML5CSS3JavaScript

Preview of Todo Card (Hng Stage 0 I14)

Frontend

Todo Card (Hng Stage 0 I14)

This project delivers a highly testable, accessible, and responsive Todo Item Card component, developed as part of the HNG Frontend Stage 0 task. It showcases core functionality for displaying task details, managing completion status, calculating time remaining, and providing interactive actions, all within a robust and adaptable UI. Built with React, TypeScript, Vite, and Tailwind CSS, the project emphasizes strict adherence to accessibility standards, semantic HTML, and a component-based architecture. This demonstrates strong attention to detail in frontend engineering, compliance with specific requirements, and the ability to build high-quality, maintainable UI components.

ReactTypeScriptViteTailwind CSSESLint +1

Frontend

Hng Stage0 Fe Profile Card

This project delivers a responsive, multi-page personal profile website, showcasing a developer's information, social links, and a functional contact form. It dynamically updates the current time in milliseconds on the main profile page and implements client-side validation for the contact form. Built with HTML5, CSS3 (Flexbox & Grid), and Vanilla JavaScript, the application emphasizes semantic structure and accessibility. The thoughtful use of `data-testid` attributes enhances testability, demonstrating a strong foundation in core web technologies and modern front-end development practices.

HTML5CSS3JavaScript

Frontend

Image Preview

This project delivers a modern React component for instantly previewing image files with a visually engaging dual-layer display. It leverages `URL.createObjectURL` for efficient client-side previews, presenting the selected image sharp in the foreground against a blurred, semi-transparent background version for rich visual context. Built with TypeScript and Next.js's optimized `Image` component, it ensures type safety, performance, and responsive design. This project showcases strong front-end component architecture, effective resource management, and sophisticated UI styling.

ReactTypeScriptNext.jsTailwind CSS

Preview of STT Speech To Text

Frontend

STT Speech To Text

This project presents a client-side web application that leverages the Web Speech API to provide both real-time speech-to-text transcription and text-to-speech synthesis capabilities. It allows users to convert spoken words into text, select from multiple languages, and have the transcribed text read aloud using various voices. The application showcases advanced browser API integration, dynamic UI updates, and features like text download, making it a robust example of modern web development.

HTML5CSS3JavaScriptWeb Speech API (SpeechRecognition)Web Speech API (SpeechSynthesis) +4

04.

Terminal

ifecodes@portfolio ~

Welcome to IfeCodes Terminal v1.0.0

Type "help" to see available commands.

05.

Get In Touch

Have a project in mind, a question, or just want to say hi? My inbox is always open. I'll do my best to get back to you!