Hi! I'm Joseph.
Full Stack Web Developer. I love building awesome projects and learning new things along the way.
About me
Ever since I was a kid, I have always been fond of puzzles and brain teasers. I often find myself getting lost in time when thinking about solving a problem and not stopping until it is solved. I really enjoy the process and the feeling of fulfillment after finding a solution. It was only a matter of time for me to come across Programming and Software Development. It was a complete love at first "Hello World!" and it just keeps getting better!
Skills
Projects
Bugsify
Algorithm questions in JavaScript. Provides users with a web based code editor and a console.
Difficulties
- The application required authentication as well as authorization depending on user's role
- Code written by the user needs to be tested on the backend and may crash the server
- Repeated MongoDb connections not DRY
- Tests for each problem is entered through an Admin Panel. Storing test's arguments and outputs was very tricky for each function can have multiple complicated arguments (Arrays, matrix) and types needs to be specified
- Questions needs to be stored with a certain format to be displayed on the client nicely
Solutions
- I chose JWT token authentication to secure my application. Since I have an admin user on this application, token easily allowed me to secure each backend endpoint by role
- I applied code insertion into the user's code by transforming it into Abstract Syntax Tree to prevent it from crashing the server i.e Infinite loops.
- A centralized file that handles all logic relating to MongoDb connection. I also took advantage of JavaScript's closure and currying to create a custom MongoDb API for basic CRUD operations.
- I stored the test's arguments and outputs as a long string with their types. During the test, I parse them back to their proper types using a recursive function then I pass the results to the user's solution and compare the output. Recursive approach is neccesary to parse nested arrays. This was really fun as it felt like I'm playing Bugsify while building it
- I used Draft.js to format, store and display the questions.
AlgoVisualizer
Visualizes the following algorithms: Selection Sort, Bubble Sort, Insertion Sort, Quick Sort, Linear Search, Binary Search, Jump Search, Dijkstra and A* path finding algorithm.
Difficulties
- Learning the algorithms. Fun fact: At my work, there was a macro written around 15 years ago and still being used today. This macro generates a view but now takes around 33 seconds to load. My manager asked me to check if the databases is indexed properly or maybe a binary data is being retrieved from the database causing the slow response. I instead scan the code before going to the database and replaced a brute force sorting code block with Quick Sort. The macro now loads instantly
- Animating the algorithms
Solutions
- I took time to learn the algorithms before starting the project. Resources like geeksforgeeks.org helped a lot.
- I replaced most of the loops of the algorithms with setInterval to delay the execution of each step while manipulating the dom elements.
Ticketr
Bug tracking software for a team of developers. I needed a bug tracking application for my projects so I created my own.
Difficulties
- Multiple forms for manipulating a ticket
- Separate library for Data Access Layer
- Database Versions/Migrations
- Database data integrity
Solutions
- I used Angular's reactive forms to validate each complicated form of a ticket.
- I used Entity Framework Code First approach to manage my Data Access layer and keep track of database migrations.
- To keep the data consistent, I applied a combination of Unit of Work and Repository Design Patterns on my Data Access Layer.
- I also used Decorator design pattern to add paging properties on .NET Core's List class. This helps me page the tickets on the Front-end.