### **Tech stack**

1. PHP - Laravel

2. CSS - Tailwind CSS

3. JavaScript - jQuery

4. DBMS - PostgreSQL

5. Websocket

### **Role**

I was the tech lead who define all the project requirements and manage the server.

### Challenge

At 25th Jan 2022, we launch our auction system for Trans Retail (subsidiary of CT Corp and owner of Trans Corp, Transmart, etc) for event called Retail Cluster Annual Business Meeting 2022.

There are two goals of this project, those are:\
\
**Attendance**

1. We need an attendance system that will be used by the event participants, the summary will be displayed on the panel.

2. VIP attendees should login even without type a password nor send the details to their account (phone number or email).

3. On-site attendees should scan a barcode that will be direct them to the website then login to state presence.

4. Online attendees can visit the website directly and login in order to state their presence.

\
**Auction**

1. Auction system that can handle more than 300 users who will bid several items concurrently.

2. Every auction items can have their own schedule.

\
There is only 7 days to work this project, they will use this system on 25 Jan 2022.

### **Solution**

Before the event start, we sent an email to participants, so they can register their account to access the auctino system.

At the time this project released, the Covid protocol in Indonesia is still pretty strict. Therefore, we will optimize all the manual processes can be done by using our own phone.

For attendances, all participant could access the web using domain name and use their account to access the website.

For the C-level, they just need to scan the barcode that was provided by the site team, and automatically logged in to system. This can be done because every barcode is specifc to a person.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FefnEPsIslWNmGib4oaghAxToJw83%2F9A1xlmavijgfzcUM9OY1%2F543aeaa4-a23f-485a-a41d-cbfb4083a3f4.png?alt=media&token=68c61a8a-37bf-48f3-a3fa-1aab434db5cd","id":"543aeaa4-a23f-485a-a41d-cbfb4083a3f4","width":375,"height":667,"filename":"screencapture-transmart-test-users-84588c79-1a54-4fc2-a282-87cb70669956-code-2023-07-30-06_33_28.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FefnEPsIslWNmGib4oaghAxToJw83%2F9A1xlmavijgfzcUM9OY1%2Fbd19ef01-9591-4b12-95e0-e80fcc3e90db.png?alt=media&token=16625de7-b110-4c71-b16f-77e9b2d5774d","id":"bd19ef01-9591-4b12-95e0-e80fcc3e90db","width":1565,"height":866,"filename":"screencapture-transmart-test-users-84588c79-1a54-4fc2-a282-87cb70669956-code-2023-07-30-06_33_40.png","type":"image/png","caption":"","border":false}]}
```

Since the auction system was real-time, we use web socket to achieve this functionality. The server had plenty capacity of RAM, so we sure that the website won't crash.

Before the auction start, we provide administrator and site team functionality to set the items that will be displayed at the auction time. They will have to upload the image, define the title, price, description, and start-due date of the auction item.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FefnEPsIslWNmGib4oaghAxToJw83%2F9A1xlmavijgfzcUM9OY1%2F6fb4bfed-2d11-4bdc-be58-c79ca30d9719.png?alt=media&token=20b4a585-a796-4703-8e33-7f7f4fd23106","id":"6fb4bfed-2d11-4bdc-be58-c79ca30d9719","width":1920,"height":923,"filename":"screencapture-transmart-test-2023-07-30-05_53_35.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FefnEPsIslWNmGib4oaghAxToJw83%2F9A1xlmavijgfzcUM9OY1%2Fc9827040-6426-4260-9244-8e4d7d90fca5.png?alt=media&token=c3ddeeb5-a5b8-451a-8f2d-c4b81188b957","id":"c9827040-6426-4260-9244-8e4d7d90fca5","width":375,"height":667,"filename":"screencapture-transmart-test-2023-07-30-05_55_12.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FefnEPsIslWNmGib4oaghAxToJw83%2F9A1xlmavijgfzcUM9OY1%2F16fb7ff2-f7a9-4a35-a570-a12cf9c77622.png?alt=media&token=b99ee2df-2502-444f-a2f1-88e356289075","id":"16fb7ff2-f7a9-4a35-a570-a12cf9c77622","width":375,"height":1173,"filename":"screencapture-transmart-test-home-2023-07-30-06_18_57.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FefnEPsIslWNmGib4oaghAxToJw83%2F9A1xlmavijgfzcUM9OY1%2F67d6a4f7-de81-4550-ab0b-912cffb6943d.png?alt=media&token=7be5d2b8-3cb1-4de6-99a7-7d83cff33014","id":"67d6a4f7-de81-4550-ab0b-912cffb6943d","width":1920,"height":1923,"filename":"screencapture-transmart-test-home-2023-07-30-06_19_13.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FefnEPsIslWNmGib4oaghAxToJw83%2F9A1xlmavijgfzcUM9OY1%2F49891b71-0cff-409b-9d46-3964a934ff1c.png?alt=media&token=8bd80fb8-3f39-4bb4-9a6a-c50870497123","id":"49891b71-0cff-409b-9d46-3964a934ff1c","width":375,"height":884,"filename":"screencapture-transmart-test-auction-items-2023-07-30-06_21_25.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FefnEPsIslWNmGib4oaghAxToJw83%2F9A1xlmavijgfzcUM9OY1%2F15c48cb5-b7a8-4080-9d9b-08ea94869a39.png?alt=media&token=90875bdd-803b-4da9-a455-e1408fc274bc","id":"15c48cb5-b7a8-4080-9d9b-08ea94869a39","width":1920,"height":2226,"filename":"screencapture-transmart-test-auction-items-2023-07-30-06_24_26.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FefnEPsIslWNmGib4oaghAxToJw83%2F9A1xlmavijgfzcUM9OY1%2F92acde37-8600-4e74-94e3-9df895857432.png?alt=media&token=c2009072-3e86-4ff5-b85e-e5096aa19978","id":"92acde37-8600-4e74-94e3-9df895857432","width":375,"height":6603,"filename":"screencapture-transmart-test-auction-items-2023-07-30-06_24_40.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FefnEPsIslWNmGib4oaghAxToJw83%2F9A1xlmavijgfzcUM9OY1%2Fa83ab02b-b2e1-4ad0-8fc3-050ebf73809c.png?alt=media&token=4b3041a8-8a79-4dd6-a9b0-ba3a9e126909","id":"a83ab02b-b2e1-4ad0-8fc3-050ebf73809c","width":375,"height":1877,"filename":"screencapture-transmart-test-auction-items-6f056968-4a80-4713-a210-5726198594ad-2023-07-30-06_25_03.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FefnEPsIslWNmGib4oaghAxToJw83%2F9A1xlmavijgfzcUM9OY1%2Ffc073676-4bb3-4cdf-9f70-5287745ddc88.png?alt=media&token=1243138d-cdee-4802-8e3f-2452359885d4","id":"fc073676-4bb3-4cdf-9f70-5287745ddc88","width":375,"height":1877,"filename":"screencapture-transmart-test-auction-items-6f056968-4a80-4713-a210-5726198594ad-2023-07-30-06_30_00.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FefnEPsIslWNmGib4oaghAxToJw83%2F9A1xlmavijgfzcUM9OY1%2F7fb3eede-4da0-4781-8a07-ba46cda15bcd.png?alt=media&token=114f1a17-25a8-4dc5-bcce-28304cf241db","id":"7fb3eede-4da0-4781-8a07-ba46cda15bcd","width":1920,"height":1184,"filename":"screencapture-transmart-test-auction-items-6f056968-4a80-4713-a210-5726198594ad-2023-07-30-06_30_13.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FefnEPsIslWNmGib4oaghAxToJw83%2F9A1xlmavijgfzcUM9OY1%2F914f4a13-9ee1-4246-9e2a-6a6d876878d5.png?alt=media&token=d2ed7108-2654-460a-b107-365a2e7079ea","id":"914f4a13-9ee1-4246-9e2a-6a6d876878d5","width":375,"height":1808,"filename":"screencapture-transmart-test-auction-items-6f056968-4a80-4713-a210-5726198594ad-2023-07-30-06_30_40.png","type":"image/png","caption":"","border":false}]}
```

This website has responsive design, it has pretty good UI and UX on the phone or mobile. The user can easily bid on the item, and to prevent someone just spam bids, we add throttle to make sure they only able to bid once other people already bid.

Every winner will be contacted by the site team to process the payment and delivery of the item.

This project has small amount of time to work, and we successfully execute it!

Trans Retail Auction System

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FefnEPsIslWNmGib4oaghAxToJw83%2FAT9KZDuZSitynH2aYR3i%2F86906f1d-0b4e-4591-aa78-f5eb8a590c22.jpg?alt=media&token=be03107a-e1c0-4a98-a496-79983928e660","id":"86906f1d-0b4e-4591-aa78-f5eb8a590c22","width":1919,"height":926,"filename":"YPLI - Landing Page - 1.jpg","type":"image/jpeg","caption":"Welcome to YPLI Pet Shop and Clinic!","border":false}]}
```

### **Tech stack**

1. PHP - Laravel

2. CSS - Tailwind CSS

3. JavaScript - jQuery

4. DBMS - MySQL

### **Role**

I was the tech lead who define all the project requirements and manage the server.

### **Challenge**

This project has several phase, and this one is the landing page phase.

At the time, YPLI does not have their own landing page, so when the customer open the website, they will directed to the login page. Because of this, they do not have place to inform their customer for FAQ, and lots of them ask through the chat. This activity will cause an inefficient process communication to the customer.

YPLI already has their own site, therefore we will have to add this page to the existing repository.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FefnEPsIslWNmGib4oaghAxToJw83%2FAT9KZDuZSitynH2aYR3i%2F7ceec1da-2756-402f-b593-f58362083457.png?alt=media&token=41847442-19b8-41e3-8005-0062679d229d","id":"7ceec1da-2756-402f-b593-f58362083457","width":1920,"height":872,"filename":"screencapture-ypli-co-id-login-2023-06-20-16_48_47.png","type":"image/png","caption":"Landing page automatically redirected to login page.","border":false}]}
```

### **Solution**

We continue the existing repository code, which already use Laravel 8. But since we will add custom designed page, we won't use the existing Bootstrap template because the load is pretty heavy, therefore we will use Tailwind which already included the purge function, the size of the CSS file will relatively small.

We have a teammate named Bagus, he is the designer of this project. I implemented the website based on his design, pixel-perfectly. For server, we will continue using the existing server.

Based on problems defined above, and to avoid unnecessary administration task, such as reply to the same customer's question over and over again, we build dedicated page for the FAQ. The administration will manage it using Contentful as the CMS.

Other information that included in this landing page are:

1. Promotion / Event

2. Services

3. Branch location

4. FAQ

5. Contact us for email

6. About us, the story behind YPLI

This project will have update in the future, but I will separate it into another project since this phase is done. Below is the result of work for the landing page.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FefnEPsIslWNmGib4oaghAxToJw83%2FAT9KZDuZSitynH2aYR3i%2F38868376-25ab-47d9-9b41-07b005be6139.png?alt=media&token=08749a54-9cf8-44d9-b5f6-48853516ccfd","id":"38868376-25ab-47d9-9b41-07b005be6139","width":1920,"height":2866,"filename":"screencapture-ypli-co-id-services-2023-06-20-16_44_01.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FefnEPsIslWNmGib4oaghAxToJw83%2FAT9KZDuZSitynH2aYR3i%2Fad63a18b-becc-44a9-9375-9eef051e2ac7.png?alt=media&token=71259fdd-ea73-4d2a-9278-61d229f7fce6","id":"ad63a18b-becc-44a9-9375-9eef051e2ac7","width":1920,"height":1710,"filename":"screencapture-ypli-co-id-faq-2023-06-20-16_43_34.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FefnEPsIslWNmGib4oaghAxToJw83%2FAT9KZDuZSitynH2aYR3i%2Facbbb71a-035d-4bba-a2f5-b76fb9b183e4.png?alt=media&token=9baddbff-bfe3-441d-a3e1-f682a532c5c5","id":"acbbb71a-035d-4bba-a2f5-b76fb9b183e4","width":1920,"height":1332,"filename":"screencapture-ypli-co-id-contact-us-2023-06-20-16_43_04.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FefnEPsIslWNmGib4oaghAxToJw83%2FAT9KZDuZSitynH2aYR3i%2Fb31e4af5-d39e-4d86-837b-3e47bdda1191.png?alt=media&token=032cb0ce-8462-4b2e-b1e4-59b56b1ed86a","id":"b31e4af5-d39e-4d86-837b-3e47bdda1191","width":1920,"height":1332,"filename":"screencapture-ypli-co-id-contact-us-2023-06-20-16_42_57.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FefnEPsIslWNmGib4oaghAxToJw83%2FAT9KZDuZSitynH2aYR3i%2F006397f1-ac87-4688-9463-6f4f878d07bc.png?alt=media&token=a0d49280-a991-4055-acc5-ecc4dd02ca81","id":"006397f1-ac87-4688-9463-6f4f878d07bc","width":1920,"height":3811,"filename":"screencapture-ypli-co-id-about-us-2023-06-20-16_42_08.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FefnEPsIslWNmGib4oaghAxToJw83%2FAT9KZDuZSitynH2aYR3i%2Fb1413ceb-35cb-41a2-abea-ad896114bac8.png?alt=media&token=84938dc1-604c-4d4b-9a61-2666dad5ad53","id":"b1413ceb-35cb-41a2-abea-ad896114bac8","width":1920,"height":5459,"filename":"screencapture-ypli-co-id-2023-06-20-16_38_20.png","type":"image/png","caption":"","border":false}]}
```

YPLI - Pet Shop and Clinic System

Full-Stack Developer

Previously, we use email to pass information between employees, such as meeting schedule, company announcements, etc. But the downside was employee rarely check their email on their phone and sometimes miss the notification.

Therefore, we used WhatsApp third party API, and send the message to their WhatsApp account.

Notification System

Rekayasa Engineering employees are Moslem, therefore we want to give notification if prayer time approaching.

Web-based Adhan Reminder

Rekayasa Engineering have a high usability meeting room, but there is always collision between the schedule. Therefore, to prevent the schedule collision, we build an event, meeting room, and vehicle application in order to make ease of book a meeting room, easier way to check participant schedule, and ease to book a vehicle for outside office activity.

Event, Meeting Room, Vehicle Management System

Optimize business processes, increase the data integration between entities, and bring more clarity to the system of pet shop and clinic.

Since Covid-19 virus spread across the world, we cannot touch a fingerprint device that used as an attendance system. Therefore we develop a web application to do daily attendance.

Attendance System

This is one of my earlier project. I work solo for this project, from design the template and implement in HTML friendly that will be rendered in every email client.

Creating an HTML email template is a pain in the bum. The different email clients (Google Mail, Outlook) will display different results. On the other hand, it is critical to display the email correctly to the audience. Therefore, this template will show consistent results in every email client.

Cross Email Client Template

Rekayasa Engineering employees should fill RTW (return to work) assessment form to prevent high-possibilities employees spread COVID-19 before they are allowed to enter the office environment.

This application will pass information to the key person that will be responsible to make sure there is no case of COVID-19 in the office.

Return to Work

There's a new born agency in Boston called Spectrabyte Studio. Which makes the difference between Spectrabyte and its competitors is the subscription method.

In this project, I implemented a design created by Septiandika Pratama using Laravel.

Landing Page for Spectrabyte Studio

Rekayasa Engineering is an engineering company, and has pretty good Health, Safety, and Environement department that support good employee activity. Therefore, since the company had a yearly plan for the employee activity, employee should report their progress on this application.

iSAP (Individual Safety Action Plan)

Track proposal and project progress and make a system as trusted source of proposal information.

e-marketing

Rekayasa Engineering is an engineering company, so every action should be guaranteed safety. The employee must observe their work environment and write a BBS card on the system if there’s a safety policy violation.

Behavior Based-Safety (BBS) System

There's a Masjid in Cinere, Indonesia, called Wihdatul Ummah. This masjid community wants to bring advancement to the masjid donation management, for example donation, infaq, dzakat, and zakat. Also, they want to bring the transparency about the cash flow that can be accessed 24 hours by the congregation.

Therefore, we create a landing page and a donation app management system that integrated to QRIS payment.

Masjid Wihdatul Ummah Landing Page and Donation App

Rekayasa Engineering ran a GCG (Good Corporate Governance) rules. Therefore, if a violation happens, every employee should be able to report the incident anonymously to the audit team.

Whistle Blowing System

Develop internal application for Fast Lab Tech to run the medical services business process, such as PCR kit order, provide consultation media between patient and registered nurse, and file claim to the insurance company.

Fast Lab Tech Portal

A platform for freelance engineers to seek a job posted by Rekayasa Engineering.

Co-Engineer

Every year, Rekayasa Engineering will celebrate the anniversary of the company day, and there will always a raffle event, and every employee without a doubt will join this event.

Instead of using random raffle application on the internet, and we have to always repeatedly input the employees information, we build the raffle application and make ease of data record about the winner, and the list of raffle items.

Raffle - Doorprize

Senior PHP Developer (Part-time)

My daily job is distributed based on the task defined on the GitHub issues, such as:

1. Integrate WordPress as the front end and Laravel as the back end to facilitate the patient ordering PCR kit and the administrator. 

2. Integrate the Laravel system with various API providers to support business processes. 

3. Implement WebSocket to enable real-time PCR patient consultation status.

Senior PHP Developer (Full-time)

My responsibilities in Rekayasa Engineering are:

1. Gather functional requirements from the client and then translate them into technical specifications.

2. Brainstorm the application concept to the team member, from creating a sitemap, user flow, wireframe, Lo-Fi user interface, and Hi-Fi user interface.

3. Plan the project timeline and deliverables.

4. Design the database concept based on the approved user interface.

5. Decide the tech stack during development.

6. Design back-end application flow and REST API endpoint.

7. Code the application and participate in the development process.

8. Check the quality of pixel-perfect design implementation of front-end and mobile applications.

9. Review implemented back-end process coded by sub-ordinate.

10. Integrate developed apps with open-source applications and other nonhomegrown applications.

11. Optimize the webserver capacity using a load balancer.

Rizaldy Wirawan

2023