Emerald-TypedEmerald-Typed

Emerald Typed Projects

by Kyle Hipple

Portfolio V5

Portfolio V5

In Production
Current Branch:V5 
Last Commit:Fetching Commit..

What's up hope your having a wonderful day!!! Why don't you check out some of my projects while your here. If you want to get in touch please do not hesitate to fill out my contact form to directly send me a text!! Linked are all my other profiles for Thingiverse, GitLab, Kofi, and LinkedIn. I am always looking for new projects and opportunities.

Daisy UIReactTypeScriptNext JSZodPrismaTwilioTailwind CSS
CYMK Filament Forge

CYMK Filament Forge

In Production
Current Branch:main 
Last Commit:Fetching Commit..

CYMK Filament Forge uses project takes a mathematical approach to mixing pigmented cyan, magenta, and yellow filaments, allowing for the creation of a plethora of colors using just three base. It uses an equation involving apothem and slice heights to calculate precise weights and extrusion settings. Check it out and see how how it works this was more for combining geomtry with Typescript!

ReactTypeScriptNext JSTailwind CSSPrismaZodMath.js
Emerald Video V2

Emerald Video V2

In Production
Current Branch:main 
Last Commit:Fetching Commit..

Netflix-like UI using Mantine and React Query with custom carousel and video components, matching Netflix's navigation, sign-in/up flow, and dynamic video backgrounds(REDOING NOW I KNOW FRAMER MOTION). Implemented Zustand for managing video sources and page categories, with optimized data fetching and caching using Tanstack React Query. Built responsive mobile-friendly components, integrated shimmer skeletons for smooth loading, and replicated Netflix's like button interactions.

ReactTypeScriptNext JSTailwind CSSReact-VideoMantinePrismaZodNode
Clip Stitch

Clip Stitch

In Production
Current Branch:main 
Last Commit:Fetching Commit..

A Sharp Collage Generator that allows users to easily upload images, customize settings, and create personalized generation without the neededing to store images on larger file uploads. I was practicing compressing images and handling large uploads through server-side streaming, for both privacy and cost-effectiveness

ReactTypeScriptNext JSTailwind CSSMantineS3 AWS
Rainbow Collage Generator API

Rainbow Collage Generator API

In Production
Current Branch:main 
Last Commit:Fetching Commit..

Develped as a mock endpoint for a clip stitch, it utilizes PlaceHolder.co. Now a part of Clip Stitch on empty entry. Was originally an api endpoint that had the collage generation before the interactive CSR form. That also handles file uploads.

Node.jsExpressSharpPlaceHolder.co
Emerald-Crud

Emerald-Crud

In Production
Current Branch:main 
Last Commit:Fetching Commit..

Emerald CRUD was to show basic methods with custom Error handling, and modern UseFormState(19/useActionState) Hook. Built with Mantine/Prisma/Next JS Actions/ and Zod. Shows my ideal way to handle formData simply and effectively.

ReactClerkTypeScriptZodNext JSPrismaTailwind CSSMantine
ReadMe Generator V2

ReadMe Generator V2

Current Branch:main 
Last Commit:Fetching Commit..

This version provides an enhanced documentation experience by automatically generating documentation focused on my brand and resources. It includes expanded sections for features, usage instructions, and a detailed list of libraries I use. Additionally, it integrates a dropdown feature for displaying libraries and uses Shields.io badges to make the information more accessible and visually appealing. Very simple not fully husked

Repo Link
TypeScriptGitlabmarkupNode JS
Barometric Pressure Migraine Monitor

Barometric Pressure Migraine Monitor

In Production
Current Branch:main 
Last Commit:Fetching Commit..

During certain seasons barometric fluctuations can caused a migraines for some people. I wanted to simply make an app to grab the weather data over 24 hours on the hour from time of request. Then make graph of the fluctuation of hectopescales over the requested period and store data to zipcode cookie.

ReactTypeScriptNext JSTailwind CSS
Emerald Image Dalle Generator and S3 AWS Bucket App

Emerald Image Dalle Generator and S3 AWS Bucket App

In Production
Current Branch:V3 
Last Commit:Fetching Commit..

(Desperatly need to update UI not current reflection) Emerald Image Dalle Generator and S3 AWS Bucket App(started tesing useFormState/useActionState from react 18/19) was my first AI app, but I would say it was more AWS image and pagination practice

ReactTypeScriptNext JSPrismaS3 AWSTailwind CSSDalle-2 OpenAI API
Portfolio V4

Portfolio V4

Current Branch:JulyMantine 
Last Commit:Fetching Commit..

My last rendition of my portolio with Next.js, Mantine, Prisma, Zod, Twilio, and TailwindCSS, still includes a contact form with Twilio SMS integration. Contact submissions were also stored in PostgreSQL, with cookies tracking form completion status. Authentication from v3 (using Clerk) was removed in v4 for improved accessibility. Historical commits from January to June reflect ongoing improvements and integration of Mantine updates. Now V5 in prod with framer motion and way cleaner UI

Repo Link
ReactTypeScriptNext JSZodPrismaTwilioTailwind CSSMantine
Essential TypeScript Reference for Basic Development

Essential TypeScript Reference for Basic Development

In Production
Current Branch:main 
Last Commit:Fetching Commit..

Quick reference for TypeScript basics and common patterns.(Old Practice) Was one of my first projects to both demonstrate and build greater proficiency in TypeScript. Very empirically JS use with Typescript Utilities

ReactTypeScriptNext JSTailwind CSS

Kyle Hipple

Emerald Typed

I am a passionate Typescript Developer who beleives there is nothing more gratifying than bringing ideas to fruition. I specialize Next.js/React, Prisma, and TailwindCSS, but also have a knack for Autodesk Computer Aided Design and Mainsail on the side

Contact Me