How I Spent My Summer: Building whoami.page - Part 1
Remember those "How I Spent My Summer" essays from school? Well, here's my grown-up version: it involves a lot of coding, sweat (thanks, global warming!), and a tears (literally!).
And only if I knew what I was signing up for ! A rollercoaster ride through web development, PERSONAL GROWTH, and the birth of whoami.page.
The Spark of Inspiration
The idea hit me while sharing projects and a resume with a potential client. There had to be a better way to showcase who I really am professionally. That itch for a challenge, to push myself and create something cool, was irresistible.
That's how whoami.page was born, named after the Unix 'whoami' command. Clever, right? I thought so too! 😉 It's amazing how inspiration strikes from unexpected places.
Setting the Bar High: My Development Goals
Before diving into the design phase, I set some ambitious goals for this project:
- Leverage Next.js Server Actions extensively to build a more efficient, server-side driven application.
- Master the art of optimizing web pages for production, focusing on performance and user experience.
- Implement Tanstack Query for efficient data fetching and state management.
- Push the boundaries of my TypeScript skills to create a more robust, type-safe codebase.
These goals weren't just about building a product; they were about leveling up my skills as a developer.
From Inspiration to Design
Read.cv caught my eye with its simple, elegant design, proving professional networking doesn't have to be cluttered. Armed with Figma and inspired by sites like Mobbin, I dove into designing whoami.page.
The vision? A platform where you can:
- Create a dynamic, evolving professional profile.
- Share thoughts and ideas through microblogging.
- Showcase projects that truly represent your work.
- Connect with professionals in meaningful ways.
The Technical Challenge Begins
With designs taking shape, it was time to bring them to life. And then the real fun began! OBVOUSLY, I opted for my to-go favorite stack:
const techStack = {
frontend: 'NextJS',
language: 'TypeScript',
orm: 'Prisma',
styling: 'TailwindCSS',
database: 'PostgreSQL',
hosting: 'Vercel',
};The Next.js Server Actions Saga
My first major roadblock: Next.js server actions. Oh boy, was it a TASK! Note to self (and fellow developers): When docs say a feature is in alpha, believe them! more about it here.
There were moments of pure frustration, like spending hours debugging only to realize it was a quirk of how server actions handled state. But with each challenge overcome, my understanding deepened. It was a valuable lesson in working with cutting-edge technologies - exciting, but not without pitfalls.
The goal of using server actions extensively pushed me to rethink my approach to data fetching and state management. It was a steep learning curve, but the potential for improved performance and a more seamless user experience made it worth the effort.
The Road Ahead
As the first weeks of development closed, I had a basic structure in place. But this was just the beginning. The real challenges - implementing features, creating an intuitive UI, ensuring scalability - were still ahead.
As I closed my laptop that night, exhausted but satisfied, I realized this wasn't just a summer project anymore. It was the beginning of something bigger, a platform that could change how professionals connect and showcase their work.
Little did I know, the real trials were yet to come. From battles with TypeScript to late-night debugging sessions, the journey of building whoami.page was about to take me on a rollercoaster ride of tech, creativity, and personal growth.
But those stories? They'll have to wait for Part 2. Trust me, you won't want to miss it.
Ready to give it a shot ?
Curious about whoami.page? Why wait for Part 2 when you can explore it yourself?
🚀 Visit whoami.page now and be among the first to experience a new way of showcasing your professional journey!
- Don't forget to share your feedback. Your insights could shape the future of whoami.page!