Frankiefab's side projects RSS feed https://frankiefab.com https://frankiefab.com/projects/telemarche Building an online store for shopping tech gadgets and electronics (WIP). Sat, 14 Mar 2026 06:18:16 GMT Telemarche is an e-commerce store designed for shopping a wide range of tech gadgets and consumer electronics, including smartphones, laptops, gaming consoles, headphones, mobile accessories, and smart home devices. With a mobile-first approach, it offers a seamless and engaging shopping experience accessible via smartphones and tablets, enabling customers to quickly browse product categories, apply various filters such as price range, brand, discount percent, rating, and specifications, and securely make purchases using their debit card or via USDT stablecoins. It features options that allow global international shoppers to view prices in their local currency and in their preferred language.  ## TECHNOLOGIES - **Frontend:** Next.js, TypeScript, Tailwind CSS, Shadcn UI - **Backend & Database:** Neon DB (PostgreSQL), Drizzle ORM - **Authentication:** Better-Auth - **State Management:** Zustand - **Validation:** Zod, React Hook Form - **Payments:** Stripe (PayPal & Crypto coming soon) - **Email Service:** Resend, React Email - **Code Quality:** ESLint, Prettier, Husky - **Icons:** Lucide Icons, React Icons - **Internationalization:** [next-intl]( https://next-intl.dev/) - **Utilities:** [qrcode.react](https://github.com/zpao/qrcode.react) for QR code generation, [rc-slider](https://github.com/react-component/slider) for price range slider, [country-state-city](https://www.npmjs.com/package/country-state-city/) for location data, [bcrypt.js](https://www.npmjs.com/package/bcryptjs) for password encryption (hashing and salting) - **APIs:** [IP API](https://ipapi.co/json/) for geolocation detection, [Exchange rate API](https://v6.exchangerate-api.com) for live currency conversion - **UX Enhancements:** c15t cookie banner   ## KEY FEATURES - **Extensive Product Catalog:** Discover new arrivals, hot deals, top brands, and flash sales, with advanced filtering options by categories, brands, condition, price range, discount percentage, and ratings. Customers can preview product images at the full zoom level. - **Shopping Cart & Wishlist:** Persistent cart and wishlist functionalities with real-time price calculations, including taxes and shipping costs. The cart drawer offers quick access, while a dedicated cart page enables a thorough review before checkout. - **Checkout & Order Management:** Responsive multi-step checkout process covering shipping information, payment methods, and order confirmation, with support for multiple payment gateways. Users receive order summary emails upon successful checkout. - **User Account Management:** Secure authentication through email, Google, and Facebook with password reset functionality. Tabs to track all orders, favorites/wishlist, profile, billing, and shipping addresses management. - **Help Center & Support:** Integrated live chat, user product reviews, a dedicated FAQ support page, and a help center to enhance customer engagement and support. - **Accessibility & Internationalization:** WCAG 2.1 AA compliance with ARIA labels, theme switching, and multi-language support (English, French, Spanish). Product prices are formatted using `Intl.NumberFormat`, with real-time conversion to the user’s preferred currency. - **Dynamic Social Sharing:** Effortlessly share products across social media platforms including email and generate downloadable QR codes for easy access.   ## DEVELOPMENT PROCESS - **Research & Brainstorming:** I studied over 8 popular online stores, including Jumia, Bol.com, Kemit.gt, and Backmarket to identify key features, user mental models, and common UX challenges in major e-commerce platforms. - **Design & Architecture:** Emphasized mobile-first responsive design and accessibility best practices. Structured the project to separate frontend, backend, and admin panel integrations cleanly for scalability and maintainability. - **Localization:** Automatically detect user language preferences from location or browser settings, with an option to update preferences at any time. Persist user choices for language, delivery location, and currency.   ## CHALLENGES & SOLUTIONS - **Absence of a Predefined Design:** Without any existing UI design file, extensive research across established e-commerce platforms was vital to understand user expectations and standard features to implement, ensuring the platform matched common user experience with online storefronts and avoided UX pitfalls. - **Complex Feature Integration:** Integrating multiple payment gateways, user authentication, internationalization, and real-time state management required deliberate planning and modular development to uphold code quality and extend features. Replacing Link, redirect, and useRouter from `next/navigation` with `next-intl/navigation` ensures easier localized and non-localized route handling. This [article](https://www.smashingmagazine.com/2022/05/designing-better-language-selector/) helped me understand the i18n accessibility and when to use Accept-Language headers or geolocation to determine the user’s preferred language.   ## KEY TAKEAWAYS - Working on this project strengthened my ability to independently research, brainstorm, and build a full-stack application with no design in hand while adhering to common user experience best practices and guidelines for online shopping. - Gained deep expertise in how to implement internationalization (i18n), understood how it is different from content localization and translation. And also, the best way to manage user language, location, and currency options is instead to rely on browser preferences or their geolocation. - Learned the importance of reusable UI components, helper functions, utilities, and side effects of external packages in complex applications like an e-commerce store. - Understood how storefronts handle orders and carts and how to set up a payment gateway via webhooks for one-time purchase of items.   https://frankiefab.com/projects/crypto-ai-agent Built a command-line AI agent that delivers real-time cryptocurrency market data and top stories. Sat, 14 Mar 2026 06:18:16 GMT An AI agent that leverages the [ADK TypeScript library](https://adk.iqai.com/) and custom tools to provide real-time cryptocurrency prices, volume, market capitalization, and other data, and also curated news articles from CoinDesk, right in your the terminal. This project serves as a practical demonstration of how AI agents can autonomously handle multi-step queries by integrating large language models (LLMs) like Google Gemini and Open AI with external APIs such as CoinGecko and CoinDesk. It offers a streamlined command-line interface (CLI) experience for crypto enthusiasts and developers to access up-to-date market insights and news effortlessly. ## TECHNOLOGIES - **Programming Language:** TypeScript - **AI Framework:** IQAI Agent Development Kit (ADK) - **APIs:** CoinGecko, CoinDesk - **LLM Model:** Google Gemini “gemini-2.5-flash” model - **CLI Tooling:** Node.js, readline for terminal interaction - **Environment Management:** dotenv for API keys and configuration - **Package Management:** PNPM - **Linting and Code Quality:** Biome for code formatting and Husky git hooks  ## CORE FEATURES - **Autonomous Multi-Tool Agent:** Combines LLM-powered reasoning with custom tools to fetch live crypto prices, market capitalization, volume data, and latest news. - **Precise User Instructions:** The agent interprets natural language input to selectively invoke appropriate tools, ensuring focused and relevant responses. - **Terminal-Based Interaction:** Offers a seamless and intuitive command-line chat interface with session memory for continuous conversations. - **Markdown News Reports:** Generates formatted news summaries written to a markdown file for easy review and sharing. - **Modular Architecture:** Clean separation of agent logic, tools, and utility libraries enabling easy extension or customization. ## DEVELOPMENT PROCESS - **Design & Planning:** Identified key functionalities needed for a crypto AI agent—real-time data queries and news delivery, then structured the project using ADK’s agent-tool-memory paradigm. - **Implementation:** Created custom tools "CryptoDataTool" and "CoindeskNewsTool" that connect to external APIs and process responses into structured data. Configured the agent’s behavior with clear instructions to handle specific crypto-related queries. Built user session management using ADK’s *InMemorySessionService* to maintain context in multi-turn terminal conversations. - **Testing:** Validated functionality through CLI interactions querying prices and news; ensured error handling and data formatting for robustness. - **Deployment:** Run locally with environment-managed API keys and simple start scripts supporting fast iteration.   ## CHALLENGES & SOLUTIONS - **Real-Time API Integration:** Handling varying API response formats and potential rate limits required robust error checking and caching strategies. - **Natural Language Understanding:** Crafting explicit agent instructions to correctly parse and respond to diverse user inputs was critical to avoid ambiguous or off-topic replies. - **Session Context Management:** Ensuring continuity across multiple queries in the CLI was addressed using ADK’s session services, enabling the agent to remember prior conversation context. - **User Experience in CLI:** Creating a responsive and clear CLI prompt with readable outputs and error messaging improved usability, despite lacking a graphical UI. ## KEY TAKEAWAYS - Gained hands-on experience architecting AI agents that blend large language models with domain-specific API tools for actionable, context-aware responses. - Developed familiarity with the IQAI ADK framework and TypeScript for building modular and extensible autonomous agents. - Learned best practices for securely managing API keys and environment configurations in Node.js projects. - Explored how AI agents can be employed effectively in the fast-moving, data-rich world of cryptocurrency to deliver timely insights. https://frankiefab.com/projects/afrovest Built a B2B SaaS platform that provides data on Africa’s companies and investors. Sat, 14 Mar 2026 06:18:16 GMT Afrovest is a B2B SaaS platform designed to deliver in-depth, structured data on Africa’s public and private companies, investors, deals, and advisors. Built to empower professionals across finance, consulting, and business development. This project aggregates and organizes critical market intelligence that enables data-driven decision-making and unlocks new growth opportunities across the continent. It serves as a trusted resource for navigating the complexities of Africa’s dynamic business landscape with accurate, real-time insights. ## TECHNOLOGIES - **Framework:** Next.js - **Language:** TypeScript - **Styling:** Tailwind CSS, Shadcn UI - **Backend & Database:** Supabase (PostgreSQL, Authentication, Email) - **Data Presentation:** Tanstack Table - **Deployment:** Vercel - **Icons:** Lucide Icons  ## KEY FEATURES - **Secure User Authentication & Management** Comprehensive sign-up flow with email verification, secure session management, and password reset capabilities ensuring data protection and compliance. - **Dynamic, Interactive Data Tables** Powered by Tanstack Table, users can filter, sort, and explore datasets by multiple dimensions including sector, founding year, valuation, investor type, and fund size providing rapid, granular data discovery. - **Fuzzy Search Across Dataset** Intuitive search functionality supports queries across the entire dataset or within segmented views (companies, investors, funds, contacts), minimizing friction when locating relevant records. - **Multi-Format Data Export** Enables seamless exporting of complex datasets in CSV, TSV, JSON, and XLSX formats, facilitating integration with client tools and downstream workflows. - **Weekly African Tech Ecosystem Newsfeed** Curated updates deliver timely news on trends, investments, and developments within Africa’s tech and finance sectors, keeping users informed and engaged. - **Responsive and Consistent UI** Built with Next.js, styled using Tailwind CSS and Shadcn UI components, Afrovest offers a fast, scalable, and intuitive user experience optimized for diverse device types. - **Scalable Backend Infrastructure** Backend powered by Supabase leveraging PostgreSQL for reliable, relational data modeling; integrated authentication and email services ensure robustness and scalability.  ## DEVELOPMENT PROCESS Afrovest was conceptualized to replicate and enhance features found in market intelligence platforms such as Gain.pro and Akinia. Key aspects of the development included: - **Backend Engineering:** Modeled complex relational datasets in Supabase’s PostgreSQL, designed for optimized queries and fluid interactions across companies, investors, deals, and advisors. - **Frontend Design & Implementation:** Created a user interface inspired by reference platforms, prioritizing data clarity, actionable insights, and smooth navigation for finance professionals. - **Security & Authentication:** Developed a secure authentication system with email verification and password resets to safeguard user data and uphold trust. - **Advanced Data Interaction:** Integrated multi-dimensional filtering, fuzzy search, and export functions to accommodate sophisticated data workflows. - **Content Delivery:** Implemented dynamic news sections to provide users with fresh insights on Africa’s tech ecosystem fostering ongoing engagement.   ## CHALLENGES & SOLUTIONS - **Complex Data Modeling:** Navigating interdependent datasets demanded meticulous database schema design and indexing strategies to achieve performant and accurate cross-queries. - **Performance and Usability:** Balancing large dataset responsiveness with an uncluttered, user-friendly interface required iterative frontend optimizations and efficient state management. - **Robust Authentication Workflows:** Ensuring error-free email verification and secure password reset processes involved detailed flow mapping and thorough testing to minimize friction and increase platform security. ## KEY TAKEAWAYS Afrovest stands as a critical intelligence hub for Africa’s business ecosystem by offering: - A centralized source of trusted data to inform investment and partnership decisions. - Enhanced deal sourcing and due diligence capabilities for financial and consulting professionals. - Greater visibility into public and private market landscapes across diverse sectors. - Streamlined workflows through robust export options and data integrations. The project significantly deepened my expertise in building scalable SaaS platforms that integrate complex data models with user-centric design and secure authentication systems. https://frankiefab.com/projects/quikmemo Built an elegant and intuitive note-taking web application. Sat, 14 Mar 2026 06:18:16 GMT Quikmemo is a sleek, user-friendly web application designed to help users capture ideas, organize tasks, and manage notes effortlessly. Crafted with simplicity and productivity in mind, it offers a modern writing environment powered by the robust *Tiptap rich-text editor*. As a Progressive Web App (PWA), Quikmemo delivers a native-like experience, enabling installation on desktops and mobile devices with offline access, making it a reliable companion for writers, students, professionals, and anyone who values streamlined note-taking. ## TECHNOLOGIES - **Framework:** Next.js (App Router) - **Language:** TypeScript - **Styling:** Tailwind CSS - **Authentication:** Auth.js (NextAuth), bcrypt.js, OAuth (Google, GitHub) - **Validation:** Zod, React Hook Form - **Database & ORM:** MongoDB, Prisma - **State Management:** Context API - **Rich Text Editor:** Tiptap - **Animation:** Motion (Framer Motion) - **PWA Support:** next-pwa - **Email Service:** Resend, React Email - **Analytics:** Umami Analytics - **Testing:** Vitest, React Testing Library - **Icons:** Lucide Icons - **Deployment:** Vercel  ## KEY FEATURES - **Advanced Rich Text Editing** Enables visually rich, formatted notes with support for HTML content storage in MongoDB, ensuring flexibility and easy searchability. - **Comprehensive Note Management** Create, edit, delete, archive, favorite, and restore notes effortlessly. Powerful search and filtering by title, tags, or content enable quick access to important information. - **Secure User Authentication** Supports credential-based and OAuth authentication processes (Google, GitHub), with secure password encryption (bcrypt.js), email confirmation, and robust session handling powered by Auth.js (NextAuth). - **Customizable User Experience** Theme toggling and UI personalization options offer users a tailored, comfortable workspace. - **Progressive Web App** Installable on various devices with offline capabilities, ensuring accessibility anytime and anywhere. - **Responsive Feedback** Real-time notifications during note operations (saving, updating, deleting, archiving, etc) keep users informed and engaged. - **Thorough Testing** Reliability and stability ensured through exhaustive unit and integration tests using Vitest and React Testing Library.   ## DEVELOPMENT PROCESS Quikmemo originated from a UI challenge on [Frontendmentor.io](https://www.frontendmentor.io/challenges/note-taking-web-app-773r7bUfOG) and evolved into a full-stack CRUD application focusing on real-world usability. Key development stages included: - **Iterative UI Design:** Crafted an intuitive, responsive dashboard optimized for desktop and mobile devices. - **Secure Authentication Integration:** Implemented both credential-based and OAuth login flows, progressing from client-side to server-side authentication to bolster security and reliability. - **Flexible Database Architecture:** Leveraged MongoDB’s schema-less capabilities combined with Prisma ORM for responsive schema evolution and efficient data handling. - **Thorough Testing:** Reliability and stability ensured through exhaustive unit and integration tests using Vitest and React Testing Library. ## CHALLENGES & SOLUTION - **User Data Isolation** Ensuring notes were exclusively accessible to their creators was challenging. Leveraging community knowledge from [Stack Overflow](https://stackoverflow.com/questions/79125411/how-to-efficiently-store-and-retrieve-data-of-a-user-mongodb), I designed a robust data schema and access control logic to isolate user data securely. - **Complex Authentication Flows** Combining credential and OAuth flows with email verification posed difficulties, especially with logout and session management. Switching to server-side authentication with NextAuth resolved these issues and streamlined the user experience. - **Email Verification Migration** Legacy user accounts without email verification caused login errors. I resolved this by bulk-updating the database to mark old users as verified, unlocking access while preserving security. During the integration of email verification, I encountered a critical issue with existing accounts. When trying to sign up with an email that was already registered, I received a message stating "email already exists," which was accurate. However, upon attempting to log in with the correct credentials, I faced an "invalid credentials" error. This was due to the fact that these accounts were created before implementing email verification. The server error message I received was: ``` bash [auth][error] CredentialsSignin: Please verify your email before logging in. Read more at https://errors.authjs.dev#credentialssignin ``` The diagnosis revealed that old users in the database had emailVerified set to null, while the new login logic required this field to be populated for access; since these users never received a verification email, they were effectively locked out. To resolve this, I migrated the old users to a verified status by performing a bulk update in the MongoDB shell, setting emailVerified to the current date for all users where it was null using the following command: ``` shell await db.user.updateMany({ where: { emailVerified: null }, data: { emailVerified: new Date() }, }); ``` - **Schema Maintenance** MongoDB’s flexibility demanded careful planning to maintain data integrity while adapting to evolving requirements.  ## LESSONS LEARNED - Server-side authentication significantly enhances security and reliability in production applications. - Implementing email verification strengthens data quality and prevents fraudulent account creation. - Building extensive test suites and debugging real-world edge cases are vital for delivering a polished product. - Careful database schema design is crucial when working with flexible NoSQL systems to balance agility and data integrity. ## TAKEAWAYS Quikmemo seamlessly combines a minimalist yet powerful note-taking interface with advanced features like rich text editing, strong authentication, and PWA convenience. It delivers a smooth, secure, and engaging user experience, empowering diverse users to stay organized and productive across devices. This project deepened my expertise in full-stack development, authentication workflows, and progressive web application best practices. https://frankiefab.com/projects/gitsnap Developed a browser extension that visualizes GitHub repository metrics. Sat, 14 Mar 2026 06:18:16 GMT GitSnap is a Chrome extension I developed to elevate the GitHub user experience by transforming repository data into engaging, interactive charts and graphs. Inspired by the simplicity and utility of [CSS Viewer](https://chromewebstore.google.com/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce), GitSnap leverages the [Echarts](https://github.com/apache/echarts) interactive charting and data visualization library to provide instant insights into open source projects activity by generating line, pie, tree, and bar charts. By simply hovering over repository links on GitHub, users can access real-time visual summaries of contributor activity, pull request trends, issue statuses, and branch structures. This tool caters to developers, project managers, and open-source enthusiasts seeking to quickly assess repository metrics and make data-informed decisions with ease. ## TECHNOLOGIES - **Frontend Languages:** HTML, CSS, JavaScript - **Visualization Library:** Echarts - **Browser APIs:** Web Extension API (tabs, storage)  ## CORE FEATURES - **Interactive Toggle Controls:** Users can customize which charts to display. Selecting among Contributors, Pull Requests, Issues, Branches, or any combination for tailored insights. - **Contributor Metrics:** Visualize individual and aggregate contributor involvement with detailed distribution analytics. - **Pull Request Trends:** Monitor the lifecycle of pull requests, tracking open, merged, and closed states over last 30 days. - **Issue Tracking:** Analyze open and resolved issues to understand project progress and bottlenecks within a month period. - **Branch Hierarchy Visualization:** Explore branch relationships and structures for repository management clarity. <YouTube id="2NnhyWik_z4" /> ## DEVELOPMENT PROCESS The extension was architected with core web technologies and designed for seamless integration into the GitHub UI. Managing communication between background scripts and content scripts was achieved through the Web Extension API, ensuring responsive and efficient updates as users interact with the tool. ## CHALLENGES & SOLUTIONS - **Script Role Differentiation:** Early development phases involved difficulty distinguishing between background scripts and content scripts, which caused integration issues. Resolving this clarified extension architecture, improving script functionality and reliability. - **Visualization Library Selection:** Initial attempts to integrate D3.js were hindered by its complexity and absence of minified JavaScript files for local development. Switching to Echarts offered more comprehensive documentation and a collection of minified versions of JavaScript source files, accelerating development and enhancing chart interactivity with faster loading and less bandwidth usage. ## LESSONS LEARNED - Mastering web extension architecture is crucial for effective interaction between various scripts and background processes. - Choosing libraries with strong community support and clear documentation can drastically streamline project delivery. - Data visualization enriches user engagement, turning complex datasets into actionable insights.  ## TAKEAWAYS GitSnap currently serves a growing user base, with roughly 9 weekly active users benefiting from its intuitive visualizations. The project has a dedicated [website](https://gitsnap.netlify.app/) that educates users about its capabilities and answers common questions. This project not only sharpened my expertise in browser extension development but also strengthened my ability to translate complex data into accessible, actionable formats. https://frankiefab.com/projects/web3collectives Created a resource hub featuring curated free Web3 courses and learning materials. Sat, 14 Mar 2026 06:18:16 GMT Web3Collectives is a thoughtfully curated, comprehensive resource library designed to support blockchain engineers, smart contract developers, and Web3 enthusiasts at every experience level. Drawing from an extensive collection of over 150 [curated resources](https://blockchain-development-resources.netlify.app/) including tutorials, development tools, repositories, starter templates, articles, and books. This platform simplifies access to high-quality learning materials tailored for building smart contracts and Web3 projects across diverse blockchain networks. It empowers users to efficiently discover relevant resources that suit their current skills and learning goals by organizing content into clearly defined categories and offering advanced filtering, sorting, and search features. ## TECHNOLOGIES - **Frontend:** React, React Router - **Styling:** CSS - **Form Management:** Formspree - **Email Integration:** ConvertKit - **Deployment:** Vercel  ## CORE FEATURES - **Intuitive Navigation:** Provides seamless access to resource categories such as websites, YouTube channels, development tools, interactive tutorials, GitHub repositories, boilerplates, node providers, blogs, and books. - **Experience-Based Filtering:** Resources are tagged by experience levels (Beginner, Intermediate, Advanced) enabling users to tailor content to their skill set. - **Robust Search:** Powerful keyword search allows rapid retrieval of tutorials, guides, videos, documentation, development tools, and other learning materials matching user queries. - **Flexible Sorting:** Options to sort resources alphabetically or by date added to ensure up-to-date and orderly browsing. - **User Experience Enhancements:** Implements a scroll indicator for orientation and light/dark mode toggling for comfortable, customizable viewing.  ## DEVELOPMENT PROCESS - **Ideation:** Inspired by a previously curated [GitHub repository](https://github.com/frankiefab100/Blockchain-Development-Resources) of blockchain development resources, I recognized the need to build a more approachable, organized web platform to facilitate learning. - **Implementation:** Developed with ReactJS and Vite for efficient, modular frontend architecture. Integrated Formspree to submit new resources and ConvertKit for managing email subscriptions, deploying the completed web **app** via Vercel for fast, scalable hosting. - **Data Organization:** Structured learning materials and metadata in JSON format to enable dynamic rendering, filtering, and searching across multiple categories and experience levels.  ## CHALLENGES & SOLUTION - **Curating Quality Content:** Ensuring each resource’s relevance and accuracy required continuous research and updates to maintain a valuable knowledge base. - **UX Design Complexity:** Balancing a clean, user-friendly interface while presenting a vast array of categorized information demanded thoughtful layout and interaction design. - **Data Storage Approach:** With limited backend experience, selecting a scalable and maintainable database was challenging; adopting JSON files for resource organization ensured simplicity and flexibility. - **Email Subscription Workflow:** Transitioned from a complicated MailChimp setup to ConvertKit, streamlining the email subscription integration and improving reliability. ## KEY TAKEAWAYS - Gained deepened expertise in React and frontend architecture by building a resource-rich, navigable platform that lowers entry barriers to Web3 learning. - Enhanced skills integrating third-party email and form management services. - Appreciated the vital role of community-curated content in enriching educational technology offerings and supporting developer ecosystems.