A way to create physical signage for a business by uploading the company's logo. The app will use a 3rd party to 3D print or laser cut the sign.
- Upload a logo in SVG format
- Choose fabrication style (3d print, laser cut) and colors
- Place the order
- Job is sent to printer via API
- Reviewed TODO list
- Planning to resolve unknowns first with experiments, then will combine solutions and work on UI last.
- Set up SvelteKit project
- Created mockups in Balsamiq
- Testing svelte-file-dropzone to handle uploading files
- Figured out the drag-and-drop file upload. It uploads file and redirects to "designer" page.
- Figured out the OAuth flow with using Auth.js (using this guide). Routes are protected based on paths in
src/hooks.server.js
- Took a quick break to eat something
- Researched if vercel/og would work with Three.js/Threlte. I want user to be able to share previews on Twitter/Facebook etc. But it seems it would not work because Satori is a server-side thing and three.js is rendering client-side. So I will have to use pupeteer to render instead. Will leave it for later.
- Figured out how to integrate Prisma with Auth.js
- Getting closer to having all the unknowns figured out
- Figured out how to extend Prisma user with additional models based on user and set them in
event.localsso they can be used in the route'sload()function. - Created sitemap
- Started integrating solutions into main repo
- Continue to integrate solutions into main repo
- Setup Auth.js
- Setup Prisma
- Added logo model
- Figured how to redirect after sign in
- Build data fetching to
/logosand/logos/:id - Added logic to convert svg to data url (safer to use
<img>over{@html ...})
- Added drag'n'drop uploading of SVG using svelte-file-dropzone
- Added svgo to optimize SVG file
- Added resvg to get dimensions of SVG file
- Added Threlte to project
- Added logic to insert logo into DB
- Refactored logo query & create to a service
- Took 30 minute break
- Debugging issues with
SVGLoader. Turned out SVG was just offscreen
- Figured out how to rotate the SVG (it was upside down because in SVG-land y increases as you move downward)
- Added config rules for fabrication methods (3d-printing, laser-cutting and LED)
- Added logic to update logo (name, fabrication, color etc...)
- Added ability to change color and fabrication method.
- Next, I'll work on adding ordering and payment
Dinner break
Dinner break
- Added stripe-svelte and support for ApplePay, GooglePay and Link
- Added
Ordermodel to Prisma - Added logic to create unpaid order
- Added logic to make order paid from confirmation page and Stripe
payment_intent.succeededwebhook
- Debugged coding error with receiving Stripe webhook. I was using old SvelteKit syntax, doh.
- Added a slider to adjust depth of 3D model
- Solved issue with SVG spaces causing rendering issue. Switched to data urls with base64 encoding.
- Made some notes about landing page content.
- Starting working on UI.
- Added landing page
- Created layouts for marketing and app site
- Working on styling logo listing page
- Working on styling logo designer page
- Continued stlying designer page
- Added vertical slider for changing extrusion depth
- Back from sleep
- Reviewing todo list and prioritizing
- Fixed issue with zoom button
- Made fabrication selection a drop down
- Started looking into better textures
- Looked into improving texture with matcaps
- Added bevel to extrusion settings
- Added Fathom analytics
- Extracted Scene and Logo 3D code into components
- Added 3D view to Logo listing page
- Looking into weird flickering issue in Chrome Desktop, still haven't tracked down the issue. Works fine in FF and Chrome mobile.
- Cleaning up styling in preparation for a demo video
- Setup app to test app in dev mode with local mobile device (with SSL)
pnpm dev --host 0.0.0.0 --https
- Spent the last hour cleaning things up so I can record a demo video.
All done!!! and it works pretty well!