nextjs emoji

Posts tagged with :nextjs:

ThomasStubblefield
@ThomasStubblefield7+
Started Jams development. Postgres Database setup & starting routing on the NextJS side. (no styling yet of course) (also no real content yet)
nextjs emoji
postgres emoji
spring-of-making emoji
arav emoji
Polar
@Polar1
https://scrapbook-into-the-redwoods.s3.amazonaws.com/13b74262-ed9e-45d3-b436-b850a9f09b27-lxz2m0vsbfw8jtxv_2x.png
github emoji
js emoji
vercel emoji
goose-honk-technologist emoji
nextjs emoji
spring-of-making emoji
jzaleta
@jzaleta6
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
@jzaleta6
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
AkshithGarapati-U035DSTF9NX
@AkshithGarapati-U035DSTF9NX0
Building akshith.io with like an “intro” sorta thingy (idk what i’m doing) using next, tailwind
https://scrapbook-into-the-redwoods.s3.amazonaws.com/c267f194-daa0-4a84-b01a-0eb4b45bccab-screenshot_2023-05-14_at_2.26.29_pm.png
nextjs emoji
tailwind emoji
ThomasStubblefield
@ThomasStubblefield7+
What if your club could collaborate with other clubs? What if you could connect with another club for a mini-hackathon or even make new friends while traveling and discovering a Hack Club in another city? The Club Directory unlocks the power of cross-club collaboration, allowing clubs to transcend boundaries and create together. If this interests you, join #clubs-directory @Arpan had this vision and shared it with me, and we decided to make it a reality. We've been working on the tool for about a week (maybe two). I'll catch you up on what we've done in the following screenshots: Screenshot 1: Arpan and I collaborated on a call to create the general user flow for the Club Directory. Screenshot 2: Arpan and I split ways, and he began focusing on the backend while I focused on the frontend. See the UI prototype I created attached. Screenshot 3: We realized we were a bit out of scope, so we narrowed the scope for our MVP so we can ship ASAP and work more closely with the community. Screenshot 4: I'm coding the frontend MVP in NextJS while Arpan builds the backend in FastAPI. p.s. currently I am working on multiselect & making that experience awesome & next I'll focus on responsiveness & map view also privacy is a big concern and we're currently trying to work through how we can allow clubs to opt-in (or maybe opt-out) of the Club Directory) all data shared here is fake club data, dw we're not revealing real data in this post the old internal name was Club Network and the new name is Club Directory
https://scrapbook-into-the-redwoods.s3.amazonaws.com/a1a96910-eeef-428b-b5f2-89878e11ec4b-screenshot_2023-05-05_at_9.28.21_am.pnghttps://scrapbook-into-the-redwoods.s3.amazonaws.com/58d10494-af26-4603-9ec1-8542985f0884-screenshot_2023-05-05_at_9.30.51_am.png
arav
@arav1
🔗 It was a little difficult figuring out what event people came from when they joined the slack. But, gone are the days of pre-filling the welcome reason or sending them a DM. As Angelhacks got a little closer, after talking with some people, I thought it would make more sense to have a new parameter on the join form that would keep track of where they came from, add them to the right channels automatically, and give them a chance to introduce themselves with the welcome reason. For example, if you joined from hackclub.com/slack/?event=angelhacks, or something like hackclub.com/slack/?event=angelhacks-toronto or any future event, Toriel will check for the event name in it's transcript, and add you to #angelhacks, and so forth. It was my first time working with :prisma: Prisma and some :nextjs: stuff , and I have to say they're both supper cool and fun to work with (well for the most part, this took me longer than I would like to admit :p)
Sarthak
@Sarthak0
Started tinkering with GPT-3 with buildspace. I'm making a little UIL study tool for my team so that we can make studying more efficient and fun. Currently thinking about making the model answer in pirate voices and including other random easter eggs to make studying a little more interesting! Learned about prompt engineering as well as explored Next.js's backend serverless functions a little more.
https://scrapbook-into-the-redwoods.s3.amazonaws.com/a64c0210-f967-411d-b56f-22b12bd9b92a-image.png
sonicx180
@sonicx1803
Creating my dad's website. I tried to do this like 5 times before (trying to decide which stack I should use) and ended up using Next.js . Follow my progress here : github.com/sonicx180/ginz-website
https://cloud-qbr5o3iw7-hack-club-bot.vercel.app/0image.png
wom emoji
js emoji
nextjs emoji
cytronicoder
@cytronicoder7+
This website represents the culmination of my day's work! I have successfully migrated the original React site to Typescript + Next.js and connected the RoBERTa base OpenAI Detector to an API route. Future plans would be to start with the extension, write a small disclaimer about the model's limitations, and maybe conduct some research into how these output detector models work. Check out a sneak peek at the image (I promise this description is not generated - the model is just originally designed for GPT2 detection 👀)
https://cloud-mhytt4rnf-hack-club-bot.vercel.app/0screenshot_2023-03-01_at_11.20.31_pm.png
wom emoji
nextjs emoji
cfanoulis
@cfanoulis0
well i mean its time i posted something for the winter wonderland project heh. So I setup my raspi, setup the printer & ended up rewriting my nextjs template to... rust & handlebars. eh. At least the kiosk index page works now! (as well as the done page, not pictured)
https://cloud-5wt8v7jdp-hack-club-bot.vercel.app/0image.png
wom emoji
winter-hardware-wonderland emoji
nextjs emoji
rustlang emoji
DavidArogunre-U03F2KLJKN3
@DavidArogunre-U03F2KLJKN30
Well I haven't started the hardware part yet but just building a web app for it using nextjs
https://cloud-g7v07tmgo-hack-club-bot.vercel.app/0image.png
wom emoji
nextjs emoji
hardware emoji
winter-hardware-wonderland emoji
cytronicoder
@cytronicoder7+
Shipped out a "currently listening to" widget to my portfolio! Had lots of fun connecting my Spotify account to Next.js and working with access tokens. I also connected Gitub to list out some of my projects on the site via Octokit.
https://cloud-4dsybus7p-hack-club-bot.vercel.app/0screenshot_2023-02-03_at_10.56.56_pm.png
wom emoji
js emoji
nextjs emoji
spotify emoji
christina695
@christina6950
Next.js! Got started on my first website using Next.js . . . It may- or may not- be a project where I help the local library create a Legos Station for kids
https://cloud-514w3juch-hack-club-bot.vercel.app/0screen_shot_2023-01-27_at_8.38.36_pm.png
nextjs emoji
js emoji
upvote emoji
wom emoji
provsalt
@provsalt0
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.pnghttps://cloud-2l4dwi45p-hack-club-bot.vercel.app/0image.pnghttps://cloud-9awlv1v1w-hack-club-bot.vercel.app/0image.pnghttps://cloud-k6mcmga1a-hack-club-bot.vercel.app/0image.png
lachlanjc
@lachlanjc0
Presenting my latest project, Decarbonize: The Game! It’s an interactive game with laser-cut pieces & iPad/Next.js software. You’re in control of the electric grid for 50 years: build out solar, wind, natural gas, & goal to explore the effects on carbon emissions & energy prices. Thanks @matthew for filming.
reesericci
@reesericci3
day 9/10 for #10-days-in-public: I learned about next.js api routes for the obl.ong backend
https://cloud-c41axzxtt-hack-club-bot.vercel.app/0image.png
js emoji
nextjs emoji
10daysinpublic emoji
adelly13
@adelly130
day 8 of #10-days-in-public! i built and deployed the first version of my personal website which was built with next.js and tailwind css today using vercel! still need to fix up the meta data, but so happy everything is coming together!
https://cloud-himfayigo-hack-club-bot.vercel.app/0image.png
10daysinpublic emoji
tailwind emoji
vercel emoji
nextjs emoji
js emoji
maggie
@maggie2
day 7 of #10-days-in-public -- launched #epoch-satellites in the slack & sent out emails for #epoch-ba (that unfortunately landed in :spam: 😭) also got nextjs conf swag a few days ago but forgot to post
https://cloud-12i50gysi-hack-club-bot.vercel.app/0img_20221201_155956553.jpg
10daysinpublic emoji
slack emoji
nextjs emoji
epoch-ba emoji
toby
@toby0
heyy everyone!! here's my update for day 3 of #10-days-in-public!! today, i worked a bit on the api, and started using next.js' dynamic api routing! i'll post a video update when i get it finished :D (p.s, i was messing around with stable diffusion 2, and here's one of the images it generated!) (and one more thing - here are some of the highlights from my apple music replay!)
https://cloud-10e219sxl-hack-club-bot.vercel.app/0apple_music_replay_2.pnghttps://cloud-896w6gx7a-hack-club-bot.vercel.app/0sd-1.jpeghttps://cloud-eok82re0o-hack-club-bot.vercel.app/0apple_music_replay_3.pnghttps://cloud-4uk8aa4z5-hack-club-bot.vercel.app/0scr-20221130-txn.png
10daysinpublic emoji
applemusic emoji
new_spotify emoji
nextjs emoji
adelly13
@adelly130
day 1/10 of #10-days-in-public! working on building my personal website using next.js and tailwind css! today, i set up the repo and put in a rough sketch of the homepage that i had designed on figma a few weeks prior! first time using next.js and tailwind css in combination, so still getting used to everything 😄
https://cloud-lsohetkqu-hack-club-bot.vercel.app/0image.png
figma emoji
10daysinpublic emoji
js emoji
tailwind emoji
nextjs emoji
maggie
@maggie2
nextjs conf!
https://cloud-a1ove1pdk-hack-club-bot.vercel.app/0img_20221025_104438263.jpghttps://cloud-47fo6wg97-hack-club-bot.vercel.app/0img_20221025_191231889.jpghttps://cloud-1y37neubp-hack-club-bot.vercel.app/0img_20221025_102839959.jpg
nextjs emoji
Lucas
@Lucas2
NEXT.js conf!
https://cloud-n8ebbnssv-hack-club-bot.vercel.app/0img_20221025_153339.jpg
nextjs emoji
zrl
@zrl1
Day 9/10 of #10-days-in-public! I’ve been working to rebuild zachlatta.com, and I finally put the new site online! I moved it from beta.zachlatta.com to zachlatta.com, added indicators of the modification & creation dates, and linked to the GitHub repo from the homepage. It’s still pretty basic and I’m pretty new to Next.js / modern web dev in general, but I’m proud of getting it to this point and excited to continue iterating on it after the 10 day challenge! At some point I still want to add some sort of streak mechanism…
https://cloud-4izbt0cyt-hack-club-bot.vercel.app/0screen_shot_2022-10-14_at_12.15.22_am.pnghttps://cloud-bg7vdxb7m-hack-club-bot.vercel.app/0screen_shot_2022-10-14_at_12.14.51_am.png
nextjs emoji
js emoji
github emoji
rajanagarwal
@rajanagarwal0
day 8/10 — was really busy today with school and scholarships, so didn’t get too much done. sent out a bunch of emails to meet with professionals and potential customers — for now, enjoy this video of a now-optimized knowledge graph that works in nextjs now!
tinu
@tinu0
day 8 of #10-days-in-public! can't believe there's only 2 days left. Today, I drafted a landing page for my app grade melon using tailwind. I used framer motion for staggered slide in animations (not shown here). Still not sure how I wanna layout the images.
https://cloud-aoe3w7rej-hack-club-bot.vercel.app/0image.png
zrl
@zrl1
Day 7/10 for #10-days-in-public! I’ve been rebuilding zachlatta.com, with the current work-in-progress version of the site live at beta.zachlatta.com. I was out sick again today, but I wanted to make at least some progress on the site. I focused on rewriting the code that pulls the files and their contents from github.com/zachlatta/public-notes into the Next.js codebase for static page generation. I was successfully able to get it to pull all of the files - including through all the subfolders - with the screenshotted code. From there, I then added support for notes in subfolders using catch-all routes from Next.js’s dynamic routing. Next steps: I want to add more metadata to the generated pages, like last edited time / created time. I also want to add a better way to discover notes from my homepage - maybe a tree view of all the notes, and some sort of way to see the 3 most recently modified notes? Excited about the progress so far!
https://cloud-r3l8bef3v-hack-club-bot.vercel.app/0screen_shot_2022-10-11_at_10.10.09_pm.png
github emoji
goose-honk-technologist emoji
js emoji
nextjs emoji
Andrew
@Andrew0
Day 6 of #10-days-in-public I worked on turning the figma mockup into a next app, (its not done yet so it looks pretty bland)I also plan to use framer tomorrow or on day 8 to implement an animation on “Redis” to switch it out with other text (postgres, kafka) etc I also got around to making a mockup for the web dashboard (work in progress), id appreciate any feedback. i also want to add running databases to this mockup soon, most likely tomorrow 🙂
https://cloud-ezawrkuyp-hack-club-bot.vercel.app/0macbook_pro_14__-_1.pnghttps://cloud-a5w455iae-hack-club-bot.vercel.app/0screen_shot_2022-10-10_at_3.31.21_pm.png
nextjs emoji
Andrew
@Andrew0
Day 5 of #10-days-in-public I modified our current landing page to fit our color scheme which is pretty basic for now, I’m going to turn the figma mock-up into a real site so i can be deploy it tonight. I’m going to use nextjs and cf pages :) Also I’d love to get feedback on the landing page or what can be improved, I’m not good at figma so id appreciate it 🤞. other than this I didn’t do that much work on my project, although tomorrow I plan to get a lot done.
https://cloud-pa9dwg44a-hack-club-bot.vercel.app/0img_3434.jpg
nextjs emoji
figma emoji
toby
@toby0
here's my update for day 4 of #10-days-in-public! i very quickly made a landing page for tilde using next.js and tailwind. here's a link to the github repo: github.com/developedbytoby/tilde-site!
https://cloud-m0nf7co1k-hack-club-bot.vercel.app/0image.png
github emoji
yay emoji
tailwind emoji
nextjs emoji
zrl
@zrl1
Day 3/10 of #10-days-in-public! I’m rebuilding zachlatta.com and today I got the new Next.js site I’m making to pull content from github.com/zachlatta/public-notes during static site generation. It was really helpful to read through the code of github.com/hackclub/workshops to figure out how to do this. I also got it deployed to beta.zachlatta.com. So now you can go to beta.zachlatta.com/readme to see the contents of github.com/zachlatta/public-notes/blob/master/readme.md! Next steps: Figure out how to list all public posts on the homepage, make sure the site works when notes are in subfolders (ex /foobar/foo.md instead of just /foo.md), and polish! Then maybe try implementing some sort of streaks mechanism.
https://cloud-l9f17lr37-hack-club-bot.vercel.app/0screen_shot_2022-10-08_at_1.06.25_am.pnghttps://cloud-862y27o0z-hack-club-bot.vercel.app/0screen_shot_2022-10-08_at_1.08.41_am.png
js emoji
nextjs emoji
zrl
@zrl1
Day 2/10 of #10-days-in-public! I’m working to rebuild my personal website, zachlatta.com, over the next 10 days with the key new feature being the ability to render content from a subset of my notes in Obsidian. Today I focused on getting the script I wrote to separate out my Obsidian notes into a separate repo deployed to a server and running every 15 seconds. I ran into some tricky issues around authentication, but got it working! All the public notes are now being pushed to github.com/zachlatta/public-notes. Next step is to build out the new Next.js site to render those notes on zachlatta.com in a nice clean way. I’m also thinking of adding some sort of GitHub commit chart-esque visual to the new site, and perhaps a streak mechanism too.
tinu
@tinu0
day 1/10 of #10-days-in-public!!! I worked on making my student vue client grade melon mobile responsive with tab navigation at the bottom
https://cloud-4iq19ekwj-hack-club-bot.vercel.app/0screenshot_2022-10-05-19-22-19-88_40deb401b9ffe8e1df2f1cc5ba480b12.jpg
reesericci
@reesericci3
thanks vercel!!
https://cloud-7cxbpto6v-hack-club-bot.vercel.app/0image.png
vercel emoji
nextjs emoji
sheryl
@sheryl0
markdown blog w next.js
https://cloud-2dhqahehw-hack-club-bot.vercel.app/0screen_shot_2022-09-14_at_11.21.53_am.pnghttps://cloud-828ae99x7-hack-club-bot.vercel.app/0screen_shot_2022-09-14_at_11.05.55_am.png
nextjs emoji
summer-of-making emoji
blobhypedance emoji
js emoji
maggie
@maggie2
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.jpghttps://cloud-8aw8f1qal-hack-club-bot.vercel.app/0image.pnghttps://cloud-kmtps02nw-hack-club-bot.vercel.app/0img_20220913_154153406.jpg
nextjs emoji
stickers emoji
svelte emoji
vercel emoji
summer-of-making emoji
aaryan
@aaryan0
https://cloud-no49kvosn-hack-club-bot.vercel.app/0screenshot_2022-09-03-01-42-59-00_40deb401b9ffe8e1df2f1cc5ba480b12.jpg
audreyolafz
@audreyolafz0
nextjs!! >>>>>
https://cloud-n43l3d2fk-hack-club-bot.vercel.app/0screenshot_2022-09-03_001321.png
summer-of-making emoji
nextjs emoji
m04
@m043
https://cloud-jv70f5qdu-hack-club-bot.vercel.app/0screenshot_20220902-092625.png
jc
@jc2
I rewrote my blog using Next.js, MongoDB, and Sass with Chakra UI! Located at jianminchen.com. Also, the video is super neat, it was done entirely on my phone!
nextjs emoji
summer-of-making emoji
js emoji
cfanoulis
@cfanoulis0
day 2: finished moving stuff back to nextjs (sorry redwood!), and now we finally have a working api with 99% less bureaucracy! time to make the frontend for this (aka, read on animation. eugh)
https://cloud-emy5c86q3-hack-club-bot.vercel.app/0image.png
summer-of-making emoji
redwoodjs emoji
nextjs emoji
ella
@ella0
I re-wrote my website again and added a Guestbook which uses Prisma and Postgres.
https://cloud-m719559bi-hack-club-bot.vercel.app/0screen_shot_2022-05-13_at_00.21.45.png
christina695
@christina6950
Cloned @sarthak Perfect files on GitHub, and worked on a site using Vercel/NextJS. Thanks @abby for the slideshow tutorial!
https://cloud-cugmrid25-hack-club-bot.vercel.app/0screen_shot_2022-04-07_at_1.16.51_pm.png
ian
@ian0
:conflict: Working more on the website! conflict-website-v2.vercel.app Today I did some more stuff with eslint and next.js which is cool. I also learned that the alt text of an image gets copied when you select it with other text.
https://cloud-9u5lqvaze-hack-club-bot.vercel.app/0image.png
js emoji
nextjs emoji
chefskiss emoji
wom emoji
vercel emoji
conflict emoji
kaidevrim
@kaidevrim0
https://cloud-8ngqam1b3-hack-club-bot.vercel.app/0image.png
wom emoji
js emoji
nextjs emoji
kaidevrim
@kaidevrim0
still tryna get that site up now in nextjs
https://cloud-dgzza82hk-hack-club-bot.vercel.app/0image.png
wom emoji
nextjs emoji
robert
@robert0
Got next.js and cloudflare set up for my (first actual) website!
https://cloud-fui8ox18p-hack-club-bot.vercel.app/0image.png
wom emoji
cloudflare emoji
nextjs emoji
js emoji
yay emoji
aaryan
@aaryan0
Redis x Next.js full stack app in making! It'll be a car database with instant full text search! Making this with the help of fireship.io's article. I think I'm starting to like redis, it's fast and fun to work with :redis: :)
https://cloud-i3b8umplj-hack-club-bot.vercel.app/0image.png