-
Technical:Full stack web development, Software developmentSoft Skills:Problem solving, Being a fast learner, Critical thinking, Time management, FlexibilityLanguage:Filipino and English
Please zoom in or out to fit the contents on your screen as you like :)
e-BUS: Electronic Barangay Unified System
Capstone Project
e-BUS is our capstone project where I was the full-stack
developer using the
MERN stack. e-BUS
is
a
web-based system that caters to multiple barangay systems in one platform. It aims to
computerize
the
way of handling barangay processes as well as accommodate the needs of residents. This web-based
system
contains a lot of features that will solve numerous existing problems being encountered by most
barangays, specifically the prolonged barangay processes. This is also a responsive Web
Application which is helpful for users using mobile phones.
Use cases of the system include Create
Barangays, Track
Document
Request,
Submit
Resident
Details, Request
Document/Event, Handle Records, Retrieve Resident Record, Encode Complaints, Create Resident Record,
Map
Residents, Submit Proposal, View Analytics, and Access Settings. It also exhibits other use cases
such
as
View Tables, Edit Details, Add Booking Item, Find Record, Batch Requests, Deploy Item, View List of
Users,
View List of Groups, Receive, Email, Create Barangay User, Create Scope Level Group, and Adjust
Scope
Level
Four-Phase Waterfall Diagram was used
in the
development
of
the system. It includes
Analysis, Design,
Implementation, and Testing. This means that the development follows the requirements and UI
from
the
previous phases and a series of tests were conducted to ensure its Functionality, Reliability,
Usability, Efficiency, Maintainability,Portability following ISO 9126.
Total Development Time:
4 Months
Made Using:
React.JS
Node.JS
Express.JS
MongoDB
Bootstrap
Mongoose
NodeMailer
Multer
GridFS
JSONWeBToken
swipe >>>
Sorting Algorithm Visualizer
Personal Project
Sorting Algorithm Visualizer is a project I made a month
after learning web development to hone my skills. It visualizes how certain sorting algorithms
work for people to understand its flow. The project was done using setTimeout and recursions to
get a smooth animation as loops will not give the desired output. The trickiest part in building
this project is making the animations.
You can sort up to 25 random numbers
using either bubble sort, insertion sort, selection sort, merge sort, or quick sort. The speed of
the animation can also be modified even during the animation.
Github Link:
Project Link:
Total Development Time:
3-4 Weeks
Made Using:
JavaScript
Bootstrap
The video demo below shows a bubble sort on 6 elements:
Path Finder Algorithm Visualizer
Personal Project
This is a project that I made as a way
to test my
skills in
data structures and algorithm. Same with the sorting algorithm visualizer, I used setTimeout()
and recursions to perform the animation properly. What the app does is simply find the shortest
path between two nodes using the user's desired algorithm. Walls can also be added to restrict
the overall path.
You can choose between Dijkstra's
Algorithm, A Star Algorithm, Breadth First Search, or Depth First Search. After each animation, the
user will have a freedom to play around with two
nodes without executing any animation (the app will immediately show the shortest path.)
Dijkstra’s Algorithm
Dijkstra’s algorithm is just a basic weighted algorithm that visits all the neighboring nodes.
The flow of visiting the neighbors is clockwise starting from the top. The top, bottom, left,
and right neighbors have a constant weight of 10, while horizontal neighbors from the node have
a weight of 14.
A* Algorithm
A* algorithm is an improved version of Dijkstra’s algorithm because of the heuristic value that
determines the distance between the end node and all the other nodes. In this way, the algorithm
will search towards the direction of the end node. The weight of the neighbors is the same as
with Dijkstra’s algorithm.
Breadth First Search
Breadth first search uses the queue concept in data structures. It is unweighted which does not
guarantee the shortest path. However, I managed to work it out to make it somehow weighted and
get the shortest path from it. This was done by counting each successful visit around the start
node that starts from the top and ends at the left side. In this way, a layer of nodes of the
same weight will be created and the farther the layer is from the start node, the higher its
weight would be. To get the shortest path, the process will be reversed. From the end node, the
neighbor with the lowest weight will be taken and considered as the current node, and the
process repeats until the start node has reached.
Depth First Search
Depth First Search uses the stack concept in data structures. It is unweighted and it is
difficult to find a way to get the shortest path from it because it searches in one direction
until it reaches the end before switching direction.
Github Link:
Project Link:
Total Development Time:
< 1 Month
Made Using:
JavaScript
Bootstrap
IskoLearning
IT Elective Project
IskoLearning is our project in a specific subject in the
University. I built this as a fullstack developer using js and firebase.
It is an online learning platform that can be used by students and professors of a certain
department. It is
inspired by other online learning platforms like Udemy, and by online question and answer/forum
websites. Its goal is to help professors organize their lessons remotely and assess their
students with the built-in exam system. The professors/instructors can put as many quizzes as
they want on their courses. Students will then answer these quizzes and the system will
autmatically compute the grades of the students enrolled after submitting their quiz.
I also made a version
of it
using the XAMPP software and used
MySQL database together with PHP language instead of firebase. This is a fully responsive web
app.
IskoLearning consists of:
online learning,
rating courses,
q&A/Forum system where students can ask questions and help each other,
flexibility for professors on the flow of the course,
examination system where profressors can create an exam throughout the course,
automatically computed exam results of each student,
organized view of students enrolled in a course , and
producing certificate at the end of the course. This made it also an LMS system.
Forum Page
This is the forum page where students can use their accounts to ask questions and collaborate
with each other. The students can like, comment, and post a question, and sort these questions
based on tags available.
Profile Page
In profile page, students can edit their profile info like name and username. Moreover, they can
also get to see their progress on the courses they are enrolled in and download the certificates
once finished.
Course Page
In course page, the students can enroll or resume in a particular course. Description about the
course is also located here which includes the number of videos and quizzes and their title. The
number of students enrolled and the prerequisite, if any, of the course can also be seen here.
Students can also give their review after completing the course for others to see.
Github Link (XAMPP Version):
Github Link (XAMPP Version):
Project Link:
Total Development Time:
< 3 Months
Made Using:
JavaScript
Bootstrap
Firebase
MySQL
PHP
XAMPP
swipe >>>
Tentaizu Puzzle Solver
Personal Project
Tentaizu (Celestial Map) is a Japanese
puzzle wherein the player locates the stars in a grid using the information from the cells. It
is like minesweeper, but in reverse, which is locating all the bombs and without randomness. In
case that the puzzle doesn't have any answer, it will throw an error.
The cell with n value has n numbers of
stars around it.
The solver only works with 7x7 grid with exactly 10 stars. If the puzzle is not valid, a message
should appear indicating its invalidity.
In the github repository, there are two ways to use the solver:
- - Use the one which is not in folder to test a single puzzle.
- - Use the one inside the folder which reads all the puzzles from the txt file. This solves all of the puzzles inside the file as long as the format is valid
Github Link:
Total Development Time:
< 1 Week
Made Using:
Python
The video demo below shows the solver in action:
Tentaizu Puzzle Solver Visualizer (Pygame)
Personal Project
This is the same as the Tentaizu puzzle
solver project that I created, but it is far better. I used Pygame this time to visualize how
the algorithm that I created works. This was done few days after watching tutorials on how to
use Pygame. It shows how backtracking works in order to get the desired
result or solution for the puzzle. In case that the puzzle is invalid and doesn't have any
answer, the application, after trying all the possible combinations, will show the puzzle with
no result (no stars).
I utilized python as an
object-oriented programming language to make my code a little cleaner. In this way, I separated the
main solver algortihm from the pygame implementation ones. The app chooses a random puzzle every
time from the file attached which consists of various puzzles.
Github Link:
Total Development Time:
< 2 Weeks
Made Using:
Python
Pygame
The video demo below shows the solver using Pygame:
Personalized Printing POS System
Personal Project
This project was done for a personalized printing business.
This was the first project that I made to practice my web development skills. Basically, it can
help the business to organize its transactions and products.
It is a simple POS system where the
user (admin) can input the number of orders, arrange
pick-ups, see
statistics, adding customer data, and organize the inventory.
Total Development Time:
1 Month
Made Using:
JavaScript
Bootstrap
PHP
MySQL
XAMPP
NFT Minting and Game Demo
Personal Project
It is a personal project on Rinkeby Network. It is
inspired
by some online NFT games wherein the main gameplay is clicking some buttons to attack the
enemy.
This was done after almost 2 weeks of studying how web3 works to test my skills in Solidity
and
Web3 applications. Every action here that requires changes in the smart contract needs metamask
confirmation. The stylings were made using tailwindCSS and this is also fully responsive.
Using Rinkeby, you can mint your
NFT
and use it to battle the boss. Minting for each wallet is limited to 3, but I just created 2
mintable characters for now. New boss can only be added by the developer (me) once the previous
boss
has been defeated. After every battle, the hp of the boss will be updated automatically without
refreshing the page. This was done using the event concept in Solidity. The NFTs are also available
on OpenSea Testnets. *Upon my last visit on the web app, the images failed to load, but they are
still present in Pinata Cloud.*
This is the content of the boss fight tab. Here, the boss is
on the right side, and the user's NFTs are on the left. The user can attack and after the
confirmation on Metamask, the boss will be damaged. In this demo, the boss will not attack the
user so that the NFT will not be useless.
Github Link:
Project Link:
Total Development Time:
< 2 Weeks
Made Using:
React.JS
Tailwind
Hardhat
Ethers
Pinata
Rinkeby Network