React Posts – Hack Club Scrapbook

Posts tagged with :react:

hi guys this is my first scrap book post (working on a react app *coding). was working late.

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/e5629ac3-a02d-403b-aa55-97309333bf69-image.png

set the channel topic: 📷 💻 Pick a subject and learn about it every day! Share updates here and get a custom, beautiful site generated at scrapbook.hackclub.com! Not working? React to your post with

Just shipped #C091PEQP7CJ|! It's like #C07UJMV9389| but for Summer of Making, and gives you updates for stock changes, new items and price reductions! I took a lot of what I learnt from High Seas Monitor and Arcade Monitor to make the codebase more maintainable and easy to hack on! •

happy-dom (dom library for nodejs/bun) is used to parse the som shop's html • 🚢 arktype (a library to validate the shape of types) is used for safe env vars, better intellisense, and to ensure that the scraping script isn't reporting false/undefined data because of a page change (it'll stop the script from running further and pinging people for false updates) •

sentry is used to monitor errors. since the bot does html scraping, it can be slightly fragile - sentry (to report errors) + arktype (to throw errors) help prevent that from happening •

jsx-slack lets you use jsx instead of json for block kit! while it doesn't use react, it helps keep your code a lot shorter and you get better intellisense. i use it for all the bot's messages and it's been a joy to use! •

bun to use typescript/tsx without a bundler + for superfast package management! code's at github.com/skyfallwastaken/som-monitor. dual licensed under MIT and Apache 2.0.

Day 7 of remaking the Hack Club homepage! I'm converting to the site to React as fast as I can

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/806522d7-466a-4644-8fa5-d66e0cad05dc-image.png

Day 6 of remaking the Hack Club homepage! I'm working on migrating the whole site to React

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/751a05fe-62e9-496e-9ef9-629dba2f2601-image.png

Working on a SAT practice site for my upcoming sat with React. packjackisback.github.io/sat-practice-site

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/ee43b5e9-0ae0-436c-849f-ca6e3e036fa6-image.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/5d4c7591-ed16-4e47-82fc-085c5f7adc43-image.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/36e4d82f-e734-4b11-ac2d-5affccde4952-image.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/5edff97c-5064-4933-88c2-7498a91792b5-image.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/c0efc73f-a5ac-461d-8957-430054d77b74-image.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/f5c4eb57-13ea-443a-bdef-5046c68c81ba-image.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/4814930c-984c-4305-bb75-31307578f9a8-image.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/03c2f8fa-beed-4613-b014-42f5b7d601b2-image.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/41c08786-3463-4c42-ba7f-0f19b63a35a2-image.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/bf1e93b5-a0a4-4077-8dd3-bd96e12286ef-image.png

Over the last month, I have been revamping my personal site using react. And I'm quite proud of it! The mobile version is still buggy, but I think desktop version has the spirit :D As always the source code is on my GitHub! Website Link: justfahad.me (Thank you arcade <3 ) Github: github.com/Ranger-NF/Personal-Website

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/c39226c0-2767-40ac-a760-76d3732f8d0d-screen_shot_2025-05-02_at_21.56.06.png

. lol

A while ago, I made Vortex - an email shortener made with

Rust and

React! However, the UI has always been lacking (to put it mildly), so I decided to make a bunch of improvements to the site: • Better colour usage and styling • Better 404/error pages • Email logos! When you get an email, it now shows the company logo to make things look nicer • Emails are now sorted in the list • Better styling for plain text emails in dark mode • You can now clear the emails from the server to improve privacy • SSR! Which means faster page loads and better SEO • Code quality is easily 10x better • Rust deps are now up to date • Redis is now the database for the site so that emails don’t get lost on updates • CI actually works now Give it a try! vortex.skyfall.dev Vortex has 12+ (sub)domains so you don't have to worry about getting blocked!

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/0130b45b-4a57-4cc8-9f03-ec0db74171fa-image.png

day 9 of #C045S4393CY| i worked on a react terminal portfolio website

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/82109936-8cd9-487b-99cd-53895b8eba92-image.png

day sech ("tee hee funny word" 😐) of #C045S4393CY| • css hates me • react hates me

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/cdbdf395-74d3-4679-af96-d109a37197da-screenshot_2025-03-02_at_12.32.59___am.png

Day 6 of #C045S4393CY| - I got hanging stuff to work!!!! I fixed how hanging lamps work to make them react to force balls and be suuupperr satisfying to swing around, and I added hanging platforms which are janky but I can hopefully get to be more stable (they're also really satisfying)

day 2 of <#C045S4393CY|> I decided to try smth new and use vite + react for the first time!

were errors caused? definitely. regretted using npm then changed to bun? yup. struggling with the frontend library chaos? 100% still am. but did I have fun? oh 1000% I'm excited to see this come to life :D there's what I got so far, will get the rest and some formatting fixed up, but this is going great :D

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/58e525eb-36a8-4924-a278-5f2365176487-screenshot_2025-02-25_at_10.26.35___pm.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/b64adef0-af31-4d41-a7ac-492092966fd1-screenshot_2025-02-25_at_10.26.38___pm.png

I made a productivity based IOS app; It's intended to create a sense of urgency and competition while gamifying the studying process. It allows for users to compete globally on study times, track their own, and eventually use the points in an in-game shop system; I made it in React-Native and included a bunch of features so check it out if you're interested, link below; I'm planning to ship a bunch more updates github.com/Mr-W-Squidward/studyquest

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/3140963f-117a-4abf-8969-ad5ee3a36a8d-5c59da3f-691a-491a-abe3-f5b19b548c92.png

main thing today was archimedes work! • fixed some bugs w/ multi-author things • added a basic email template w/ react-email (but i might rip it out for mjml later) • added approval requests that are sent to a review channel (like prox2) • added dms when thing is approved/rejected • applied for (and received) access to telemetry.hackclub.com hopefully I haven't leeked anything important :P

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/d9b6a881-767d-4d1b-a113-104d15db7ba7-image.png

Today I reworked some of Vortex's UI! Also added SSR (and then had to remove it since Vercel doesn't support it with React Router

) and Umami.

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/8e675c86-79a4-49de-95f2-7776bce65942-image.png

rewrote the vortex (vortex.skyfall.dev) frontend from sveltekit to react router v7! also made it mobile friendly, added a "generate new" button, and fixed images/links sometimes breaking (due to cors)

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/800d3989-79b1-4703-9890-7b963a2a023d-image.png

i worked some more on codeboard today (as usual). i was mostly fixing bugs, adding small features and improvements, and figuring out how to build and deploy. react router seems to be having problems, it's saying i don't have the vite plugin installed but i definitely do. going to work on that a bit more tmrw.

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/274352ca-37af-467a-90e5-3e79eeab2d5d-bd9ef507-1b3b-4888-b7e4-d836518a2b37.png

I learnt a lot more about React and sync engines today, and I added React Router to Codeboard. I started adding authentication and I figured out a way to get the current markdown from MDXEditor too.

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/c0fe0bbb-b4bd-4b5c-91ee-ad6c920469c5-a181f164-42a5-49c3-988c-b68ab00992e0.png

are you addicted to slack?

take santa's test to find out!! you have to answer 15 questions and you have to pick the right reaction to a message, like: "i just spent an hour reading confessions posts" would you react

? play here! themagicfrog.github.io/santastest github.com/themagicfrog/santastest also if you have suggestions for more questions pls tell me

. btw the answers are all just my opinion and im not rlly an expert

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/30b47688-bbe1-455e-9ed1-9ce108a2d184-screenshot_2024-12-27_at_3.50.43___pm.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/018e973e-43b9-46e1-883d-bdc69613ba57-f77ad98a-4b00-485c-8936-761383673c9e.png

today i: 1. spent a huge chunk of the day with some family

2. got to learn a lil bit of react native, all managed to do was to make my screen pink tho

3. worked on some athena nairobi stuff :D

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/f74ff5de-ff0b-4ab3-a793-8f89d89abcf8-8788dc10-fd09-471b-a2c8-906b692d810f.png

today i started codeboard, my prototype for a platform that lets you go from idea to ship as fast as possible. it's my first time using react, so development is slow, but i should have the homepage done by christmas (hopefully?).

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/67a52fa0-68bc-42d2-919d-91ccf613f71f-24da410b-b7fd-418f-9e55-621a41d1aa16.png

Developer Dating App Progress: So far I have been able to make the backend in express.js, along with Socket.io for the chat functionality. As of right now we are using passport to authenticate users with GitHub, and storing it to an MySQL database, along with for message history. For the pages we have a home page, a dashboard witch will be changed into a settings page on the profile page. The profile page is dynamic and works with any profile. Along with the search page witch currently has sliders but will soon be adjusted to work with location when we switch to mobile app functionality later. The current template frontend is in EJS as of right now, and we will keep it that way as for a web application for the beta, but I have plans to switch to React Native later. In the end unsure how to proceed. If you have any questions please make a thread.

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/2d68d28b-1bc0-4a9d-9f57-b83a2d011cfb-3232.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/a8f947a1-4a60-4db2-a738-cad809c34e24-fdfd.png

Working on a responsive website about the Rubik's Cube to practice React and Bootstrap. Today I made the main page and it's completely responsive. Didn't even use AI.

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/5dcf3812-f5c2-4257-827a-6ded468dc153-image.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/9e65631f-f8a5-4ee8-94c3-1aaff845e2f7-image.png

Been working on a React Native Android app that can share my location to a server so that I can store my location for use in some projects. Eduroam has been a pain today, but I've finally got something that fetches my location in the foreground! Now to make a server, send it to the server and add background tasks. Sounds simple enough...

Today I had a small mistake in advent of code and got stuck. My code is always for some reason spaghetti. Continued working on my test app and added some teams separation. Thinking of a rewrite in react/deno but also I'm quite commited at this point to django github.com/DaalbuCZ/Hermes

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/c5332fcc-d823-4370-9bc8-9b4f06a565f6-1ac279e8-c5ca-4be5-9b93-ca3c0a415a4e.png

just fixed a BUNCH of dependency conflicts with three.js and react, and finally got to this stage -

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/6d3f8696-579c-42e4-9d37-981f5c2c7e32-image.png

Comp Sci Compass (Day 1) Today I got a mock version of the backend using express.js, along with a simple SQLite database. I started working on the front end using React. I was thinking of a terminal style design for navigating the page to have the application stand out some more. Thinking of switching to a database like Firebase, even though it is a no SQL database, it is built for Node.js/JavaScript and using JSON. I am thinking about it but I feel like I will stick with an SQL based database as I am storing a lot of reviews and more, along with courses connected to colleges/high schools. Here is a preview of the front end, the backend and database are mostly made. yes the console is working, to lazy to post a gif

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/bb49c994-2d93-4a0f-8d05-b6ac6b3c2c07-2024-12-02_10_41_57-.png

integrated react into the frontend... formatting doesnt work but at least the site loads...

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/0b4900ef-ba15-4ad0-be9c-073faad51594-image.png

I hate the Rust borrow checker sometimes... Especially when writing websites in a React-like framework (Yew.rs) Today I also learned a lot about OpenID Connect, which will be useful in a project soon Shipping my personal website probably tomorrow or the day after!

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/fbc28a72-d162-4949-b47f-38ebb3dc1d27-image.png

created one of my first react apps today!

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/5d31bae8-56ce-4ad7-b7ae-db409ecdd64a-image.png

I am working on a POS/ERC system that lets you manage your business by organizing transactions, tracking inventory, and generating bills, all in one place. It simplifies daily operations, enhances productivity, and gives you real-time insights to make better decisions. So far I have made a basic prototype in React and Appwrite(basically firebase but open-source)(1). Today I decided the key features that I should add(2) and started designing the UI(3). Current UI is a pain in the eyes. It needs to be something elegant and aesthetic. As I would need to because I would gift it to my dad who owns a spare parts business for 20 years now and does everything manually(he has employees though but manages the finances and stuff on notebooks which is a big pain). It would help him alot!

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/4c38f290-2fd3-4d17-8f08-4b90237c2f20-dl.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/f0bfdfaa-8f68-4f9c-b355-e448ef94b66f-screencapture-localhost-5173-react-based-pos-system-2024-11-10-22_56_34_1.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/d336bc3f-9e7a-48a7-bd24-1590f9ce79d8-image.png

set the channel topic:

📷 💻 Pick a subject and learn about it every day! Share updates here and get a custom, beautiful site generated at scrapbook.hackclub.com! Not working? React to your post with

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/1983454f-ed38-4e2a-ac8d-01513ff33f6a-c2b39137-8842-4feb-92cf-d7448eb0921b.jpeg

I worked on a math solver with React (powered by Gemini API). I have finished the AI prompting, but I still need to improve the UI and fix client / server component interactions.

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/7d99e304-b264-44b9-830d-034027e2d1d1-image.png

added functionality for users to lock collections and reset passwords if needed. built with typescript, react native, and argon 2 for encryption app name: Dysperse

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/acf6d221-1305-4aca-9e83-0c977e1877fc-screenshot_20241126-001934.jpg

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/0c7afb5d-afd6-46b5-bcbd-3d0cdfa16a34-screenshot_20241126-001923.jpg

With High Seas kicking off, I thought starting a scrapbook would be cool! I've been brainstorming project ideas, and one that’s stuck with me is building something like ChatGPT—but for schools. The idea is to make a tool packed with features for teachers and students, helping schools adapt to AI and teach it in a way that keeps everyone up to speed. I haven't settled on a name yet, but I'm currently considering something like "Brainwave". I am planning to build Brainwave using React/Next.js, OpenAI API, Shadcn/ui, and Supabase!

Spent a few hours today recreating the ChatGPT UI as a starting point. The concept should become clearer as it develops, but I’m excited to see where it goes from here!

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/a5fa3a07-e7e0-4e2b-9b0e-1390258e9263-image.png

lol i lost my streak (fr this time) last night for some reason but ngl im not too bothered by that :) ive been thinking alot about what i wanna do with what i code bc alot of what ive been workinf on doesnt rlly have much of a purpose (im sorry rizzlergpt), its just code that does stuff. so my goal with high seas is to make projects that can be useful for other people while also learning new things. anyways enough of me yapping (on scrapbook of all places

) today: i started off with working on a pomodoro timer (this is gonna be my first complete react project lol). i wanna have features that can make it better for programmers :) so i think im gonna work and complete this for the next 2 weeks and see how it goes :) i also started working on a list of other stuff id wanna make that have the same kinda goal. i also started learning some pixel art since for my pomodoro timer i wanna add some orpheus art there

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/41e1ffe9-b2e5-4a58-8e0f-7644d7f36e37-07287609-dfab-45a8-91db-5ff98a716138.png

Shipping from my laptop straight to Nest (after this, going to setup systemd service unit file first) before #C07PZMBUNDS| ends (please vote for me to get some

), it's @HackClubLeeks ! It's a Slack app companion for #C06089401GT| for data sleuths at Hack Club Slack with a review queue similar to how #CNMU9L92Q| work to avoid abuse and false flags for those who want to spot the leaks minus the copy-and-paste-da-permalink part. Don't worry, leeks flagged through the bot are anonymous but logged the user ID of the first person to flag for moderation purposes. Simply react with

or privately flag as leek via message actions on channels like #C05SVRTCDGV| and #C054QL5JHU0| (or even #C01FXNNF6F2| if you seriously want to FAFO with the FD). Found a bug or want to coordinate a patch/merge request or just want to help review the possible leeks in the queue? No problemo, hop into #C07T2EP4PLZ|. The source code is licensed under MPL-2.0 with the block builder library from Prox2 under MPL-2.0 AND AGPL-3.0 (apologies for SPDX-License-Identifier speak), and even has a GitHub mirror for Low Skies and visibility reasons.

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/619c2747-4893-4c9e-a1da-53f2e4ff1486-image.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/da0882da-ee06-462e-9e24-398360da7a24-image.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/22314f85-8878-4a23-8914-edd69ad783e6-image.png

hi, my first scrapbook since arcade PhyoID, a user management system made with flask, sqlite and jwt, now has a react website, auth.phyotp.dev , and is used for Multicards, an iOS app and will be used for its react website soon. github.com/PhyoTP/PhyoID

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/e9e9cabb-98d9-4bb3-b66b-cae0ea1dd57a-44a798c5-24a3-4a41-8096-9a079cd40ec3.png

set the channel topic:

📷 💻 Pick a subject and learn about it every day! Share updates here and get a custom, beautiful site generated at scrapbook.hackclub.com! Not working? React to your post with

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/e77d7601-93fb-4e0f-8dd7-2a7bf0d5bc9d-fcfc70a4-93bf-474b-88f4-0e77220435de.jpeg

Made the stepper motor react to special infrared signals

My portfolio site i made with Daisyui, react and themed with catppuccin mocha =D github.com/NeonGamerBot-QK/saahild.com saahild.com

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/54464bd2-b10b-45a1-b433-d4a3fdba781c-image.png

Remade the whole hackclub.com/stickers site from its source code (bare html + css) and added waayyyy more functionality thats actually useful! Now the new sticker website lets you: -Add stickers to your collection by clicking on them -Remove stickers from your collection -Remember your stickers when you return to the site! Demo it here!: ampersandco.me/stickers Warning! Its kinda ass cuz I'm not that familiar with react or next js so I just remade it on plain html for now until I can learn 😭

sorting algorithms project using react js and python flask: github.com/mattsoh/sorting-algorithms

Sorting algorithms project now has react js:github.com/mattsoh/sorting-algorithms

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/7f65a61d-31fe-4844-89e6-2491bb35f604-9111e9f6-2c31-43f2-89c3-15f1278817cd.png

I finally shipped project PeerView It is a p2p video calling application, made with webrtc, react, websockets and javascript Its my 1st webrtc project. I focused more on functionality and I compromised in ui of app a bit, As it uses websockets(until 2 peers connect), app requires full duplex connection all the time from deployed servers, hence I chose render to deploy my app instead of vercel, etc GitHub: github.com/jignesh119/PeerView Live link: peerview.onrender.com Please note that render pulls down deployments if no active traffic, hence when you try the app u may hv to at least wait 4 a min to see ui PFA demo of app

https://scrapbook-into-the-redwoods.s3.amazonaws.com/5cd1527b-5533-4cf6-8e79-13ad6b375b9f-1000042722.jpg

https://scrapbook-into-the-redwoods.s3.amazonaws.com/20f84071-5207-4c9e-8813-64fb79c41318-1000042721.jpg

https://scrapbook-into-the-redwoods.s3.amazonaws.com/1af48e3c-3497-45c2-9f95-d9fc66a9c0b6-1000042720.jpg

I have created a React Finance Tracker app with budget tracking and visual spending overviews. Check it out on my GitHub, and see the live version here!

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/0fe6b2ac-558d-4dfd-a2b0-eb3d6e9f4909-353446b4-5098-4cbc-a253-9e028c0f42c1.png

Hey, I have made additional to a project where I am testing different components in React, and how they work. Its really a project that shows different ui components, and I hope it helps you guys as well Link to Repo: github.com/SkywardSyntax/UITesting Link to Demo: skywardsyntax.github.io/UITesting

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/edbe6e0e-58c5-489a-acc6-7c6931e19cef-e11c0cee-d7df-45c4-bf65-06af48672026.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/ad51b9f9-e7c3-4931-abf4-ee53e52c9524-063dbb30-004a-4fb5-8745-9ac505d11ee2.png