Skip to content
Beadli is a web application that allows users to create, share, and browse pixel designs intended for fuse bead crafting.
JavaScript CSS HTML
Branch: master
Clone or download
Pull request Compare This branch is even with SamTaub:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Beadli Logo


Make interesting designs with fuse beads.

Beadli is a web application that allows users to create, share, and browse pixel designs intended for fuse bead crafting.

Getting Started

Create an account, or use our demo account!


Password: beadlidemo

Login Page

After logging in, you can click "Create" on the navbar to begin creating a design. Click on a color to paint on the canvas. Once you are happy with your design, you can save it and view it on your dashboard.

Creating a Design

In addition to the color picker, the create page has other useful tools:

Eraser: Remove beads by clicking on them with the eraser tool selected. 3D: View your design in 3D to see what it would look like as beads on a pegboard. Undo: Can undo your last 25 actions. Trash: Clears the canvas, but is not undoable.

Create Page Toolbar

After saving your design, you can view details by clicking on it. This will show you how many beads you need for your design, as well as the title, description, difficulty, and category information. You can also add it to your favorites or share it to Facebook from this page.

Design Detail Page

Designs can be edited by clicking the "edit" button (the ruler and pencil icon). Your changes can be saved from the create page.

Editing a Design

Designs can be deleted from your drafts page by clicking the "trash" button.

Deleting a Design

Click "Browse" on the navbar to see designs other users have made. You can narrow your browse results by category and difficulty, and sort them oldest to newest or vice versa.

Browse Page

You can add designs to your favorites by clicking the heart button. You can unfavorite a design by clicking the heart button again. Your favorites can be viewed from your dashboard page.

Favoriting a Design

You can view all designs a specific user has made by clicking on their username from the design detail page.

User Detail Page

Starting the app locally

Start by installing front and backend dependencies. While in this directory, run the following command:

npm install

This should install node modules within the server and the client folder.

After both installations complete, run the following command in your terminal:

npm start

Your app should now be running on http://localhost:3000. The Express server should intercept any AJAX requests from the client.


This app uses React to handle the view and functionality, Express and Node for server-side API routing, and MongoDB with Mongoose for data storage. Passport.js authenticates user login credentials. This application follows the MVC design pattern.

Technologies used: MongoDB, Mongoose, Express, React, Node, Passport.js, Bitmap.js, JavaScript, Bootstrap, CSS3, and HTML5.




You can’t perform that action at this time.