react emoji

Posts tagged with :react:

EvanGan
@EvanGan7+
Day 27 of #100-days-in-public. Today I spent time getting my react site to compile. Originally it was set so that you have to specify a directory it is going to run in but I managed to change that to the ./ directory so it can run in any direction. I also added some instructions for the user. Tomorrow I am going to work on getting it up on my website and shipping it. After I ship it I think I may try to incorporate an interaction library like MUI or EUI now that I am more familiar with react. On another note, I got my fudge from #10-days-in-public!
https://scrapbook-into-the-redwoods.s3.amazonaws.com/1ac07799-806c-485c-8652-40187636fc7a-image.pnghttps://scrapbook-into-the-redwoods.s3.amazonaws.com/dec7b082-9f47-47c7-8bcc-a6d235a122d2-image.pnghttps://scrapbook-into-the-redwoods.s3.amazonaws.com/28aa44fb-3b12-41f9-85d4-9b878e63c410-screen_shot_2024-03-12_at_5.46.19_pm.png
EvanGan
@EvanGan7+
Day 26 of #100-days-in-public. I want to take a bit of a different approach on my #scrapbook today. Currently my Gemini based rug game is in a state where I am considering #shiping it but have an idea of one last feature that will require me to modify some of my code to create, and make it much more original. I think I may ship the current version tomorrow and then continue working on the last feature. Today I had a bit of a realization why react is such a good framework. Basically, my goal is to have a text box pop up when the user needs to enter their api key and not show up if it is already in the URL(see yesterdays video). The beauty of react is that I can do this very simply in one element by simply detecting if they need to enter a key, and if so returning a different piece of HTML. If they already have a key then I can simply return nothing and nothing pops up. With React I can just throw this element in anywhere and it just pops up when it needs to and disappears when it is not needed. Also, React allows me to easily modify page layout, say for example if I wanted my chat box to be below the input I can do that with swapping one line of code.
https://scrapbook-into-the-redwoods.s3.amazonaws.com/75c0d84a-376d-4b14-8291-60745b34f170-screen_shot_2024-03-11_at_10.13.57_pm.pnghttps://scrapbook-into-the-redwoods.s3.amazonaws.com/47ec7cb2-1fc5-4a1d-8528-323680613edd-screen_shot_2024-03-11_at_10.10.34_pm.pnghttps://scrapbook-into-the-redwoods.s3.amazonaws.com/64e81165-6e8c-4ea5-8a92-2a428ef7be5f-screen_shot_2024-03-11_at_10.06.31_pm.png
phaedra
@phaedra0
I built a student portal/site for my school! In the future, there may be AI and official district portal features thrown in as well, but at the moment it's primarily being used for my school's course selection since that's what's happening right now at school. I'm so happy to have finished building it! It's a project that I've been hoping to launch since my freshman year of high school but never had the coding expertise to execute, and now it's open-source and live for the 1,700+ students at my school to access! Using Next.js, React, and the magic of the Google Sheets API, I was able to sell the course catalog that my school has (and I now encourage you to check it out)! It's now available at mybla.vercel.app :D It's been awkward walking around and seeing people compliment the project due to seeing my name in weekly announcements but I'm happy that it already has a happy user base even after being released for a short while.
https://scrapbook-into-the-redwoods.s3.amazonaws.com/58eee7b0-4d5a-4075-8ad8-73de2e476309-image.pnghttps://scrapbook-into-the-redwoods.s3.amazonaws.com/4f6fb409-4a02-4301-8411-56489af79756-image.png
Doruk
@Doruk0
React is going to be easy. Very excited! tags: js, react, linux, firefox, website, designing, programming and coding
https://scrapbook-into-the-redwoods.s3.amazonaws.com/10676bbe-9824-4a59-9321-37275a3da22f-image.png
firefoxlogo emoji
js emoji
linux emoji
wom emoji
react emoji
Aram
@Aram0
๐Ÿšข WEBSITE SHIP ๐Ÿšข Coming soon to my website: a live widget showing what I am listening to! This was a fun one as I was learning how more secure APIs work and will come in useful for future projects! Built with :nextjs:, :react:, :typescript: and :tailwind: ! Inspired by @itsmingjieโ€™s monolith website widget! Coming soon to an aram.sh near you!
cytronicoder
@cytronicoder0
mmm, there's #100-days left of 2023 - what better way to kick things off than a revamp of my life? ๐Ÿ’œ introducing v2.cytronicoder.com, the latest edition of my portfolio which I started last year. featuring the comeback of my โœจ projects โœจ showcase, as well as a brand new purple theme + profile picture rotation based on my Slack profile pic over at slack.cytronicoder.com! :slack: additionally, non-hacky stuff: I opened up (sourced?) my two spotify playlists @ my profile (psst listen to the alternate version its honestly better) and my React workshop @ buildingbloCS! go check them out, and feel free to reuse the workshop materials :roo-love: finally, i'm really excited to tell yall that my abstract on single-cell embeddings and spacial distributions (quite a mouthful tbh) has been selected for both a poster and oral presentation @ GIW ISCB-Asia 2023 :partyparrot: now comes the part where I go on an indefinite hiatus to work on my final paper, presentation, and poster + school summatives
https://scrapbook-into-the-redwoods.s3.amazonaws.com/e82f9cf8-3612-42aa-a7e0-dea180dcbf79-screenshot_2023-09-22_at_22.46.05.png
6ix4
@6ix40
github.com/6ix4/WhoAmI Vite React Project renders images into animations. Now I use the cache for next step rendering. I want to use the technician sprite animation to make a simple web game in the future. This project was inspired by hack club members. I made a new feuter and would like to update more.I hope you like this. Sorry if I share my work in the wrong channel, you can recommend me, I just have Github and other social media for not very long. nice to meet you all
https://scrapbook-into-the-redwoods.s3.amazonaws.com/10f93ac2-f446-400e-a20b-cc02582f3a99-img2.png
react emoji
github emoji
hackclub emoji
ZeroQL
@ZeroQL0
#w-of-the-day day 220 today i learnt how to create my own react hooks, among other things in the react egghead course which is amazing
https://scrapbook-into-the-redwoods.s3.amazonaws.com/1c1ba786-fe43-49f2-ae31-471a80fa4ed6-image.png
react emoji
ZeroQL
@ZeroQL0
#w-of-the-day day 212 Tinkered with mantine and its ui elements. Creating tables and image cards and such, i've got the hang of react now
https://scrapbook-into-the-redwoods.s3.amazonaws.com/67a48029-9afb-4c8b-b385-6f643dd65a88-image.png
summer-of-making emoji
react emoji
sheryl
@sheryl0
getting back into react+tailwind, and pics from summer so far!
https://scrapbook-into-the-redwoods.s3.amazonaws.com/206fe56a-c69d-4256-8927-a1ae5efad25f-screen_shot_2023-08-05_at_12.56.53_am.pnghttps://scrapbook-into-the-redwoods.s3.amazonaws.com/a7036ff5-7627-4289-b095-bab6fb034fbd-screen_shot_2023-08-05_at_12.46.13_am.pnghttps://scrapbook-into-the-redwoods.s3.amazonaws.com/46cbfba9-8e5b-4a39-85b4-c51fd35215bc-screen_shot_2023-08-05_at_12.57.19_am.pnghttps://scrapbook-into-the-redwoods.s3.amazonaws.com/456f5e2c-483f-4a03-a509-b1b23637c303-screen_shot_2023-08-05_at_12.57.04_am.pnghttps://scrapbook-into-the-redwoods.s3.amazonaws.com/0031e036-93a5-4c5f-bcfe-d5d10807853f-screen_shot_2023-08-05_at_12.56.36_am.png
react emoji
tailwind emoji
ZaynB
@ZaynB0
After following the React tutorial on Tic-Tac-Toe, I decided to make my own Connect Four!
https://scrapbook-into-the-redwoods.s3.amazonaws.com/1e87c3a7-745e-400a-93e2-1f09c3b1d388-image.png
summer-of-making emoji
react emoji
ZeroQL
@ZeroQL0
#w-of-the-day day 209 Still pushing through the react course, Learnt how to use fetch with useEffect and how css styling works in react
https://scrapbook-into-the-redwoods.s3.amazonaws.com/e9ca78f1-3318-4134-8549-7bcdc19170d0-image.png
react emoji
ZeroQL
@ZeroQL0
#w-of-the-day day 208 Practiced more of react components and css by making a couple of mockups.
https://scrapbook-into-the-redwoods.s3.amazonaws.com/53907156-a500-4fbd-9d9d-6ab053a0d0b9-image.png
summer-of-making emoji
react emoji
ZeroQL
@ZeroQL0
#w-of-the-day day 200 learning react, there's a ton of cool libraries i wanna use that are not in svelte so i'm sticking with it.
https://scrapbook-into-the-redwoods.s3.amazonaws.com/12319efe-1e47-4702-a07b-9e05c4505260-image.png
react emoji
Shreeya
@Shreeya0
Learning react
https://scrapbook-into-the-redwoods.s3.amazonaws.com/a813cf32-2136-4480-bf81-78bf1064c73c-img_20230610_152427.jpg
react emoji
jzaleta
@jzaleta0
I finally finished my confetti thing for #angelhacks-site! :angelhacks: github.com/hackclub/angelhacks3/pull/8 :pr: This is my first time working with Next.js :nextjs: and I wanted to see if I could code something with it without reading any docs! *How?* โ€ข Well, first I had an error, I couldn't start the dev environment! :pensive-wobble: To fix this I (somehow) installed next globally and that allowed my package.json :npm: to run next build โ€ข After that, I wrote the confetti code and implement it on a React :react: component but I also don't know any react so it didn't work :eggsdee: โ€ข So I added the confetti code into the already existing PhotoGallery component! :yay: Everything looked good, but then I got this error: ReferenceError: document is not defined :errors: โ€ข To fix that, I run my code client side after watching a small tutorial and it ended up like this:
import Masonry from 'react-masonry-css'
import styles from './PhotoGallery.module.scss'
import { Nunito } from 'next/font/google'
import { useEffect } from 'react'

const nunito = Nunito({
  weight: ['400', '800'],
  subsets: ['latin']
})

export function Button({ children, fontSize = '7rem', ...props }) {
  const handleClick = () => {
    import('js-confetti').then(({ default: Confetti }) => {
      const confetti = new Confetti()
      confetti.addConfetti({
        emojis: ['๐ŸŽฎ', '๐Ÿ‘พ', '๐Ÿ•น๏ธ', '๐Ÿ’ป', '๐Ÿ“ธ', '๐ŸŽง', '๐ŸŽจ', '๐Ÿชฝ']
      })
    })
  }

  return (
    <button className={styles.button} onClick={handleClick} {...props}>
      <span className={styles.shadow} />
      <span className={styles.edge} />
      <span
        style={{ fontSize }}
        className={`${styles.front} ${nunito.className}`}>
        {children}
      </span>
    </button>
  )
}

function Image({ src, text }) {
  return (
    <div className={styles.photo}>
      <img src={src} width="auto" />
      <p>{text}</p>
    </div>
  )
}

export default function PhotoGallery() {
  useEffect(() => {}, [])
  return (
    <div className={styles.photoGallery}>
      <div className={styles.photos}>
This was very fun to work with, and definitely I need to properly learn Next.js on the future. :salute:
jzaleta
@jzaleta0
Yesterday I turned 19-years-old. ๐Ÿฐ *And I decided to reboot my coding journey and start all over again with a better, more organized design, focused in building in public.* The plan is to become a full stack web developer so I'll start first with Next.js/React! :nextjs: :react:. Also I made another profile repo for my GitHub, changed my username and deployed it at a Jekyll website with Ruby! :ruby: :github: github.com/jzaleta/jzaleta jzaleta.github.io/jzaleta
https://scrapbook-into-the-redwoods.s3.amazonaws.com/d767b56e-ca19-420e-ad60-8ec1d555bf0e-captura_de_pantalla_2023-05-15_a_la_s__11.32.32.png
nextjs emoji
github emoji
react emoji
js emoji
spring-of-making emoji
Samarth_Verulkar
@Samarth_Verulkar0
Some React.js ....
https://scrapbook-into-the-redwoods.s3.amazonaws.com/9baac40b-e7f4-472e-baf8-9587b2721979-screenshot__326_.png
js emoji
spring-of-making emoji
react emoji
sporeball
@sporeball0
mentoring at Corpus Hacks today, using it as an opportunity to learn React and other such things
https://scrapbook-into-the-redwoods.s3.amazonaws.com/ecb49227-b4ee-48df-8750-076ed2ab2263-image.png
spring-of-making emoji
react emoji
Sarthak
@Sarthak0
Started building a project to assist people in research rabbit holes and keep track of the path they have taken across paper references! Made a proof of concept in MIT App Inventor earlier this year and am now transitioning to making a more complete project using React.js.
https://scrapbook-into-the-redwoods.s3.amazonaws.com/eabeb5db-1bd1-474c-933d-14bd5cb313c0-image.png
HenryBass-U02KEJ8T6D8
@HenryBass-U02KEJ8T6D80
Learned react js today, and used express + node + mongo db to make this site. You can submit posts, and read the latest posts. It's really simple, I just wanted a project to learn react with Also, Henrybook is a running joke since 3rd grade: Each time I've made some app that vaguely resembles a social media of some form, I've named it Henrybook
https://cloud-18vpsdtyu-hack-club-bot.vercel.app/0image.png
js emoji
react emoji
wom emoji
HenryBass-U02KEJ8T6D8
@HenryBass-U02KEJ8T6D80
Today I tried learning react js, because I'm tired of hearing people talking about JS frameworks and whatever while I have no clue what they're talking about Also, as a quick few hour project, learned GLSL for the purposes of making the absolutely atrocious shader depicted below I wasted about 50% of my time working on that by not being able to figure out that depth buffers aren't linear lmfao
https://cloud-6o6tljv48-hack-club-bot.vercel.app/0image.pnghttps://cloud-eqvkc8frk-hack-club-bot.vercel.app/0screenshot_from_2023-03-02_22-26-31.png
react emoji
wom emoji
js emoji
BenRosenfeld-U03TE042FQW
@BenRosenfeld-U03TE042FQW0
did some react coding today. Working on a big project
https://cloud-av00sgnaa-hack-club-bot.vercel.app/0screenshot_2023-01-04_at_9.55.18_pm.png
wom emoji
react emoji
ShubhamPatil
@ShubhamPatil0
back to working on my travel app. react native is still a pain in the butt for me :nooo:
https://cloud-rbcoevl80-hack-club-bot.vercel.app/0image.pnghttps://cloud-4jz1xj2h9-hack-club-bot.vercel.app/0image.png
wom emoji
react emoji
BibhavPaudel-U04ANSA6FGT
@BibhavPaudel-U04ANSA6FGT0
OHH! Missed it again .. Now Starting over with > Day 1 of #10-days-in-public! Worked on a Project Based on React.js , Coded some REST API scripts today.
https://cloud-c8dq5ccgn-hack-club-bot.vercel.app/0image.png
react emoji
js emoji
10daysinpublic emoji
cytronicoder
@cytronicoder0
๐Ÿš€ Day 1/10: Shipped part 2 of my 4-part workshop on shipping your first React website (portfolio)! The next few updates will be about finishing this up and starting to plan for the data analysis workshop. #10-days-in-public
https://cloud-454pnvynk-hack-club-bot.vercel.app/0screenshot_2022-11-28_at_9.38.42_pm.pnghttps://cloud-he61qo5ju-hack-club-bot.vercel.app/0screenshot_2022-11-28_at_9.38.18_pm.png
react emoji
10daysinpublic emoji
DevIos
@DevIos0
Done with a login system in react integrated for #hkgi, will give it more polish and contiune on other task list :duck-dance:
https://cloud-ks9zsqw2n-hack-club-bot.vercel.app/0image-7.png
react emoji
adelly13
@adelly130
currently trying to learn react.js so that I can rebuild my personal website!
https://cloud-5v3u6nkcd-hack-club-bot.vercel.app/0image.png
react emoji
js emoji
aaryan
@aaryan0
OMG TIL that React StrictMode (which is enabled by default in create-react-app) renders components twice in order to detect any problems with your code and warn you about them. Even react docs mentions this! How I came across this: I added a Toast component in my useEffect, and it was showing up twice on every load. Which lead me to a LOT of reading and googling, and realizing I'm using useEffect wrong and React is trying to tell me that :) This was fun.
https://cloud-lm8hfp1ww-hack-club-bot.vercel.app/0image.pnghttps://cloud-50g1aibrg-hack-club-bot.vercel.app/0image.png
burnt-toast emoji
goose-honk-technologist emoji
react emoji
aaryan
@aaryan0
Making a full stack application and trying out FastApi :python: . It's a leads management system (CRM). Frontend in react and bulma, and backend in fastapi โœจ
https://cloud-m3xybr6sz-hack-club-bot.vercel.app/0image.png
react emoji
python emoji
Jaden
@Jaden0
Day 6 of #10-days-in-public Today I spent more time working on a website with the OPEN SOURCE FRAMEWORK ASTRO. Turns out that you can include React components in Astro. I think I understand how it works now. Hopefully I can send this to the requester soon!
https://cloud-dxs3i4syg-hack-club-bot.vercel.app/0image.png
react emoji
astro emoji
tinu
@tinu0
day 3 of #10-days-in-public today I worked on the first iteration of theoretical grade editing and after fiddling around with react state for bit I got it working!!!
https://cloud-gz4aedd51-hack-club-bot.vercel.app/0image.png
linkai
@linkai0
#10-days-in-public day 2/10 today i kept working on the polistat website for my class (see my day 1 post for more info) โ€” the websiteโ€™s going to have state and candidate descriptions for each senate and governor race, and we got everyone in the class to write md files. i set up an mdx file system that pulls md files w/ react components and renders pages for them. i spent some time today parsing through the files and fixing formatting errors that the class made ๐Ÿ˜… im expecting the website to go live this weekend ๐Ÿ˜
https://cloud-8lbcwj3oj-hack-club-bot.vercel.app/0screen_shot_2022-10-06_at_11.02.39_pm_copy.pnghttps://cloud-g0ds47tht-hack-club-bot.vercel.app/0screen_shot_2022-10-06_at_10.59.36_pm_copy.png
aaryan
@aaryan0
Made a distance calculator, that shows the route and time to travel between two cities. Made using react, chakra UI, and react-google-maps/API that uses Google maps API V3. Deployed on: gmaps.aaryanporwal.com
https://cloud-eaztkvca7-hack-club-bot.vercel.app/0screenshot_20220930-155924.png
google emoji
react emoji
aaryan
@aaryan0
Built the 2048 game in react! Check it out at 2048.aaryanporwal.com Also have to add a score feature, will decide on the score logic later and have to add mobile phone support as well (currently using keyboard keydown events, will be fun to see what events trigger in phone on swipes ๐Ÿง ) Excited to build this ๐Ÿ—๏ธ
https://cloud-f0bsp7rn0-hack-club-bot.vercel.app/0screenshot_20220926-021042.png
aaryan
@aaryan0
Making 2048 game in react! It's complex and needed a lot of thinking. Also a lot of functions and hooks ๐Ÿ˜‹
https://cloud-if0qz9srf-hack-club-bot.vercel.app/0image.png
aaryan
@aaryan0
TIL why we need to wrap multiple JSX tags in react.
https://cloud-hwaqjxvcm-hack-club-bot.vercel.app/0screenshot_2022-08-13-14-33-25-90_40deb401b9ffe8e1df2f1cc5ba480b12.jpg
summer-of-making emoji
react emoji
Aadit
@Aadit0
Ayy I got airtable setup with a next+react form!
https://cloud-ix97rhqob-hack-club-bot.vercel.app/0image.pnghttps://cloud-h871u3map-hack-club-bot.vercel.app/0image.png
summer-of-making emoji
react emoji
Aadit
@Aadit0
it took me 1.5 hours of debugging to get this... I hate react
https://cloud-6o238txsd-hack-club-bot.vercel.app/0image.png
react emoji
summer-of-making emoji
dino-debugging emoji
upvote emoji
Aryan_Garg
@Aryan_Garg0
Made The React Dashboard With Good UI.
https://cloud-gmupj84ae-hack-club-bot.vercel.app/0capture.png
summer-of-making emoji
react emoji
Aryan_Garg
@Aryan_Garg0
Coding The Application In React.js
https://cloud-nc33ljwrw-hack-club-bot.vercel.app/0capture.png
spring-of-making emoji
react emoji
js emoji
Aryan_Garg
@Aryan_Garg0
Learned About The React Components And Frameworks.
https://cloud-l2rsoa715-hack-club-bot.vercel.app/0capture.png
spring-of-making emoji
react emoji
Aryan_Garg
@Aryan_Garg0
Making the cool dashboard in React.js with use of Frameworks and libraries.
https://cloud-kamr09ckw-hack-club-bot.vercel.app/0capture.png
react emoji
js emoji
cooll-dino emoji
spring-of-making emoji
m04
@m040
Framer Motion and react-scrollama
spring-of-making emoji
react emoji
m04
@m040
Implementing scrolling stuff with react-scrollama and niue :niueparrot:
https://cloud-otkldajff-hack-club-bot.vercel.app/0image.png
react emoji
spring-of-making emoji
rithul
@rithul0
I would call this progress! I get a html value, Time to hook this up to a react app to get myself a parser running, Also I gotta do some codemirror stuff so its gonna take time!
https://cloud-ftpxkz8al-hack-club-bot.vercel.app/0cleanshot_2022-06-01_at_00.39.03_2x.png
react emoji
spring-of-making emoji
jzaleta
@jzaleta0
Iโ€™m going to be working on a Raycast :raycast: extension! This is going to be very useful to learn React :react: and TypeScript :typescript: ! Also hereโ€™s a cool :cooll-dino: landscape ๐ŸŒ† picture of the day! ๐Ÿ“ธ
https://cloud-ie4ej1qcc-hack-club-bot.vercel.app/0img_20220521_204224.jpghttps://cloud-51x8jf79e-hack-club-bot.vercel.app/0screenshot_20220521_201957.jpghttps://cloud-qrvs0ahe4-hack-club-bot.vercel.app/0header.png
m04
@m040
Working on a neat image carousel thing in React!
https://cloud-9nyw1veom-hack-club-bot.vercel.app/0image.pnghttps://cloud-f10alnukm-hack-club-bot.vercel.app/0image.png
spring-of-making emoji
expanding_brain_4 emoji
react emoji