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