Projects
Recreating React
Building Four Core Features of React
Summary
In this self-driven project, I undertook the challenge of recreating a simplified version of React from scratch to deepen my understanding of its inner workings.By building out core functions like createElement, render, useState, and useEffect, I gained valuable insights into JSX transformation, DOM manipulation, and state management.This hands-on experience has not only solidified my grasp of React fundamentals but also honed my problem-solving skills.I've documented my journey and the technical intricacies of the project in a Medium article and a YouTube video for those interested in diving deeper.
Main Features
- createElement transforms JSX into ReactElement objects
- render brings ReactElements to life on the DOM
- useState manages state
- useEffect synchronizes the component with an external system
Primary Tools Used
TypeScript
Parcel
Secondary Tools Used
- Jest
- Prettier
- GitHub
Harry Howard's Journals
Using AI to Make Big Data More Accessible
Summary
I'm proud to introduce Harry Howard's Journals, an advanced web application that redefines the way we explore historical journal entries. Using Next.js, Python, and AI tools, the app processes and analyzes entries from the 1930s and 40s. These entries are enhanced by AI and made easily accessible, putting a treasure trove of historical data at your fingertips.
Main Features
- Harry has been brought to life with state-of-the-art AI technology. Ask Harry detailed questions about the journals, or just chat! (powered by ChatGPT)
- Read journal entries one page at a time or easily skip around
- Search function for journal entries
- AI-generated topics for each entry allow users to understand an entry at a glance and link together stories woven through multiple entries
- Sign in with Google to keep track of pages read, save special passages and make posts to discuss entries with others
Primary Tools Used
React
Next.js
Node.js
TypeScript
Tailwind CSS
Daisy UI
ChatGPT API
Prisma
Supabase
Secondary Tools Used
- Use Python library OpenCV to preprocess images
- Run CRAFT AI locally to split images into lines
- Apply Google Vision API on lines
- Use GPT-4 to reconstruct journal entry from Google Vision output
- Generate metadata on journal entries with GPT-3.5 (ChatGPT) API
- Store data with Google Cloud Storage
- Run python scripts with Google Cloud Run
Good News!
An Automated Pipeline for Finding Positive News Stories with AI
Summary
Good News! aggregates global news stories through reputable news aggregator APIs, meticulously collecting articles related to building and construction projects, as well as advancements in healthcare, education, and peace. To identify the most uplifting and positive stories, I employ advanced AI analysis, powered by OpenAI's GPT. This sophisticated natural language processing helps to filter and present news that sparks optimism and inspiration, shedding light on the progress and goodwill that is constantly unfolding around the world.
Main Features
- Aggregates positive news stories from around the world related to construction projects, healthcare advancements, educational progress, and peace initiatives
- Interactable world map representing source countries
- Updated daily with new articles
- Automated data collection and processing pipeline that requires minimal manual intervention
- Utilizes OpenAI's GPT API to evaluate and filter news stories based on positivity and relevance to the chosen categories
Primary Tools Used
React
Next.js
Node.js
TypeScript
Tailwind CSS
Daisy UI
ChatGPT API
Firebase
Google Cloud Functions
Mediastack API
Secondary Tools Used
- React Simple Maps
Journal Transcription Assistant
Efficiently Transcribe Journal Entries
Summary
A kind of Content Management Application that serves images of journal pages to users and provides the tools to quickly and conveniently transcribe them. The transcription is indexed and stored in a database so that another website can analyze and display them.
Main Features
- Process, index, and store images of journal pages
- Serve images of journal pages from firebase database
- Speech-to-text with added support for punctuation
- Click to zoom image for hard-to-read text
- Special annotation tools to enrich the text data
Primary Tools Used
React
JavaScript
Firebase
GitHub
Secondary Tools Used
- React Speech Recognition
- React Inner Image Zoom
Service Now Auto Repair
Small Business Redesign
Summary
An update of an old website to make it clean, responsive, and consistent with modern design principles
Main Features
- Splash page
- Navbar and Footer
- Responsive
- Realtime review data
- Embedded Google Map
Primary Tools Used
React
Next.js
Node.js
TypeScript
Bootstrap
GitHub
Secondary Tools Used
- Google Places API
- Google Maps API
- Yelp API