ProtPilot

Today, I worked on the Saved Projects page. I designed the project cards with a layouts inspired by Python IDEs, including project names, local paths, running status, memory usage, CPU load, and security information.

I also added the search bar, register new project button, menu icons, and stop buttons. Most of the UI was designed by me using the same styles as the previous pages.

For the circular resource indicators, I found a reference online and used a similar design. The project information is still dummy data for now, so the resource values and controls are not connected to real processes yet.

Today!, I worked on the Active Ports page. While building it, I realiz that I could reuse the existing sidebar component instead of creating a new one just for this page.I connected the sidebar navigation using Next.js routing, so clicking on Active Ports now takes me to its own page. I also reused the existing dashboard styles and UI elements for the table instead of redesigning everything from scratch.

For now, I ve added dummy data to display port numbers, protocols, process names, PIDs, local addresses, uptime, and connection status. I also added a search field, TCP/UDP filters, and action icons to make the page feel more complete.

The Active Ports page is now in place.

Today, I finished building the main dashboard UI using Next.js and Tailwind CSS. I added summary cards, an Active Sockets table, and a Saved Projects section. I used Lucide React icons and dummy data to make the dashboard look more realistic. The UI is coming together nicely, and next I want to connect it to the backend to display real data from my PC.

I started working on the UI. First, I created a design idea for the app. Then, I decided on the sidebar feature’s and start implementing the sidebar using Tailwind CSS. I also installed Lucide React and added icons to make the navigations look better. The basic sidebar UI is now done, and next I want to work on the main dashboard.

I spent my first hour researching how Next.js and Electron work together. I set up the project, installed shadcn/ui and Electron, and explored different way s to turn PortPilot into a Windows .exe app. I haven’t started buildiing the main features yet, but I now have a clearer ideas of how to move forward.