Made by Scrapi Developers
Your digital scrapbook awaits
As a group we wanted to make something fun and creative. We wanted social aspects without some of the pressures of other social media apps. A place where we could document memories or feelings in a visual format. This app is seen more as a self expression journal, allowing you the option to share with the Scrapi community . The direction we took for this was to make creative mood boards, we looked at other mood board sites and brainstormed how to combine creativity, self expression as well as having a social aspect. We wanted to take our own twist on it and give it a more personal touch. Websites like Canva and Figma didn’t have the option to save to a personal calendar to document your boards or share to a friends natively and apps like Facebook and Instagram focus mostly on social posts. We wanted the app to focus on the creative side of making mood boards by making a simple easy-to-use website. We thought this idea would provide a good balance between making a small working minimum viable product and allow for endless opportunities for expansion. As a user, each day, you can upload images from your device, add text and stickers, change your background colour and doodle on your mood board. You can then decide if you want to keep your board private or make it public to share with other users on the explore page.
The Team
Nelson Holtz
Nelson is a unicorn developer with a background in graphic…
design and a deep passion for storytelling across artistic disciplines. His creative journey spans prop-making, art facilitation, and performing as a circus artist—experiences that have enriched his approach to visual communication. Nelson transitioned into a software development to craft functional, meaningful websites for artists and creative projects. For Nelson, web development is more than just technical work—it’s a powerful medium for creating engaging, story-driven design.
Connie McLachlan
I’m a junior software developer with a background in…
creative and technical projects, shaped through independent learning, bootcamp training, and professional experience. I recently graduated from Northcoders, where I’ve developed skills in JavaScript, test-driven development, and collaborative, agile workflows. Coming from a background in game development and small business, I approach software challenges with both creativity and logical problem-solving. I enjoy crafting intuitive, user-focused interfaces and building tools that encourage self-expression and engagement.
Inna Liubomska
I’m a junior software developer with a strong interest in…
creative and technical problem-solving, developed through academic projects, boot camp training, and independent learning. I began coding while building a vocabulary tool for my university diploma, which inspired me to pursue a career in software development professionally. I recently completed the Northcoders Bootcamp, where I developed skills in JavaScript, test-driven development, and agile collaboration. I’m detail-oriented, self-motivated, and enjoy building tools that are both functional and meaningful. Outside of coding, I love baking with sourdough, reading, and learning new languages — hobbies that reflect my curiosity, creativity, and patience.
Leroy Jallow
I’m a junior software developer with a background in…
sports, education, and community-focused work, shaped through bootcamp training, hands-on experience, and a deep commitment to learning. I recently graduated from Northcoders, where I developed strong skills in JavaScript, full-stack development, test-driven methodologies, and agile team collaboration. With a foundation in sports, technology, education, and mentoring, I bring a unique perspective to software development combining creativity and problem-solving. I’m particularly passionate about building inclusive, accessible tools that supports creativity, education, and user empowerment.
Tech Stack
We used: React, Vite, react-router, konva, react-konva.js, react-konva-utils, use-image, firebase, cloudinary, uuid, fontfaceobserver Scrapi Tech Stack Frontend React Used to build the web interface with reusable, interactive components. Enables a modular structure suitable for complex UI like a drag-and-drop canvas. react-dom Handles rendering React components into the DOM. Vite A fast development server and bundler. Offers instant reloads and optimized builds, making development smoother. react-router-dom Handles client-side routing. Used to navigate between pages like home, profile, or board views. Canvas and Media Tools konva and react-konva Provides 2D canvas functionality within React. Used for drawing, dragging, resizing and rotating elements on the scrapbook canvas. react-konva-utils Extra utility functions for working with Konva nodes in React, such as detecting selections or snapping behavior. use-image A React hook to preload and render images efficiently in canvas elements, avoiding flickering or loading issues. Backend and Hosting Firebase Handles backend services: Authentication: Manages user login and signup. Firestore: A real-time NoSQL database for storing user data and boards. Storage: Used to upload and retrieve media files like images. Image Management @cloudinary/react Used for generating and uploading preview images of boards. Cloudinary hosts the images and delivers them via a fast CDN, with built-in compression options Utilities and Helpers uuid Generates unique IDs for elements, boards, and actions. Ensures consistent identification in the app and database. fontfaceobserver Detects when custom fonts are fully loaded before applying them. Prevents visual glitches or flashes of unstyled text. Development Tools @vitejs/plugin-react Vite plugin for React. Enables features like fast refresh and JSX support
Challenges Faced
Understanding how to integrate some of konva’s features into our react file. This was the first time we needed to merge conflicts and there was a learning curve for this.
Hosted on Netlify: https://scrapibook.netlify.app/