5 devlogs
7h 36m 46s
Building a βSwiss Army Knifeβ of Reconnaissance. If data exists publicly, this tool must find it.
π DEVLOG #4 - Building the Scanner Form Component
The scanner form is the heart of OwlEye - itβs literally the first thing users interact with. This session was dedicated to making it bulletproof: handling edge cases, providing great UX, and making it look absolutely fire.
Working on ScannerForm.tsx:*
This component needs to handle a lot of complexity while appearing simple to the user
Deep Dive: Domain Cleaning Logic:
Users will paste URLs in all sorts of formats. Our cleanDomain function handles them all:
| User Input | Cleaned Output |
|ββββββββββββββββ|ββββββββ|
| https://www.example.com/page | example.com |
| http://example.com | example.com |
| WWW.EXAMPLE.COM | example.com |
| example.com:8080 | example.com |
| example.com/path?query=1 | example.com |
| example.com | example.com |
0
Log in to leave a comment
π DEVLOG #4 - lets give him actual look
Working on globals.css - The Heart of Theming:
This is where I defined all the CSS custom properties that power the theme system. Using CSS variables means we can change the entire color scheme by just updating a few values:
/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
// components/Providers.tsx
0
Log in to leave a comment
π DEVLOG #3 - Setting Up the Layout & Global Styles
This session was all about creating the visual foundation for OwlEye. The layout and global styles define how every single page in the application looks and feels. I wanted to nail the cyberpunk aesthetic from day one, so I spent extra time perfecting the colors, fonts, and overall vibe.
In Next.js App Router, layout.tsx is the root wrapper for your entire application. Every page, every route, everything gets wrapped by this layout. Itβs crucial to get it right because changes here affect everything.
Hereβs what I set up:(refer img)
I experimented with several fonts before settling on JetBrains Mono. The alternatives I tried:
- Fira Code - Good but slightly too wide
- Source Code Pro - Classic but a bit boring
- IBM Plex Mono - Nice but not βhackerβ enough
- Cascadia Code - Windows-specific, not ideal for web
0
Log in to leave a comment
π DEVLOG #2 - Project Initialization
The research phase helped me understand the market gaps and define a clear vision. Without these two hours of planning, I would have built something mediocre instead of something exceptional.
After weighing and trying the options (React vs Vue vs Svelte, and different backend options), I decided on:
- Next.js 14 - Because I wanted to learn the new App Router, and it handles both frontend and API routes
- TypeScript - Because Iβm tired of βundefined is not a functionβ errors at 2am
- Tailwind CSS - Because writing custom CSS for every element is 2019 energy
- TanStack Query - Because managing 11 parallel API calls manually would be insane
0
Log in to leave a comment
π DEVLOG #1 - The Idea
Every great project starts with an idea. I was doing a CTF challenge and got frustrated with how ugly and scattered OSINT tools were. Thatβs when it hit me - why not build my own? One that actually looks good and combines everything in one place.
##idea
Dark cyberpunk theme (because weβre hackers, duh)
- Real-time scanning with visual feedback
-Make it open source so everyone can use it
###file structure
owleye-osint/
βββ src/
β βββ app/
β β βββ page.tsx # Main dashboard
β β βββ layout.tsx # Root layout
β β βββ providers.tsx # React Query provider
β β βββ globals.css # Cyberpunk styles
and then end getting error
0
Log in to leave a comment