Svelte Posts – Hack Club Scrapbook

[29/50] today (or rather yesterday) i did: • start a new project, a jet lag: the game hide and seek companion web app! super simple for now and also my first time trying

! • watched like 3 hours of jltg

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/21485f40-3750-4340-a896-d21cbd7759ba-image.png

*day 2/50* today was a smaller day since i'm sick (why is everyone else getting sick too???) but I did manage to make tanuki save the selected game to a persistent store! i had to add quite a lot of checks and some workarounds for Svelte not marking things accessed in await as dependencies (why??), but it does work! here's some of the code, ignore the typescript errors

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/0d72a191-38ea-4eb5-9e50-6ecfc4a41f8f-image.png

haven't posted here in a while but i just finished (the mvp) for my project rustytime :D (currently at ~75h) • what is it? It's like

WakaTime but FOSS and made with a

Rust backend,

Sveltekit frontend and

TimescaleDB (Postgres extension) • why? I though it would be a cool project

• is it good? Idk

but you can judge it for yourself here :P • is it fast? It's pretty speedy! Over 1500 heartbeats/second on my machine! repo: github.com/ImShyMike/rustytime (you should give it a star

) please send stuff you think i should add in the thread :) edit: also check out timesplit if you want to use this + hackatime at the same time! (ship post here)

I made my first app with svelte and tailwind! summer.hackclub.com/projects/10478

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/8da625a4-85ad-4055-bfaa-218812d8f88f-image.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/84a8c577-7568-4375-a046-ff5484f48931-6ea61907-d290-44c1-95ff-13412f0917bc.png

I just deployed my first svelte app! It’s not done but I’m really happy with how it’s going so far especially considering I’ve never used a JS framework before (just vanilla). Here it is! todo.theseagull.dev psst - it’s also my first real project with tailwind

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/9356e3f8-4a4f-4225-9b76-f7576a7af2d4-image_from_ios.jpg

I just deployed my first svelte app! It’s not done but I’m really happy with how it’s going so far especially considering I’ve never used a JS framework before (just vanilla). Here it is! todo.theseagull.dev psst - it’s also my first real project with tailwind

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/d96d7d7e-c055-4ebb-a870-75789dcdf707-image_from_ios.jpg

I finally got my scrapbook account fixed, bummed custom domain's don't work, but it is ok. Today I started another new project. The name, mutter, is tbd but the idea is a user friendly way to generate subtitles using whisper (whisperx or whisper.cpp). I know there are a few of these out there but none of them seem to be maintained or plug in play enough for my liking. The tech stack I have decided on is Tauri + SvelteKit + TypeScript, tauri will allow the app to be packaged in a small binary and svelte will make the ui interactive and pretty. This will be a great way for me to try to learn rust too.

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/812b2ba2-0f9c-4490-b406-9be1fdeb820c-8d1e0bce-d742-43d6-b691-0a4722441a00.png

Using Svelte and Scss For The First Time.

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/dfd47548-793a-4d1c-b28e-3606efa95a84-image.png

finally returning to the scrapbook - today I properly began work on my first project for Shipwrecked, a playlist migration tool that transfers playlists between streaming services! First step was getting the Spotipy python module working with my Flask back-end and Svelte front-end.

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/de44d7d6-b907-4ba5-9b49-1cc73c33a880-image.png

I've added theming to Modulo! If you recall at the very start, I made an update about figuring out how to change the Tailwind theme on-the-fly. This is why! I used a color picker library called svelte-awesome-color-picker, and hooked its onInput event to a function that updates the theme's CSS variable.

git.new/modulo-682a6c7

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/9dfbd9d9-f28e-421a-acd2-de25b8734e1f-image.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/d77a7f69-4e07-4dda-9838-dd218c7a3290-da61d6b2-78e4-48e8-8ff7-ef88a1af83a1.png

been kinda demotivated yesterday and today

but i made the current dot highlighted and since my code was getting messy i moved the dot into its own Svelte component - this'll make it much easier to add the dot logging feature tomorrow 👀 git.new/modulo-bb8c0b0

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/59ef96dd-d37a-48b6-b913-5c09cf4e9d28-image.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/494326cf-2766-473d-a8f2-f638db2415ea-3c928d1f-6f6b-4eb1-ab84-13d1f5b37a5a.png

I made the board from 11x7 instead of 11x11 so the games won't feel so boring at the start. I have added in the ability to attack other pieces, as well as the main goal, to move the core pieces next to eachother. I will release the official ruleset soon

Working on my new chess-like game, it doesn't have a name yet but I want to prove that the game is playable before I get attached to it

allmost finished my svete js app

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/88ee2688-a443-46e1-a000-87119f911975-image.png

working on links animation for my svelte js protifolio

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/aef7a540-b31b-4dbd-bf18-68957c3d2462-image.png

working on ui for my svelte js portifoilo

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/e731f455-43aa-441c-8caa-365836b30f03-image.png

links are fidex in my svelte js protifolio

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/620ed0a4-6c8c-46ed-9f52-95efd95fddcd-image.png

lets see how my svelte js portifolio turns out!!

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/542faa88-55a6-4474-b8a7-89b206a39622-image.png

workingon svelte js app

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/1033feed-0a20-42de-9ab2-b978bd6451e8-image.png

coding in js the new svelte and learing svelte

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/7f94b98b-1862-441a-bf82-c22ef6f4adac-image.png

Today is day #C07TTG7NVPX| of #C045S4393CY| (i took a 1 day break yesterday), today i worked on the site for #C08EL3G9K2B| Uses svelte, and stuff uh idk. I spent a lot of time making shit work cause it kept on breaking

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/58be6e1f-e0d3-4ba3-b13d-b8f7fba55774-image.png

fixed a few bugs, updated boards styling, and started working on removing the flash on load in Codeboard today. also did some research on how i could implement jumpstarts, but i didn't find much. (day 9? of #C045S4393CY|)

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/f9fcf187-f3c0-420c-a861-561b982d7e77-image.png

DAY 3 of #C045S4393CY|! I decided to create two new programs in a repo, one in raw html and the other in Svelte, both create a simple button and counter but DAMN is the svelte one shorter and simpler, there is no going back lol! Repo: github.com/Dumbhog/15-Days-In-Public/tree/main/2.%20Svelte%20Button%20Test

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/b2c2f001-b0d4-4249-8886-c707056dc626-image.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/d82e49ed-e9f1-4b9d-affb-16029e830c55-image.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/0179e8a3-daf5-4557-beb4-27e543e480b4-65ed68aa-42c4-41ce-a4d4-5e14e7eade50.png

hai scrapbook, i'm back! today I migrated my dashboard for getting things done, Mosaic (name still pending) to use

Svelte components, and implemented

widget dragging! Because of the blur I applied to the windows they make this glassy effect which I quite like!

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/a8b96899-cc50-49c1-9db7-8f3760c5ea2f-image.png

not too much work today in terms of features, it's mostly fixes and cleaning up code a bit. example here with using svelte's snippet feature to reduce the code needed for the same thing!

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/bb6467a7-110b-426d-a6dd-0e5319548bb3-after_snippet.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/5a85c5ce-67e4-4b1a-9a9f-b52a202a2df0-before_snippet.png

Today I moved a slack bot over to the raspberry pi I setup yesterday & started reading through svelte's demo "sveldle" to get an understanding how svelte kit works more

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/a914cfd3-c13e-4be2-9236-156064580056-screenshot_2024-11-11_at_8.45.29___pm.png

MILESTONE: Shadcs inspired UI library Written in svelte Desc: This is a ui library that was written in svelte and inspired by the Shadcn ui library. I have just finished prototyping all of the 20+ components and still need to add the picture previews on the github. The library will be available for use soon. Repo: github.com/Anant-raj2/ui-lib

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/649b3923-fb04-4cbe-9319-d2d153de58ca-3cd2a5b6-a37c-4ed6-830d-deafc1569e31.png

Cool little autoclicker I made in Svelte & Tauri sadly linux wouldn't build and I couldn't run it on my Macbook I never could figure out how to fix anything... github.com/mavdotjs/lambda-autoclicker

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/f46000c0-8ee2-4d4a-9e93-241db8453d50-43995aeb-63ed-45b6-a29d-fc7971ae4a36.png

Made a TypeScript Svelte template/placeholder website Repository: github.com/qualk/coming-soon

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/6573fa05-9462-487d-a93e-915cfb797560-f24aa777-3f87-4b35-bab9-23396830a0e5.png

I've made a product comparing website using GPT-4o Vision API and Svelte. You can simply give it images of two similar / different products then it'll give you pros and cons of it. Finally there's a meter recommending which you should choose. Website Github

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/709eccd7-2440-407e-ab17-f988e6eff583-ac938372-081c-4025-bc0f-981d7678749f.png

#C06SBHMQU8G| fixed some bugs with ui and other stuff for my Svelte URL shortener GitHub: github.com/intercepted16/zipyy/tree/dev

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/a7129d90-986d-4de0-9082-0438e69266e2-b2e2c5b5-1ba0-4a3f-b5e7-fd8b5c69bc6c.png

I made an autoclicker with tauri github.com/mavdotjs/lambda-autoclicker/releases/tag/0.0.1 Linux build just straight up doesn't work, so no linux yet, but I expect it to be fixed soon 😅

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/5bd1f54f-70e7-4df4-888e-277747ee3cc4-eeb95f75-ebcc-4123-89b0-7a4f224a4a3b.png

Finished and published the new version of my team's robotics website I made for fun with svelte. Was a lot of fun to make it for the arcade especially making it look clean with the gradients. Still have plans to make two more pages, competition and robots, which will look cool and possibly have 3d models! Github: github.com/SaMoTechRobotics/SaMoTechRobotics-Website. Website: samotechrobotics.com

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/c2985a02-0758-4953-a18d-14de578ccaf4-2d2d04cc-7042-403e-a165-1b4e362e123a.png

Created a zoom clone! Made this to learn react and nextjs to eventually migrate my own project over and was following this great tutorial: www.youtube.com/watch?v=R8CIO1DZ2b8 Overall, a great intro to next js especially learning about useState and useEffects. For sure migrating my svelte site over to react for more reactivity. Also learnt how to use this great video and audio messaging service and Clerk auth. Really amazing tutorial and I recommended anyone trying to get into react and next js to make this! github.com/Aaryan-N/Zoom_Clone

https://scrapbook-into-the-redwoods.s3.amazonaws.com/2d410bbd-57c1-49c1-8ef9-0aed710a0ecf-screenshot_2024-08-11_054134.png

https://scrapbook-into-the-redwoods.s3.amazonaws.com/48df0b65-841b-49b1-965b-762aefdf77e0-image.png

https://scrapbook-into-the-redwoods.s3.amazonaws.com/b347355c-8315-4b28-8ef0-99f2a85446c2-image.png

https://scrapbook-into-the-redwoods.s3.amazonaws.com/8dc74caa-8357-4ea6-ba8e-eabea41cbd6b-image.png

I put up a quick personal site built with svelte and tailwind! owenwang.dev

https://scrapbook-into-the-redwoods.s3.amazonaws.com/69f80f1f-4a99-4584-a454-8624e1c4df7d-image.png

Discord oAuth flow implemented. Now you have to build the svelte app first and then run server.js for everything to work properly! github.com/Aaryan-N/Fira_Svelte/releases/tag/v0.1.3

https://scrapbook-into-the-redwoods.s3.amazonaws.com/6179a722-afb9-4bff-b692-11d69f89bfd2-image.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/ff12785e-a058-48da-b0b1-2e2873faf37c-e5f7c13e-2f8a-489f-a401-1563a68cef93.png

built a todo app with svelte and tailwind! github.com/skyfallwastaken/svelte-todo (somewhat old project, but i forgot to submit the session)

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/cf3f7446-5f14-48c9-aed3-87bdad68fd49-137d2f30-99c8-4ef4-a6a1-50d63fffce77.png

Making a school website that is easy to use and has modern UI with Svelte and SvelteKit, has features such as user accounts, permissions, user settings and so on... I'm posting this because of the 25 hour limit since this is a quite more ambitious project and takes longer than I originally have thought. Github repo: github.com/NotRewd/proclass-website/tree/master

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/6f666a6a-7e4d-4d53-b614-2674966e1596-f96ccbdf-0a8c-49ab-9296-e84d8f575d73.png

Flexi is a web app made with SvelteKit and Supabase designed for a school to manage flex periods and share opportunities with students. It aims to make the process of signing up for flex classes easier for both students and teachers, removing the unnecessary and incredibly time-consuming process currently associated with the current outdated and costly system. It also allows for school-wide announcements and featured flex opportunities to be shared with students. Flexi is still in active development, here is the link: github.com/BrandonKirbyson/Flexi

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/d6f36b1c-77f3-4326-b022-75444c8d2a92-8b5a6924-a9fc-47d6-839b-cb96d04941fa.png

Started work today on rewriting my front-end in Rust! Progress is really slow, and I really miss the comfort and DX of Svelte, but this will allow me to implement secure auth so it's kinda worth it. github.com/4f48/semail

https://scrapbook-into-the-redwoods.s3.amazonaws.com/18a87b09-77d2-4f9b-be9b-3b5374b60135-image.png

I just finished a Tic Tac Toe website. This was my first Next JS project, and I definitely learned a lot about how Next JS works, and how it differs from React and Svelte. I hope you guys like it! Here’s a link to the repo: github.com/SkywardSyntax/TicTacToe-NextJS/tree/main?tab=readme-ov-file Here’s a link to the live website: skywardsyntax.github.io/TicTacToe-NextJS

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/da2f42e5-bf94-4f99-9516-1a3a6c6f8edd-0344f34e-15f4-4031-a536-c198708e4aa0.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/1fab0ded-524b-4556-b02c-75f70f7c0663-5dc71b23-beb0-4ef0-924d-8a71f8782b06.png

Today, I completed my URL shortener. For this, I did some experimenting with SvelteKit and Django (I realized later that I should have just used regular Svelte but oh well). It's nothing too complicated, just a simple sqlit3 file that keeps a record of all of the urls and sends that url back to the svelte application. I have the sveltekit and the django running on 2 different ports. GitHub: github.com/CrazeXD/URL-Shortener

Today, I finished the backend API for my URL shortener website. For the backend, I am using Python's Django as a REST Framework. I still need to complete the integration with the frontend, which I am developing in Svelte. This project is very experimental, since I have never worked with Node.js or any JS framework in the frontend, and instead of using Django's inbuilt template rendering system, I decided to integrate it with Svelte even though it isn't really necessary. github.com/CrazeXD/URL-Shortener

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/47c225f7-52c8-4271-aae7-3e3201195ae2-a42154f6-55a7-4c41-bbf6-f9297b0b4f4b.png

I am done with my first portfolio, made using Svelte. In this journey I learnt how to use svelte, it was my first time with it. For js framework I only tried react once earlier and that's it. I learned a lot in this project :). In the upcoming days I'll make it responsive for mobile devices and larger devices too. This is the GitHub repo:- github.com/AnkushRoy-code/Anksite And this is where it is hosted:- anksite.vercel.app Hope you like it :)

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/729e3ffc-7c41-4ccf-bce4-0ccde3aef05b-d5fe6867-5152-454f-87a4-983954aa5e62.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/c7e9f65d-d09b-4079-961c-2a904cf60339-779a8851-6f1e-4fc0-8fc7-429a868391c8.png

Created a Meme Generator Using Svelte Just a simple website with the goal to learn a new framework. iambodha.github.io/Meme-Generator

https://scrapbook-into-the-redwoods.s3.amazonaws.com/19082bfe-8ea5-4e58-b28c-ae3a4e287e41-image.png

#arcade I made a budget tracking web application/website with svelte. This was my first svelte project, so I apologize if its unoptimized. I initially started out this project using plan html, css, and js, and I quickly realized I need to use a framework to maintain my sanity. I was initially thinking of using react, but I wanted to give svete a try, because I haven’t used it before, and I heard it was a pretty user friendly framework. I also learned a decent bit of creating resources on Azure to host this application, here’s the link to it. finance.centralindia.cloudapp.azure.com Thank You!

https://scrapbook-into-the-redwoods.s3.amazonaws.com/8dd49014-0173-4dd2-85ee-b0d740100883-image_7-6-24_at_1.03___am.jpg

#arcade I made a budget tracking web application/website with svelte. This was my first svelte project, so I apologize if its unoptimized. I initially started out this project using plan html, css, and js, and I quickly realized I need to use a framework to maintain my sanity. I was initially thinking of using react, but I wanted to give svete a try, because I haven’t used it before, and I heard it was a pretty user friendly framework. I also learned a decent bit of creating resources on Azure to host this application, here’s the link to it. finance.centralindia.cloudapp.azure.com Thank You!

https://scrapbook-into-the-redwoods.s3.amazonaws.com/aa143efa-d37d-40aa-8750-31ea08f2a67d-image_7-6-24_at_1.03___am.jpg

Finally finished a MVP of my website redesign! Old: Python Flask + Firebase + Bootstrap New: Svelte + Tailwind + shadcn/ui Now it doesn't require a server (free hosting?), and I think Tailwind/shadcn looks a lot cleaner and cooler than stock bootstrap. GitHub: github.com/krishnans2006/website-shadcn

https://scrapbook-into-the-redwoods.s3.amazonaws.com/7ea58dab-1f03-409f-8c07-7bd411e0df5b-image.png