Frameboi is an open-source profile picture frame generator, built with React and Gatsby, that lets users overlay customizable frames on uploaded photos and download the finished image. It was created by DSC NIT Rourkela for the HackNITR 4.0 hackathon and is available on GitHub.
What is Frameboi?
Frameboi is a web application for generating custom profile picture frames. Users choose a frame design from a range of shapes and colors, upload their own profile picture, and then download the composited result as a shareable image. The project is built on React and Gatsby, with React-Konva handling canvas drawing, and is styled using Tailwind CSS. The live version is hosted at frame.dscnitrourkela.org, and the source code is distributed under the MIT License.
What makes Frameboi stand out?
- Customizable frame editor — Pick from a wide range of shapes and colors to design a frame that fits your needs before uploading a photo.
- Photo upload and compositing — Upload a profile picture and have it merged with your chosen frame automatically.
- One-click download — After compositing, download the finished framed image and share it on social platforms.
- Real-time canvas rendering — React-Konva provides interactive canvas drawing, so frame changes appear instantly.
- Gatsby static site — The site is built as a static Gatsby site, enabling fast loads and easy deployment to Netlify or Cloudflare.
- Tailwind CSS UI — The interface is styled entirely with Tailwind utility classes, keeping the CSS consistent and maintainable.
- Open source and hackathon-ready — The MIT-licensed code is designed for events like HackNITR 4.0 and can be forked for other hackathons or festive campaigns.
Who is Frameboi for?
- Hackathon participants — Attendees of HackNITR 4.0 can create a personalized profile picture frame to show event participation and share it online.
- Event organizers — Developer Student Clubs or hackathon teams can reuse the codebase to produce branded frame generators for their own events.
- Open source contributors — Developers interested in React, Gatsby, React-Konva, or canvas-based projects can read the code, report issues, or submit pull requests.
What can you do with Frameboi?
- Design a custom frame — Use the shape and color options to build a frame that matches your style or an event's visual identity.
- Generate a profile picture — Upload your portrait photo, apply the frame, and download the result for use on social media or event badges.
- Launch your own generator — Fork the repository, adjust the frame options in the code, and deploy your own version for a different hackathon or festive occasion.
How does Frameboi work?
Frameboi's user flow is three steps: first, customize the frame by selecting shapes and colors; second, upload a profile picture; third, download the completed framed image. For local development, the repository requires Yarn. After installing dependencies with yarn install, run yarn develop to start the Gatsby development server, and use yarn add or yarn remove to manage packages.
Pros and cons
- Free and open source — The project is MIT licensed, so it can be used commercially or personally without cost.
- Modern stack — Uses React, Gatsby, Tailwind CSS, and React-Konva.
- Yarn dependency — The project strictly recommends Yarn over npm to avoid dependency conflicts, which may be an extra step for npm users.
Pricing
Frameboi is free to use. Since it is open source under the MIT License, there are no paid tiers or fees.
FAQ
Is Frameboi free?
Yes, Frameboi is completely free. It is open source and licensed under MIT, meaning you can use, modify, and distribute it without paying anything.
What technologies does Frameboi use?
Frameboi is built with React, React-Konva for canvas rendering, Gatsby for static site generation, and Tailwind CSS for styling. Deployment options include Netlify and Cloudflare, and the live site runs at frame.dscnitrourkela.org.
How do I run Frameboi locally?
You need Node.js, Yarn, and Git installed. Clone the repository, then run yarn install to install dependencies and yarn develop to start the development server. The project advises using Yarn rather than npm.
Can I contribute to Frameboi?
Yes, contributions are welcome. The project uses a fork-and-pull workflow: fork the repo, create a branch, commit changes, push, and submit a pull request. Please follow the Contributing Guidelines and Code of Conduct in the repository.
