🚀 Sprint 1: Building Piksta — What I Learned as a Developer

#radixui #storybook #docker #kubernetes

I just wrapped up my first sprint as a frontend developer working on Piksta, an exciting and modern photo-sharing app that combines sleek design with powerful features.

🛠️ The Team & Tools

Our team includes:

👨‍💻 5 Frontend Developers
🧑‍💻 2 Backend Developers
👩‍💼 1 Project Manager

We use Jira to manage our sprints and tasks. This helps us stay organized, track progress, and communicate better as a team.

🔁 CI/CD (Docker, Jenkins)

We use Docker to containerize the application, which helps keep the environment consistent across development and production. Jenkins automates our CI/CD pipeline, so every time we push code, the app gets tested, built, and deployed automatically.

☁️ Deployment (Kubernetes)

Our app is deployed with Kubernetes. It helps us manage scaling, updates, and reliability in a production environment.

🎯 The Goal

Our goal in Sprint 1 was to set up reusable components. My task was to create a custom language selector dropdown that looks clean, is easy to use, and works well on all screen sizes. It also had to support flags next to each language. Additionally, create a header and integrate a select box into the header.

🧠 What I Learned

1. Radix UI (React Primitives)

For the first time, I worked with @radix-ui, a low-level UI component library. It gives you accessibility and keyboard support out of the box, and you control how it looks.

Things I learned:

Using <RadixSelect.Root>, <RadixSelect.Trigger>, <RadixSelect.Content>, and <RadixSelect.Item>.
Handling onValueChange, onOpenChange, and state like open.
How <RadixSelect.Portal> helps render dropdowns outside the normal DOM tree (great for z-index issues!).

➡️ Why I liked it: It gives you full control over styles but handles accessibility for you. 💯

2. SCSS Modules

I used Select.module.scss to style the dropdown. SCSS modules helped me:

Keep styles scoped to the component.
Use nesting and variables (--light-100, --dark-300) for a clean and reusable design system.
Easily create variants like .small, .disabled, or [data-state="open"].