Svelte Posts – Hack Club Scrapbook

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://imgutil.s3.us-east-2.amazonaws.com/49a5762712c8e50e9e2456140f4da32d92c78684572f9f809a60cdc4777c7dc4/15af5452-b3fc-4b06-b62f-4a46b5210acc.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://imgutil.s3.us-east-2.amazonaws.com/60b6fa0daaf25fd71096729339249440d8f11a6a077143c82fceb33998e249b7/98354cd6-1209-4dda-90c2-addb1f2c6267.png

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

https://imgutil.s3.us-east-2.amazonaws.com/7c23760917071261722699f32030aa13db82981c336a6bdfac194a046dd21c0d/c024474d-f4d0-4c52-baed-b6de3317b00d.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://imgutil.s3.us-east-2.amazonaws.com/79c3d268dd146be228936850ff0393c5eefa79076054cbe5673c6f4faa2471a6/ae074167-bf72-4839-a47a-f8882da4a04f.png

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

https://imgutil.s3.us-east-2.amazonaws.com/2ed2adb7ab7167e42b5611b9e202fbdee4e3dc87d04c6d30f3020876a17ed2cd/34302c03-9820-4a21-b01a-b6bef8e2143c.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://imgutil.s3.us-east-2.amazonaws.com/944414d4ef5935e1b36161d4d205817000ee85f8b795f8f9c18deed896a07b07/b42bd56d-a8b3-485d-85f3-d21acd04ea7d.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://imgutil.s3.us-east-2.amazonaws.com/682bd4aef46d69a6079560b164078f2fc7c7074bd423da7c9f03ad6818eed5b8/1ec23941-e969-4f2f-b7ca-6011d7600dbf.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

https://imgutil.s3.us-east-2.amazonaws.com/763760ed3b8aeac23a0b829e36f9b99551d6eff78d8565139372214d1302da82/5192d333-11fa-4687-ad50-54c2425ade76.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://imgutil.s3.us-east-2.amazonaws.com/2b7c7094a9a21479b8ff2aef65daf46d8037ac284c932f00378c964b5e8df90c/d9bff05e-5e0a-4182-aa43-9aef44b36e08.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://imgutil.s3.us-east-2.amazonaws.com/1f9b855199609c83bd49eb17909a4046d7ddd444c65e4fc49e3129d1c2a7f475/42314682-2f1e-48c5-bd54-a095b681edca.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://imgutil.s3.us-east-2.amazonaws.com/0be0281929083df0178839b4c86dd654ef9d24a827caed5cb661f3694545d742/b3d84c3e-f77c-475c-a2d2-48c8aab73eb6.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://imgutil.s3.us-east-2.amazonaws.com/d73a4e57d8fda2a944b29b424d12c02ffdf8b77f589ec99b4fdb4465c1633289/c2af3a49-2253-43cc-af10-72be9d37ba8b.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

https://imgutil.s3.us-east-2.amazonaws.com/ba8a3dcc02ee319f791f699eae3e37b4dd05cc749a9d335e7778e0f889f5297f/15c0863f-0863-466a-9a33-e56fac83cc18.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://imgutil.s3.us-east-2.amazonaws.com/15b8ea8548a2947fb6276874e6776afa63bbf51a4886202ceb7b56eaef60f18d/d4fcca69-a51a-42ac-bd49-7ab600c9e21e.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

https://imgutil.s3.us-east-2.amazonaws.com/f369ee6246061bd53947d0e1625ceb1e4061d92f73f6fe540db76d5de6185641/bec2aa6e-8399-4092-b6fe-84d201225632.png

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://imgutil.s3.us-east-2.amazonaws.com/a390a59bf4879a683921e3ef18534c1fd3e71ace13f2215f6a3bac31c0a35b6d/2c68ace8-a851-45d1-960b-3064212235a1.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 :) :smile-with-7-parenthesis-no-less-no-more:

https://imgutil.s3.us-east-2.amazonaws.com/16088455dd1098d1d19a53b4146466505ca1d53a0e9d62e4e6dada5dd66c863a/92520da5-cd3e-4e80-bd3f-bf6c8d5d68d4.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

https://imgutil.s3.us-east-2.amazonaws.com/e450896c7ab67a20f1ad474eeb3a4ca9ca28d04ecc98a5e7e406f16d1d9f80b9/584fb469-84f6-41f1-9826-0457230b9d9d.png

#arcade added back & forward buttons on my /auth route for Svelte URL shortener GitHub: github.com/intercepted16/zipyy

https://scrapbook-into-the-redwoods.s3.amazonaws.com/e4ea2f76-276f-479a-b808-53ca459e4aa2-image.png

https://imgutil.s3.us-east-2.amazonaws.com/7b077f624ea9afaea920e4f425626ece19fe0c02a899c4ad1f5db0e8f065376b/51654d7b-8a01-4fd3-afde-6095e70eafba.png

I started working on a youtube-dl app using Svelte and Rust (tauri), as of now it can fetch youtube videos title from url.. My second rust project!

https://scrapbook-into-the-redwoods.s3.amazonaws.com/4ee2d819-76f9-4d38-823a-faac21014108-image.png

Today I’ve built the todo app in two new frameworks: • Svelte • Next (With prisma and drizzle) I’ve probably finished the ideas of new frameworks

https://scrapbook-into-the-redwoods.s3.amazonaws.com/fa1fe0b5-caac-4707-8b7d-c97c75452f30-img_9963.png

i created a basic image gallery using :svelte: :

https://scrapbook-into-the-redwoods.s3.amazonaws.com/b16e6178-4219-4426-966a-dde7552943f9-23-06-2024_-__13_57_11_3777.jpg

making a ring of vocabulary tool using svelte and firebase. this name is "ankage" from japanese "anki" (means remember) and "strage" firebase is a hobby plan so im sad to not able to ship for using by other people... github.com/shiki-01/ankage/commit/c7f470d60a72d643d732ba07edf07f97e46748eb

Glowsquid now has basic account management! This took a huge amount of effort since all the state is handled on the backend, which means I have a pretty interesting solution for state management: • Tauri/rust opens the Svelte app • Svelte listens for state_change events, and then emits a sync_ready event. Svelte internally stores a reactive state map of all state objects and their keys, which is used to identify them on both sides • Tauri then recieves the sync_ready event and creates and sends the state objects down to the frontend. The state objects themselves are smart, and whenever they're updated they send an event to the frontend saying they were updated with a new value • The end result: State being perfectly synced to the frontend 100% of the time :sunglas: All of this is completely typesafe as well thanks to specta . I also had to update the internal copper Minecraft library to allow serialisation of the Minecraft profiles it gets

Just finished the demo page for a code editor I have been working on. It’s basically a simple svelte component repo: github.com/CoderN-P/SvelteEditor

https://scrapbook-into-the-redwoods.s3.amazonaws.com/ab203ed9-522a-4094-b777-9433b309231a-screenshot_2024-06-20_at_2.44.26___pm.png

Day 9 of #15-days-in-public, And today I have a very good start, (but not with my RAM though, Vite use a lot of it,) And my homepage looks a lot greater than everyday! Cause right now, I put header and footer on every page now! (I use layout.svelte btw, I don't kind of script kiddo.) And little of CSS, and it's look like a great one, see you tmrw. (I have to play Minecraft with my friend now.)

https://scrapbook-into-the-redwoods.s3.amazonaws.com/b3e308dd-6cca-4315-a285-1029bf009315-image.png

I'm working on my Svelte and Rust website today, I fixed the images on the site by moving the images into src/lib/images instead of /src/assets. Then I added a git commit section to show the latest commit it sees. My only issue so far is getting Rust to work on the browser, it works fine on localhost but not when I publish the site. It seems to be some issue with this github.com/tauri-apps/tauri-invoke-http

https://scrapbook-into-the-redwoods.s3.amazonaws.com/036a7559-17b4-4360-b653-9a04d497df44-image.png

https://imgutil.s3.us-east-2.amazonaws.com/ea107136d811aa39a1807ee2f835efc9b25074df1b5db757982c7771dd16a782/967709e3-57c0-4a1d-88e3-7b0b98e3a9e2.png

Day 3 & 4 of #15-days-in-public (Cause I asleep yesterday.) Yesterday I still go to Ka Chat with my friends, but today. I started my work by choosing the web framework, Right now I struck with Svelte (for now,) and starting making simple site (Using some help.) and pretty much it, (I have school tmrw.) Goodnight!

https://scrapbook-into-the-redwoods.s3.amazonaws.com/6ffbaac3-a3e1-4f82-8ef2-a83cf9c59d7f-image.png

https://scrapbook-into-the-redwoods.s3.amazonaws.com/2f987b0e-4eb0-40b0-97b0-0b7662b892d4-2024-06-12_00-09-01.gif

My Tauri Svelte app finally built! After spending hours yesterday fiddling with Cloudflare Pages build tools, then finding out I actually needed to build from Github Actions, then spending many more hours late at night yesterday and earlier today, I finally got it to build successfully!

https://scrapbook-into-the-redwoods.s3.amazonaws.com/33b3d279-14ee-46c7-b5a9-45bb77183f2d-image.png

Got a 3D JS library (threlte) to work and render something after 5 hours of not cooperating. This will be part of what will probably be one of the best websites I've ever made! (future ship)

https://scrapbook-into-the-redwoods.s3.amazonaws.com/968a99d2-3e2e-44c7-948a-382435196e03-image.png

im working on a photo viewing/organizing desktop app in rust using tauri and svelte for front end

https://scrapbook-into-the-redwoods.s3.amazonaws.com/9ebbc163-6b96-478e-bbfb-c62c0562a9f4-image.png

Sveltekit + TailwindCSS is one of the best combos I have used imo

https://scrapbook-into-the-redwoods.s3.amazonaws.com/b227c395-28ea-4b9d-bf87-b463cfaa1063-image.png

So, I'm learning svelte for the project (Devshare) I'm making. It's actually going well 🙂

https://cloud-1re1k2two-hack-club-bot.vercel.app/0image.png

New blog post at byteatati.me/blog/love-svelte, also I’m currently migrating the site to Tailwind

https://cloud-h3azktho0-hack-club-bot.vercel.app/09e1d012b-5e5e-483a-a50f-5b073ae79d9e.jpeg

Just shipped my new personal website out in the wild! raygoo.tech This is like my 3rd design and I'm really happy with how this turned out and yes, it is written in svelte after switching from solid-start to nextjs and now finally on sveltekit. safe to say, I really enjoy svelte. I think my design skills are improving slowly. Please let me know if there's any improvements I can make on the design aspect. Full ugly source code: github.com/provsalt/provsalt

https://cloud-pppr57urw-hack-club-bot.vercel.app/0image.png

https://cloud-2l4dwi45p-hack-club-bot.vercel.app/0image.png

https://cloud-9awlv1v1w-hack-club-bot.vercel.app/0image.png

https://cloud-k6mcmga1a-hack-club-bot.vercel.app/0image.png

Learning Svelte to understand #sprig homepage:)

https://cloud-fwp74lj4p-hack-club-bot.vercel.app/0image.png

Playing around with Svelte! Wrote a little highlight.js component

https://cloud-pqv5mnc5f-hack-club-bot.vercel.app/0image.png

Gonna start experimenting with building ui components in Svelte with tailwindcss! Hopefully I can do something before the busyness catches up again.

https://cloud-6itj1dqhr-hack-club-bot.vercel.app/0image.png

even copilot knows that we’re giving vercel hats to all winners (and :vercel: :nextjs: :svelte: stickers for everyone!!)

https://cloud-1v53xi4uf-hack-club-bot.vercel.app/0img_20220913_154415376.jpg

https://cloud-8aw8f1qal-hack-club-bot.vercel.app/0image.png

https://cloud-kmtps02nw-hack-club-bot.vercel.app/0img_20220913_154153406.jpg

Not to take away from the legendary Vermont Vibes, I rebuilt my personal site (same layout & stuff) using Astro + Svelte + MDX instead of my old SvelteKit + mdsvex setup. I have to say I like astro and how it works - very easy. I also blatantly stole a toast from wack club to advertise hack austin. All in all, I'm glad I did it because it gave me familiarity with astro - like I think I could be just as quick as SK considering SK's routing got a lot worse recently. reeseric.ci (here's an image to please scrappy)

https://cloud-cxcg0p7ao-hack-club-bot.vercel.app/0image.png

Trying out and learning Svelte! A few friends recommended it to me a while ago.

https://cloud-kzsuzhr81-hack-club-bot.vercel.app/0image.png

Learning Svelte today (have always wanted to ever since the workshop)!

https://cloud-2si5zkr2w-hack-club-bot.vercel.app/0svelte.png