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
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