The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
A colleague and I have been working on a management system for a co-working space that's opening soon.
One of the features we recently built is receipt printing for every session recorded in the system, including session duration, ordered items, applied discounts, and other relevant details.
Our first thought was to use 'window.print()' (for anyone unfamiliar, it's a built-in browser function). The problem was that it attempts to print the entire page, and creating a dedicated page just to display a receipt wasn't really practical especially during busy hours when staff need to move quickly.
After a bit of research, we ended up using 'react-to-print;.
The library provides a simple hook that lets you print a specific React component by passing its ref, while handling the rest behind the scenes. You can even keep the printable component hidden from the actual page.
The printing functionality itself wasn't the difficult part.
The real challenge was designing a reusable component that could work across multiple areas of the system: regular sessions, room bookings, standalone orders, and more.
Although it looks like nothing more than a simple "Print Receipt" button on the UI, there's a lot happening behind the scenes: validations, conditions, data transformations, and different rendering scenarios, to make it flexible enough to work everywhere.
The screenshots show the feature before and after the battle we had with it 😂
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Most websites tell you what a service does.
The good ones show you what it feels like to be inside it.
For Wilson's, the brief was to make invisible work visible.
Not through just copy. But through design as well!
Four steps in their process, the voice interview, the framework build, the intent signals, the outreach conversation, each needed a graphic that could communicate without a word of explanation. So I built four custom UI cards inside Framer from scratch.
Animated, brand-native, each one a small window into a real moment in the service.
No stock widgets. No imported assets.
Just the constraint that makes Framer work interesting: make it feel like a real product interface without actually being one.
Looks great!
Finishing up a new client project and preparing for handover.
The site was built with Next.js, TypeScript, TailwindCSS, Framer Motion and Sanity CMS, allowing the client to easily manage projects, photography, client logos and future content without relying on a developer for every update.
One of my favourite parts of client work is creating something that not only looks polished today, but gives the client a foundation they can continue to grow long after launch.
Challenges
View all
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
portfolioreview
The best portfolios tell a story, not just show a grid. Share yours for feedback.
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?