prometheus pwa mongodb preact solid vite strapi grafana twind firebase remix python streamlit react fly git svelte java splunk docker tailwind nodejs golang

Table of Contents

CodeConstants

CodeConstants Checkin System
Live Preview

Focused on a centralized application for common tasks. It has a TTI of sub 250ms on the first load and lower than 100ms on subsequent loads.

Technology

  • React.js
  • Tailwind
  • Node.js
  • Express
  • SQLite
  • Flask
  • Gorilla Mux
  • Docker
  • Golang
  • Python
  • TypeScript

Project difficulties

This project stressed smooth integration of microservices, having reusable components, and having a fast TTI (Time to first interactivity). The design throughout the different pages on the site must fit the consistent branding while providing a different feature to the user.

Solution

The code is split in to four different layers. The frontend is built using React.js w/ TypeScript, compiled with SSR (Server side rendering) and then hydrated on the client. The backend is built using Express w/ TypeScript. There are then 3 microservices, one built with Python + Flask, one with Golang + Gorilla Mux, and one with Node.js + Express. Each microservice has its own database that it is in full control over, and all microservices are only allowed a network connection to the backend.

Features

  • Authentication
  • Email verification
  • Account persistence with cookies
  • Multiple microservices
  • Algorithm Visualizer
  • Random Number Generator
  • Checkins
  • Notes

Weekdays

Example of weekdays
Live Preview

A weekly-based kanban board to plan tasks by the day. It keeps track of the next 50 days and the past 50 days to allow you to plan your life months in advance and to move old tasks to the future.

Technology

  • Solid-start
  • Solid.js
  • Vite
  • TypeScript
  • SQLite
  • Docker
  • Fly.io
  • Tailwind

Project difficulties

The app-like feel of using a kanban board was a must while developing and designing this site. Being able to drag tasks, modify them, separate them by categories, etc was extremely important as well.

Solution

Solid-start is used to handle the frontend and backend. Solid-start is a unique framework that uses Solid.js and specific server actions to run code on the server. A lot of the different sub-pages of the site are tied not to state managed by the application but the url, allowing a more native browser experience.

Features

  • Mobile-first
  • Drag and drop
  • Customizable
  • Dark mode
  • Automatic image resizing
  • Account persistence with cookies

UPE @ FIU

UPE Eboard of 2022
Live Preview

This project includes: A monolithic server that handles the frontend --> backend --> database. A self-hosted CMS that holds the information for executive board and FAQ page. A Prometheus metrics server that the backend reports to. And a Grafana server that visualizes from the Prometheus metrics server.

Technology

  • React.js
  • Prometheus
  • Grafana
  • Express
  • Node.js
  • Strapi
  • Prisma
  • Docker
  • TypeScript
  • Cloundinary
  • SQLite

Project difficulties

This site needed a fast turnover time for users to be able to see events, register/login, and verify their emails. It also needed admin views to be able to view and make changes based on the incoming data. The site was made with a mobile-first approach and needed to be able to handle a large amount of users and bots (being a tech club, there are bound to be bad actors- routes needed to be protected).

Solution

The main code base is a monolithic server that handles e2e requests and data manipulation of the database. The fullstack app is made using Remix.js, which uses React.js on the frontend. All changes to the database are represented through model files and all routes have built in authentication checks depending on the functions of that page.

Features

  • 10+ pages
  • Custom CMS
  • Prometheus data server
  • Grafana dashboard
  • Authentication (different levels of users)
  • Email verification
  • Minification of CSS on build/dev
  • Automatic image resizing
  • Mobile-first

| attach |

Attach home screen
Live Preview Source

A quick static portfolio website with a simple metrics server and dashboard. It is easily configurable and premiered in a workshop with 100+ attendees.

Technology

  • Solid.js
  • Tailwind
  • Express
  • Node.js
  • Docker
  • TypeScript
  • Flyctl

Project difficulties

Making this site configurable in every aspect, from color scheme to sections to if the sections are opened by default. The site targets an audience where you are sharing the site via an NFC card, possibly in a location that doesn't have fast wifi so the size of the site must be really small.

Solution

Solid.js is used for the frontend, which is a React-like framework that compiles to vanilla JS. Tailwind is used for the styling, which is a utility-first CSS framework. The site is hosted on Fly.io, which is a static site hosting service. The metrics server is built using Express and Node.js. The metrics server is hosted on Fly.io as well. The site is built using Docker and is deployed using Fly.io.

Features

  • Static site
  • Metrics server
  • Mobile-first
  • Automatic image resizing
  • Customizable

Twitter Filter

Attach home screen
Live Preview Source

This app can filter by keyword, amount of tweets, start date, start time, end date, end time, and verified users. It can sort by recency or relevency.

Technology

  • Steamlit
  • Python
  • Fly

Project difficulties

The project was difficult because of the amount of data that was being pulled from the Twitter API. The API only allows 7 days of data to be pulled at a time, so the app had to be able to handle that. The data was also very large, so the app had to be able to handle that as well.

Solution

Using Python which is a language that supports large amounts of data was a good choice, as well using streamlit allows for a direct UI for the data to be displayed.

Features

  • Data aggregation
  • Data visualization
  • Twitter API

LinkedHub

Attach home screen
Source

Technology

  • JavaScript
  • GitHub API
  • Firebase
  • Express
  • Node.js
  • Chrome Extension

Project difficulties

The project aims to help bridge the gap in recruiters seeing a canadites Github, by injecting it right in to their LinkedIn profile!

Solution

A downloadable chrome extension that injects a GitHub section. It connects to our backend which is an Express server that connects to a Firebase database.

Features

  • 1st place hackathon winner (MiamiHackWeek @ Campus 2022)
  • Web scraping
  • GitHub integration

Portfolio

Attach home screen
Live Preview Source

Technology

  • SvelteKit
  • Svelte
  • Vite

Project difficulties

I wanted a fast site that uses a new technology that I haven't used before. I also wanted to make it mobile-first.

Solution

I used SvelteKit because I have used Svelte before, but wanted more practice with it.

Features

  • Mobile-first
  • Customizable
  • Fast
  • Static site