_projects

// a collection of my work

Project 1 // _karyana-store-—-frontend-overview

Karyana Store — Frontend Overview

Karyana Store — Frontend Overview Tech Stack & Libraries Used: Framework: Next.js (React 18) – for SSR, routing, and SEO-friendly pages State Management: Zustand – lightweight global state management for cart, filters, etc. Styling: Tailwind CSS – responsive and modern design, plus some custom CSS for components UI Components: Material-UI & Ant Design – for ready-made, clean components like tables, buttons, modals Data Fetching: Fetch API / Axios – to interact with the backend (Node.js + Express + PostgreSQL) Forms & Validation: Custom React forms for user input (checkout, login, signup) Routing & Navigation: Next.js built-in Link and dynamic routing for product pages Local Storage: For cart persistence across sessions Extras: React hooks (useEffect, useState, useMemo) for dynamic UI updates Swiper.js for product sliders/carousels Socket.io / WebSocket (if any real-time notifications or updates were used) Features Built: Product catalog with filtering, search, and categories Multi-role panels: Admin, Seller, User Cart management with local storage persistence Checkout and order placement Interactive dashboards (Admin & Seller) Responsive design for mobile, tablet, desktop Accessibility & performance optimizations Why This Stack: Next.js → SEO + performance Zustand → simple state management for cart & user sessions Tailwind CSS + Material UI/Ant Design → fast UI development React → modular, reusable components

@radix-ui/react-dropdown-menu@radix-ui/react-slot@radix-ui/react-toast@tanstack/react-queryaxiosclass-variance-authorityclsxcvaframer-motionlucide-reactnextnext-themesreactreact-domrechartstailwind-mergetailwindcss-animatezustand
view-project

Project 2 // _karyana-store-backend---tech-stack

Karyana Store Backend - Tech Stack

Core Technologies: Node.js - Runtime environment Express.js - Web framework for REST API PostgreSQL - Relational database Prisma ORM - Database management & queries TypeScript - Type safety Key Features: Authentication: JWT tokens, bcrypt password hashing File Upload: Multer for product images Multi-vendor System: Separate seller & admin roles Order Management: Complete order flow with status tracking WhatsApp Integration: CallMeBot API for notifications Email: Nodemailer for order confirmations Database (Prisma Schema): Users, Sellers, Products, Categories Orders, OrderItems, Reviews Notifications, Seller Applications Product Variants with images Deployment: Database: Neon (PostgreSQL cloud) Backend: Vercel Serverless Functions Storage: Local uploads folder API Endpoints: /api/auth - Login, Register /api/products - CRUD operations /api/orders - Order management /api/sellers - Seller dashboard /api/admin - Admin panel

NodeExpressPostgreSQLPrisma ORMTypescriptCORSJWT tokensbcrypt password hashing
view-project

Project 3 // _limkokwing-hrms-and-cms-system

Limkokwing HRMS and CMS System

Limkokwing HRMS and CMS System

ReactTailwind CSSSwiper JSAtomReduxsassAnt designAxiosfirebasesocket.io
view-project

Project 4 // _appointment-scheduler-wordpress-plugin

Appointment Scheduler WordPress Plugin

A beautiful and feature-rich appointment scheduling system for WordPress with calendar integration, Google Meet links, email notifications, and automatic reminders.

PhpJavascriptCSSAJAXHTML
view-project

Project 5 // _user-menu-control-🛡️

User Menu Control 🛡️

User Menu Control is a lightweight, dynamic WordPress plugin designed to give Administrators complete control over what Subscribers and Editors see in the WordPress Admin Dashboard.

PhpJavascriptCSSAJAXHTMLWordpress
view-project

Project 6 // _boltos-custom-post-type-plugins

BoltOS Custom Post Type Plugins

These plugins are custom-built for the BoltOS Theme. Each plugin adds a dedicated Custom Post Type (CPT) and related functionality to power various dynamic sections of the site. They’re modular — so you can activate only the ones your project needs.

Swiper JSJavaScriptPhpHtmlCssAjax
view-project

Project 7 // _pdf-bank-statement-to-excel-converter

PDF Bank Statement to Excel Converter

A React-based web application that converts PDF bank statements and payslips into Excel/CSV format. The application runs entirely client-side, ensuring your financial data never leaves your browser.

lucide-reactxlsxReactTailwind CSSunpdf
view-project

Project 8 // _lelc-portal

Lelc-Portal

Lelc-Portal

HTMLCSSJavaScriptSCSSBootstrapSwiper.jsjQuery
view-project

Project 9 // _v10-project

V10 Project

The Limkokwing University Website is built using HTML, CSS, JavaScript, SCSS, Bootstrap, and Swiper.js to create a dynamic and responsive platform. The website allows students to easily access information on courses, accommodation, and fees. It features a clean, modern design with interactive elements, offering a smooth and engaging user experience across devices.

HTMLCSSJavaScriptSCSSBootstrapSwiper.jsjQuery
view-project

Project 10 // _vortex-dashboard

vortex-dashboard

vortex-dashboard

HTMLCSSJavaScriptSCSSBootstrapSwiper.jsjQueryphp
view-project

Project 11 // _secret-garden

secret garden

secret garden UI

ReactTailwind CSSSwiper JS
view-project

Project 12 // _google-drive-api--upload

Google-Drive-Api--Upload

Google-Drive-Api--Upload

Wordpressphpjquerycssgoogle api
view-project

Project 13 // _creativedrop.github.io

creativedrop.github.io

creativedrop.github.io

HTMLCSSJavaScriptSCSSBootstrapSwiper.jsjQuery
view-project

Project 14 // _lga

LGA

LGA - Limkokwing Uni Project

HTMLCSSJavaScriptSCSSBootstrapSwiper.jsjQuery
view-project

Project 15 // _lelc-web

Lelc-web

Lelc-web

HTMLCSSJavaScriptSCSSBootstrapSwiper.jsjQuery
view-project

Project 16 // _-rasid

Rasid

Rasid

HTMLCSSJavaScriptSCSSBootstrapSwiper.jsjQuery
view-project