About this shop

Squishies, fidgets, slime, homemade bits, and mystery items. Each card shows the price and how many are in stock. Homemade things are made by hand, so they may look a little different from the photos. Email katie@tyneside.software to buy.

1. 01
   Put the shop on the live hackathon site. Katie’s pages were copied onto Tyneside-Software/hackathon-site so they serve at hackathon.tyneside.software/katie. A root katie.html sends /katie to the folder.
2. 02
   Homemade items show in stock or out of stock. Each homemade card got a stock label so you can see what is for sale.
3. 03
   Password Admin. A locked Admin page lets you change names, prices, photos, stock, and add or remove items. Admin is its own menu item; leaving it logs you out.
4. 04
   Pencil to pick pictures. On a phone the pencil opens the gallery. On a computer it opens picture files. You can add more than one photo per item.
5. 05
   Blue, baby blue, purple and pink background. The old white page became a swirl gradient. Light-mode panels are pink #f0c0e5. Rainbow bits are pastel in light mode and bright in dark mode.
6. 06
   Dark mode toggle. Top-left. Light mode: pastel rainbow, says Dark mode. Dark mode: bright rainbow, says Light mode.
7. 07
   Stock counts and a star burst. Admin sets how many of an item are in stock. Cards show the number. In-stock photos get an animated star burst. Squishies show stock labels too.
8. 08
   Reviews. Rate an item out of 5, write a description, optionally add a photo. Cards show the average, including half stars.
9. 09
   Product pages, like a mini Amazon. Tap a card for the full item: all pictures, share, reviews, and suggested products underneath. Item names are #72cefc. The title next to the heart is the same pinks as the heart.
10. 10
    Mystery and Fidgets. Two extra categories in the menu, with their own pages. Add items to them in Admin.
11. 11
    Built by Lewis, plus the legal bit. The top-right note says built by lewis. Scroll to the bottom for terms and conditions and lewis was here.
12. 12
    This About page. A running list of how the shop was made, in the shop’s own theme. New work gets a new step.
13. 13
    Bubbly title like the heart. fidget squish uses a round font and stacked pinks: light pink on top, middle pink in the middle, dark pink underneath — same idea as the heart beside it.
14. 14
    Manager cap on the Admin picture. The Admin welcome picture still has the character eating the dumpling, now wearing a black MANAGER cap.
15. 15
    The title bobs. fidget squish and Katie’s shop are stuck together, same round font, both slanted, and they bob up and down.
16. 16
    Fixed the Admin cap picture. The picture is taller so the MANAGER cap sits on the head above the eyes. The eyes stay above the mouth, and he is still eating the dumpling.
17. 17
    The heart bobs with the title. The heart is attached to the fidget squish sign, so it bobs up and down with Katie’s shop too.
18. 18
    Out of stock message on the item page. Clicking an item opens it as usual. The “not in stock” note only appears when there are 0 left.
19. 19
    Admin password is not sitting in the page as plain text. The Admin check uses a hash, so opening the JavaScript file does not show the password itself.
20. 20
    Dropped the video slide line. The intro no longer says to slide the photos to get to the video.
21. 21
    Admin stock drives every page. The number you set in Admin is what cards and item pages both use, so an item cannot be in stock on one page and out of stock on another.
22. 22
    Mobile layout tidy-up. Nav, cards and dark mode were overflowing or cramped on phones. Spacing and wrapping are tighter so nothing runs off the screen.
23. 23
    What Katie sells, on About. The About page now has a short blurb at the top about squishies, fidgets, slime, homemade and mystery items, plus how to buy.
24. 24
    Share actually copies or shares the link. On phones it uses the share sheet. On a computer it copies the item link and the button says Link copied. If that is blocked, a copy box still appears.
25. 25
    New and Featured badges. Dumpling is Featured and homemade balloon squishies are New. You can change badges in Admin.
26. 26
    Half stars fill the right amount of one star. A 4.5 rating is four gold stars and half of the fifth, with the rest grey — not a rounded whole star.
27. 27
    Tiny photo loading skeleton. While product pictures load, a soft pink shimmer shows, then the photo fades in.
28. 28
    Roomier terms in the footer. The T&C block has more padding and space between lines so it is easier to read.
29. 29
    Section titles in dark purple. Squishies, Homemade, Mystery, Fidgets, Slime and the other section headings are #36042b so they stand out on the background.
30. 30
    Admin login is checked on the server. The shop asks the hackathon API to check the Admin password. The page only unlocks after a session token comes back, and that token is cleared when you leave Admin.
31. 31
    Featured and New categories. Menu pages list every item with a Featured badge, and every item with a New badge. Change the badge in Admin and it shows up there.
32. 32
    Multiple categories and badges. In Admin you can tick more than one category and both Featured and New on the same item, so it shows in every matching section.
33. 33
    More-page pictures show again. The More cards were stuck on the loading shimmer. They now fade the SVGs in like the rest of the shop.
34. 34
    Shop accounts, Vinted-style. Account in the nav lets you make a fidget squish login with email, pick a username and profile picture, or continue with Google, Apple or Facebook. Same pink squishy look, different words.
35. 35
    Plain username hint. If a username has a space or other extra character, the account page says usernames can only use letters, numbers, dots, underscores and hyphens — no spaces. It does not show a pattern code.
36. 36
    Admin is only for LewisThomson. The Admin password still has to be right, and the shop then only opens Admin if you are logged in as LewisThomson.
37. 37
    Search accounts and add friends. When you are logged in, Account has a search box. Other people’s usernames and profile pictures come up as you type. Tap one to pick them, then add them as a friend.
38. 38
    Admins can add more Admins. Inside Admin there is the same live search as friends. Pick an account by their picture and add them as an Admin. They can then open Admin with the password too. LewisThomson stays an Admin.
39. 39
    Admin badge on profiles. If you are an Admin, a pink Admin badge sits under your username on your profile. It also shows under names in friend search and the friends list.
40. 40
    Accounts stay saved. Shop accounts are stored in Google Firestore so they are not wiped when the API restarts. Friend search also lists other people as soon as you open it, not only after you type.
41. 41
    Accounts live in the shop folder. Sign-up is saved on this computer and in katie/accounts.json, next to stock.json. In Admin, Download accounts.json and put that file in the katie folder, then push, so other devices see the same people.
42. 42
    KatieThomson is an Admin, and usernames are unique. KatieThomson can open Admin the same way LewisThomson can. You cannot make two accounts with the same username.
43. 43
    People show up in search. Find friends and the Admin people search list other accounts as soon as you open them, including LewisThomson and KatieThomson, not only names saved on that one computer.
44. 44
    Account pages readable in dark mode. Create account, Find friends, and Add Admins use white text in dark mode so the words are not lost on the dark cards.
45. 45
    Profile pictures show for other people. When you set a picture, it is shared so it appears next to your name in friend search, the friends list, and Admin people search on other computers too.
46. 46
    Google, Apple and Facebook log you into the shop. Continue with Google / Apple / Facebook now creates or opens a fidget squish account after the provider confirms your email. Each button needs a Client ID or App ID in config.js (and on the API) before the popup can open.

1. 01
   Static files on GitHub Pages. HTML, CSS and a little JavaScript in the katie folder. Push main and it goes live at hackathon.tyneside.software/katie.
2. 02
   Admin and reviews save on this computer. Catalog edits and reviews live in the browser. Download stock.json from Admin if you want the live shop for everyone to match.
3. 03
   Buy is email. Email to buy goes to katie@tyneside.software. There is no checkout cart.

Shop · hackathon.tyneside.software/katie
Group door · tyneside.group
Repo · Tyneside-Software/hackathon-site