Diego Díaz

Karma Plus is my own production mobile web app and App Store app. Users track good deeds they have done or witnessed, anonymously populating a heatmap with the data. It's built on a monorepo with an SDK for Supabase, a Next.js web project for the back office, an Expo project for the web and iOS app, Zod to validate and generate TypeScript models, and a custom-tailored UI kit. The deeds are validated by Claude Haiku before being saved. The apps and email templates are multilingual.

This is an AP system inspired by Ramp's, with the design system replicated from YouTube videos, introducing UX and UI improvements to the flow and components. The design system is available in Storybook. The project is built on a mono repo with an SDK to communicate with Supabase, the design system, Zod for runtime validation and for generating TypeScript models, and a web app hosted on Vercel.

This is a demo of an MVP booking system that lets users simulate the entire checkout process. It's fully responsive and accessible and was built on a monorepo with an SDK for libSQL and Drizzle, a Next.js web project (app and API), Zod to validate and generate TypeScript models, and a design system based on shadcn/ui with Tailwind CSS.

A cross-platform React/Tauri exercise app. Using an AWESOME-APP seed, I replaced native web components with Next.js/React and created a TODO app. I connected and extended the back end in Rust in order to enhance project/task relationships before data reached the front end. The app's UX makes sure the user is always in the loop (no dead ends).

Angular 5 exercise with Spotify API to bind and unbind playlists to a user.

React/Redux-Observable exercise.

Boilerplate for MEAN stack with Gulp tasks to compile files from source into development and production environment.

- Super fast, combining Sass and CSS from Node modules and JavaScript into a single file.
- Compresses every image (requires TinyPNG API key) and SVG.
- Angular templateCache system.
- Bootstrap 4 alpha (6) with new and improved Flex grid.
- Gulp runs the Express app with LiveReload (only for development).
- Form sent to the API with server-side validation and nodemailer integrated.
- Build process gets the development environment and compresses it for easy uploading.
- CSS minified and JS uglified.
- Different from MBAS, this one is not server-side rendered before Angular rewrites the DOM.

This project was intended to create a front-end boilerplate taking advantage of Middleman rapid prototyping schema and its core language (Ruby), enhancing it with Angular and Sass. It was closed when Bootstrap 4 was super alpha and their flexbox implementation was poor. MBAS is still super useful for SEO due to elements written from the compiled version, and Angular only rewrites the DOM afterwards for any missing content.

This code serves the purpose of efficiently handling the color specifications outlined in the brand books of important clients. Each color is assigned specific values for properties like background color, color (text), border (solid 1px), and border color. To streamline development and maintain flexibility, this code generates classes for each color, allowing for easy assembly and customization. Furthermore, the code incorporates support for various element statuses and pseudo-classes, including :hover, :focus, :checked, :active, :first-child, and :last-child. By leveraging this approach, the goal is to expedite development processes while accommodating dynamic adjustments based on the brand book's color variables. Additionally, a color map function could be implemented to provide alternative ways of accessing and utilizing the color mappings.