The designers at Rayzist Photomask used to have an old panel that would perform various actions such as talking to Sage 100 to create and edit an order, having shipping details. It had an automation that would take the an artwork less than 14″ x 40″ and turn it into a print file. This print file will add the requested quantity for the artwork to be printed. So, if it’s 20, then it will try to fit in 20 in one sheet. If it’s too large of an artwork, then it will mention that on the header. The header contains the quantity, number of pages, type of film to be print this on, and some more details. It was perfect as it allowed both designers and customers to have the latest information, and to communicate in there!
However, due to the progression of technology, some features were closed off such as the communication between Sage and the old panel. Illustrator’s updates made the automation unstable at times. This panel was also being hosted on a local virtual machine which was a recipe for disaster. Instead of dealing with these problems, all customers were told to communicate via email and request orders by there, too. It was a hassle as past orders were now lost due to email threading or a swamp of new emails by the same customer… the situation was not ideal…
The first solution to this problem was by creating an online form. Although this was done back in 2021, it had its bugs. I worked on making a better form using WS Forms back in 2023, resulting with 4 forms to determine the different types of orders that they dealt with. After graduating from college and becoming a full-time, I offered to recreate the panel with newer technology.
The first thing was by simplifying the forms. We ended up having two forms. “But Jose, there were 4 forms to determine its category. How about that?”, you might wonder. Well, the artist KNOWS already what the category is, but the customer doesn’t. So, the second step was to create a simple front-end table to tell the customers what they previously submitted. I followed a blog post in how to do that, but I didn’t like the fact that I was referencing another plugin’s code. So, the next step was to refine the customer’s panel and use MetaBox to turn WS Form submissions into a Custom Post Type. Wasn’t too hard as that has been integrated into WS Forms PRO! Finally, I wrote a simple logic to determine what category their order was in. Not too difficult.
Now it was time to work on the artist’s panel… this one was and still is challenging. The main reason they wanted a panel was due to the illustrator automation. Now, the developer who worked on it was a wizard and I think is working for Google or the government. Nevertheless, I had to dissect their logic. Took a while to find it from all the mumbo jumbo due to it residing into a PHP MVC Framework – Laminas, I think? Plus with a bunch of extra code. Instead of turning it into JS or any other language, I kept it as PHP. I only took out the important pieces into its own small project, used Composer’s Autoload PSR-4, and done! (This took me weeks…) All of this residing in a Window’s machine. I tested a bit, and it worked! Manually. Okay… well, it is a POST request after all, so I had to check for required query parameters and then return something.
Okay, now to the actual panel. Thanks to ChatGPT and Codex, I was able to get this panel done within a month or two. The looks of it did not matter at all, but rather having a proof of concept was needed ASAP including the means of communicating to the PHP server to automate a submitted artwork. All of this was done using NextJS on the Window’s machine. We used a WordPress plugin for authentication from the panel to WP. During our first version, it was a straight 1 to 1 communication from WP to Panel, and vice-versa. This caused it to be incredibly slow. So one of the problems I faced was being able to mount the correct drive from the network and opening the AI file. Thankfully to the former wizard, there was a shell script which helped me initiate this solution. I had to change a few things. I created a Daemon for the artist using a
Moreover, I didn’t like the fact that the panel was residing in Windows.. I didn’t like it because I was using Apache then had to forward proxy the app and the PHP server, and I wanted to user Docker.
After the proof-of-concept release, I made a migration to spin up a new Linux VM and install Docker in it to host any applications that we may have. At first it was just Nginx Proxy Manager, NextJS, and MariaDB. The N.P.M. was used to reverse proxy from the artist’s computer into the NextJS container. By creating a subdomain to our main domain, then reserving our IP to our VM and using that same IP to point to our GoDaddy’s DNS as an A-Record, artist’s were able to access the panel. Eventually we added N8N as a container to use as a means of communication from our internal panel’s DB to WordPress. Also, it helped making cron jobs much easier any any external API calls such as the Sage 100 communication to check the tracking details! Oh yeah, I am bringing sexy back.
As we continue with development, there are more and more new features to add, maintain, and fix. The UI is starting to matter as well, as there is a specific “no-distraction” flow that the artists are demanding. Features to help me with observability because Docker in CLI can be a little blind. So long as I am with Rayzist Photomask, I probably won’t be finishing this project any time soon… unless if some other exciting project comes up.
It’s has been a fun experience. I worked very closely with the artists, got feedback by them and my bosses, and used ChatGPT sparingly (though I have to review and refine its code most of the times). Doing this as a solo developer was painful, yet rewarding. One thing I wish I could have done was to learn the languages I was using as a whole, but I guess it’s not too late.