React Posts – Hack Club Scrapbook

Posts tagged with :react:

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

I'm working on creating a social media app for musicians: here's a first mini-ship to get across the arcade finish line! The current iteration includes a basic login and media picker screens... React Native is still hard asf... This is an expo app connected to supabase github.com/TSVRN9/the-shed

making my portfolio page(wip) github.com/Raifa21/react-portfolio-page

https://scrapbook-into-the-redwoods.s3.amazonaws.com/f383c84d-1e35-4126-accd-a92e433b8d53-screenshot_2024-08-31_at_19.29.02.png

I made a React Vite, and Python Flask website called HivesAway. The website allows you to login with your account stored on a database, to track your daily consumption of food, and correlate it to your allergies. Sadly I failed to publish it to pages, and I did not wish to buy a domain. Github: github.com/had2020/HivesAway

https://scrapbook-into-the-redwoods.s3.amazonaws.com/2c8d2011-8917-4358-8691-ec88426d1fd7-screenshot_2024-08-31_at_5.03.53___pm.png

Hello everyone! I recently completed the website I made for my club using React, Tailwind, and Framer Motion. It was great practice and fun to make! Check it out! Repo: github.com/tanushchauhan/club-website Link: cscweb.tanushchauhan.com

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/f07e2928-fccb-4e45-9af3-fcc3bb4b3feb-bd23968b-2f94-495c-a778-e12172938cde.png

Worked with react on a portofolio but got a lot of problems with using it with tailwind. So hadn't really anything. I changed to flutter (submitting it because last day arcade)

https://scrapbook-into-the-redwoods.s3.amazonaws.com/bc3ec20a-f9c8-410e-8409-2d1ff534f66d-schermafbeelding_2024-08-29_151251.png

Easily clean your Laptop or PC without causing unwanted input through Keyboard, Trackpad or Touchscreen! Unfortunately I made the decision to code a Windows app with react-native, which doesnt support native access to the Windows APIs, whichI need to block the input though (I did try coding my own Module in C++ for this; wihtout success though). I noticed this at a point where the frontend was basically already finished, so I decided to just finalize the frontend and not code the backend. Maybe I will try again in the future, who knows ;) Here's the link to the GitHub repo and I've attached a video demo of the frontend github.com/CodeModeYT/CleanX Edit: I did write a few simple Python scripts that should do the same thing though, they are located in /src/python !

I worked on some animations for the selfmail homepage and I added a modern changelog. Done is this as usual with framer-motion, react, nextjs and tailwind

I created a react website with a timer. Still have 1 more feature to add but right now it's essentially complete. github.com/CurioScrounge/HealthyReminder healthy-reminder-sigma.vercel.app

Done my react todolist with advanced todolist check out here: advtodo.onrender.com

https://scrapbook-into-the-redwoods.s3.amazonaws.com/1dffefc6-1108-4568-833c-1ba2f12993eb-image.png

Started creating an app to manage expenses with React Native and Expo github.com/Lorenzo0111/Budget

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/a4453eb3-f0a8-46bd-8af7-298edf473b0f-a8f46fbf-a209-4a57-b37c-0304e8647479.png

The web store of Emochoice, a print-on-demand store in Canada. Built with React and Mantine. Improved database model typings github.com/tobycm/emochoice emochoice.ca

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/f94ed4cc-f942-4d3a-8260-fb71cb94b166-d4c38a5c-491b-464b-a329-3bc22ead1bbb.jpeg

My friend and I just finished what I would call the first usable version of my app, StudyBits. TLDR; it’s a Studying Tool, and you should download the app by using the link below! I wanted to create this because of my freshman year of high school; AP HuG had taught me the error in my studying habits, so I decided to try and design a solution. Unfortunately, once sophomore year started, I didn’t have time to finish the app, which I was developing in Ionic at the time. Luckily, #C073DTGENJ2| reminded me of this idea, it also convinced me to switch to React Native, which was much better than Ionic for my purposes. Now the app: StudyBits helps you avoid cramming for your exams by allowing you to study on your phone. You can simply subscribe to a course, which will add a set of questions to your question pool. Then, you can answer questions from your question pool by going to the “Answer” tab in the app which will randomly select a question for you to answer. In the future, we plan to implement an algorithm which selectively chooses questions which will maximize your learning in combination with spacial repetition. You might be wondering who creates the questions, well you do! To create questions, you simply create a channel and a course with whatever units you would like. Then, you create questions in the create tab to your heart’s content. WE NEED YOU TO CREATE USEFUL COURSES! Right now, all we have is a filler brainrot course, so we encourage you to make usable courses (or courses on how to mew). In the future, we plan to use artificial intelligence to inflate our question sets. Finally, you can use our app to motivate you by competing for a spot on the leaderboard. By answering questions correctly, you gain points which rank you higher on our leaderboard, we plan to make this algorithm more complex in the future. Try to beat “The Sigma Rizzler” who is at 10,000,003 points 😉. Testflight Link: testflight.apple.com/join/t0SncOyx Demo video attached below! I know right now the UX is a little inconsistent, and has room for improvement. This app is still a work in progress

…

I completed my project CodeSync- which is a collaborative realtime online code editor made with react,typescript and (one of my fav things) websockets, monaco-editor(for nice and clean editor) As this app heavily uses web sockets, we cannot deploy this on services which use serverless architecture( got to know via stackoverflow) as websockets need fullduplex connection present all the time , hence I used render to deploy this app Github: github.com/jignesh119/CodeSync Live Url: codesync-yim8.onrender.com if the app is down or websockets fail, I strongly suggest u set this app locally following readme to see apps full features try out the app, ping me when the deployment is down, render does that to save resources, as I'm using free plan

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/fdc931a4-090e-44c1-86d4-571f0c9a5ca7-1ea0613b-c276-4aec-9a54-e54d23b59793.png