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.
Create an account, or use our demo account!
Email: demo@bead.li
Password: beadlidemo
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.
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.
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.
Designs can be edited by clicking the "edit" button (the ruler and pencil icon). Your changes can be saved from the create page.
Designs can be deleted from your drafts page by clicking the "trash" button.
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.
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.
You can view all designs a specific user has made by clicking on their username from the design detail page.
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.
- Deployed: http://bead.li
- Repository: https://github.com/SamTaub/project-3
- Chris Luber: http://chrisluber.com/
- Shelby Reyes: http://shelbyreyes.net/
- Kenny Whitebloom: http://kennywhitebloom.net/
- Sam Taub: https://www.samtaubweb.dev/
- Bitmap.js: http://althenia.net/notes/js_bitmap