Week 3 — Shop & Product Detail pages
Over the third week of building Treazurex I focused on the product-facing pages: the Shop page and the Product Details page. These are the two screens most users interact with, so getting layout, information hierarchy and interactions right was my main priority.
What I did
- Built the Shop listing: product cards, basic filters, and the grid/list layout.
- Implemented the Product Details page: images, descriptions, price, and buy/add-to-wishlist actions.
- Fixed several small bugs that appeared while connecting the pages (routing edge-cases, broken links, and a couple of state bugs).
What took the most time
- Design & polish. Making the pages look professional and feel cohesive took more time than the core functionality. I spent a fair amount of time exploring professional e-commerce sites and component libraries for layout patterns, spacing, and component behavior. Translating those ideas into my UI (cards, image galleries, action buttons) required several iterations.
- UX decisions. Small interaction choices — where to place the CTA, how many images to show, what product metadata to show up front — required testing and tweaks.
Status at the end of Week 3
- Core functionality for listing and viewing products was in place, but the visual polish and final UX tweaks were still a work in progress.
Feedback welcome
- I’m open to any suggestions on layout, component choices, or UX patterns I should try next — especially proven patterns from modern e-commerce sites or lightweight component libraries.
Week 4 — Containerization, Deployment & Continuous Deployment
In week 4 I shifted focus from UI work to deployment and operations. The aim was to make the app easy to run locally and to set up an automated deployment pipeline so updates get released reliably.
What I did
-
Dockerised the application — created Dockerfiles and a
docker-compose.ymlto orchestrate services for local development. This made it simple to run the whole stack with a single command and to keep environment parity between my machine and servers. - Deployed to Vercel — I chose Vercel to host the website and connected the repo so changes in the main branch automatically trigger deployments. This introduced the concept of continuous deployment (CD) into the project.
- Tested the CD flow — pushed a few UI fixes and observed automatic builds and deployments. I fixed configuration issues (env variables, build commands) to make the flow stable.
Challenges & trade-offs
- Local vs cloud environment differences. Some environment variables and file paths behaved differently locally vs Vercel — I had to centralize configuration and avoid hard-coded values.
Lessons learned
- Treat Docker and compose as both a developer convenience and a stepping stone to production — they make onboarding and testing much faster.
- Keep secrets and environment configuration out of the repo; use Vercel’s environment settings (or a secrets manager) for production values.
Advices/Suggestions
- I would definitely be grateful for tips on hosting any server side parts (if I should split backend from frontend, providers you’ve had good experience with, or approaches for background jobs).
Week 5 — User Areas, Orders & Payments
During week 5 I moved back toward user-facing features and finishing flows that let customers manage their accounts and purchases.
What I built
- User Profile page — editable profile information and a central place for account settings.
- Orders section — order history, order details view, and basic order status indicators.
- Wishlist — users can save items for later and move them to the cart.
- Address book — add, edit, and set default shipping addresses.
- Payment methods — UI for saving and selecting payment methods (mocked for now, with room to integrate a real gateway later).
Polish & UX work
- The overall look and user experience still didn’t feel right, so I made additional layout and interaction tweaks: spacing adjustments and clearer CTAs.
- I focused on making forms easier to use (inline validation, clearer error messages).
Open questions & things I’d appreciate feedback on
- Checkout UX: any must-have patterns I should adopt (one-page checkout vs multi-step)?
- Payment integration: recommendations for easy-to-integrate gateways (low fees and good dev UX) or sandbox/testing tips.
- Profile & address management: what extra fields or behaviours have you found useful in e-commerce address forms (e.g., address autocomplete, nickname for addresses)?
What I’ll be working on next
-
I’ll take this week off to handle other matters and recharge. After the break I plan to implement:
- Sorting mechanism for the shop (price, popularity, newest, rating).
- Product queries by category, collection, and accessory type so users can filter and browse more naturally.
- Refinements to product cards and listing performance (lazy loading images, smaller payloads).
Please find the important links below
Top comments (0)