Frontend delivery
Builds responsive interfaces with React, Next.js, TypeScript, Tailwind CSS, reusable components, and clean interaction states.
Core strength
Clean interfaces backed by practical engineering decisions.
Delivery focus
Responsive UI, REST APIs, relational data, and deployment.
About
I build product interfaces that connect clean frontend work with practical backend logic.
My focus is on shipping web applications that feel professional to use and understandable to maintain. That includes responsive UI, reusable components, REST API integration, relational database-backed workflows, and deployment through platforms like AWS, mCloud 4 and for free version, Vercel, Netlify, and Render So on.
Most of my work sits where interface quality meets engineering implementation. I use React, Next.js, Tailwind CSS, Node.js, Express, and MySQL to build applications that is something a real team could iterate on.
I am especially interested in dashboards, CRUD workflows, API integrations, and product surfaces where clear information architecture matters. The goal is to make the interface feel trustworthy, fast to scan, and ready for real users.
Backend integration
Works with Node.js, Express, REST APIs, form handling, service integration, and relational database-backed application flows.
Shipping mindset
Focuses on maintainable UI structure, accessibility, deployment readiness, and the details that make a portfolio feel production-level.
Experience Timeline
A learning path that shows momentum, not just interest.
This section is designed to communicate progress clearly: practical builds, structured training, and a steady move toward production-ready engineering work.
Next step
AWS re/Start Applicant
Preparing to deepen cloud fundamentals, infrastructure awareness, and deployment knowledge that supports more production-ready full-stack work.
Current focus
Junior Full-Stack Developer
Building end-to-end portfolio projects with React, Next.js, Node.js, Express, MySQL, and practical deployment workflows for web products.
Ongoing practice
Personal Projects
Using self-directed builds to improve CRUD workflows, dashboard UI patterns, API integration, authentication concepts, and product-oriented problem solving.
Engineering habits
The Odin Project
Learned project structure, Git workflows, JavaScript fundamentals, and hands-on debugging through self-paced engineering exercises.
Frontend foundation
SheCodes Frontend Training
Strengthened HTML, CSS, JavaScript, responsive design, and the discipline of turning visual ideas into clean interfaces.
Business foundation
Marketing and Operations
Built experience around coordination, process thinking, customer-facing work, and business context that now informs how I approach product flows and application logic.
Projects
Projects presented as engineering work, not just gallery cards.
Each project now explains the product problem, the implemented solution, the architecture behind it, and what it shows about how I work across frontend and full-stack development.
Full-stack application
Restaurant POS System
Built a restaurant operations product covering order tracking, billing flows, table management, and an admin-facing dashboard.
ReactReduxNode.jsExpressMySQL
Problem
Restaurants need one workflow for tables, orders, and billing instead of juggling disconnected views and manual updates.
Solution
Created a full-stack POS interface that keeps table status, order progress, and billing interactions within one responsive product flow.
Architecture
React front end backed by a Node.js and Express service, with MySQL handling relational data for orders, menu items, and table states. Redux supports shared client-side state.
Challenges
Coordinating multiple operational states across dashboard, ordering, and billing screens while keeping the UI simple for fast staff usage.
Responsibilities
Designed the front-end workflows, connected CRUD-driven business logic, structured the app around operational screens, and shaped the dashboard experience.
Results
Demonstrates end-to-end product thinking across UI, API integration, and database-backed business logic.
Deployment and engineering notes
Frontend
React SPA with Redux-managed state and responsive admin screens.
Backend
Node.js + Express application separated from the front end.
REST / SDK
REST-style endpoints for menu, orders, tables, and billing actions.
Auth
Protected admin and staff workflows were part of the application design.
Database / State
MySQL relational schema for operational restaurant data.
Hosting
Front-end demo deployed on Vercel with a separate backend service architecture.
Analytics dashboard
Dugro Customer Analysis Dashboard
Created a business dashboard that helps teams review customer trends and campaign performance from a clearer, faster interface.
ReactJavaScriptDashboard UIData visualization
Problem
Stakeholders need customer insights that are fast to scan and easier to act on than raw reports or fragmented spreadsheets.
Solution
Delivered an interactive dashboard that organizes key metrics, customer segments, and analysis views into a single product surface.
Architecture
Single-page React dashboard with reusable reporting components, flexible layout sections, and data-driven visual blocks built for decision support.
Challenges
Balancing information density with readability while keeping KPIs, charts, and supporting details visually consistent.
Responsibilities
Focused on front-end structure, data presentation, reusable dashboard sections, and turning dense information into readable reporting views.
Results
Shows product-minded dashboard design and a stronger ability to present business data through a polished interface.
Deployment and engineering notes
Frontend
React dashboard UI with component-based charts and responsive layout behavior.
Backend
Front-end delivery focused on consuming prepared business data sources.
REST / SDK
Designed to work with reporting data and structured dashboard inputs.
Auth
Authentication was outside the primary UI implementation scope.
Database / State
Business reporting datasets visualized in an interactive dashboard.
Hosting
Web dashboard published for stakeholder access.
Real-time communication
Video Call App
Built a browser-based video call experience with session handling and a clean joining flow using the ZegoCloud SDK.
ReactZegoCloud SDKWebRTC conceptsVercel
Problem
Real-time communication products need dependable session setup and clear room flows, even in simple demos.
Solution
Implemented a call flow that supports session-based identity, room entry, and a user-facing UI for quick testing and collaboration.
Architecture
React client integrating a third-party RTC platform, with session-level state handling and component lifecycle management for call setup and teardown.
Challenges
Managing SDK lifecycle behavior correctly so sessions clean up cleanly and the call UI stays predictable across joins and exits.
Responsibilities
Integrated the calling SDK, handled join and leave lifecycle logic, and designed a lightweight interface for room-based communication.
Results
Demonstrates integration work with external communication services and real-time front-end interaction patterns.
Deployment and engineering notes
Frontend
React-based call interface with room entry and session management.
Backend
RTC infrastructure delegated to the ZegoCloud platform.
REST / SDK
SDK-based service integration instead of a custom REST backend.
Auth
Session identity handled at the room level rather than full account auth.
Database / State
Transient room and participant session state.
Hosting
Deployed on Vercel as a front-end communication demo.
Frontend application
Resume Builder
Built a resume creation tool to practice controlled forms, CRUD-style editing, and preview-driven UI updates in React.
ReactJavaScriptComponent stateVercel
Problem
Resume builders need a straightforward editing experience without forcing users through complex or fragmented forms.
Solution
Created a lightweight builder that lets users manage structured resume content and immediately see layout updates on screen.
Architecture
Client-side React application with component state powering section CRUD interactions and a live preview workflow.
Challenges
Keeping form state manageable as sections grow, while preserving a smooth editing experience on smaller screens.
Responsibilities
Structured the editing flow, managed reusable form sections, and handled instant updates between data entry and document preview states.
Results
Strengthened reusable component structure, data flow handling, and product thinking around form-heavy interfaces.
Deployment and engineering notes
Frontend
React app with reusable form sections and live preview behavior.
Backend
No dedicated backend for the MVP build.
REST / SDK
Not required for this version.
Auth
Not required for this version.
Database / State
Client-side state management for resume content.
Hosting
Deployed on Vercel as a shareable front-end project.
Additional builds
Smaller projects that reinforce breadth
These projects show practice across calculators, API consumption, and JavaScript problem solving while the larger case studies carry the strongest recruiter-facing narrative.
Mortgage Repayment Calculator
Calculator for monthly and total repayments with a responsive form layout and clearer financial input handling.
ReactJavaScriptNetlify
Spreadsheet Formula App
Vanilla JavaScript spreadsheet-style practice project supporting formulas and arithmetic expressions.
JavaScriptHTMLCSS
Pokemon Search App
Search interface that consumes an external API and renders Pokemon details by name or ID.
JavaScriptAPI integrationNetlify
Technical toolkit
A concise skills section built around contribution areas.
Instead of a long wall of badges, this section groups the stack by how I would contribute on a real team: front-end delivery, backend implementation, data workflows, and day-to-day product tooling.
Frontend
Interface systems, responsive layouts, and component-driven implementation.
ReactNext.jsTypeScriptTailwind CSSJavaScriptHTML/CSS
Backend
Server logic and integration work for practical web applications.
Node.jsExpressREST APIsForm handlingService integration
Data
Relational modeling, persistence, and application state decisions.
MySQLMongoDBReduxClient stateCRUD workflows
Tooling
Daily workflow tools used to ship, version, and deploy projects.
GitVercelNetlifyAWSFigmaPostman
Contact
Available for Full-stack opportunities and collaborative product work.
If you are hiring for a team that values clean UI implementation, practical problem solving, and steady engineering growth, I would be glad to connect.
Direct contact
Professional links
Send a message
Use the form below for hiring conversations, freelance project discussions, or collaboration opportunities.