NextJS Posts – Hack Club Scrapbook

Posts tagged with :nextjs:

next.js grind continues dont stop never stop day 4 of #C045S4393CY|

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/06b1ad70-663e-4294-a1a4-337f822d6e5f-screenshot_2025-02-25_at_8.24.56___pm.png

Finished chapter 6 of the Next.js tutorial (Day 1 of #C045S4393CY|)

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/9c9b59ed-ba8c-4ba4-a680-a5c76ed1bb5e-screenshot_2025-02-22_at_2.19.41___pm.png

update #GMM0VHBBM| using nextjs, added pages and info.

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/e40e41c6-1c67-4ddb-968e-de0a813397ef-image.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/93e5a562-3a9c-4514-b765-10b690d27d44-image.png

I made a boilerplate for next.js devs to save time on setting up projects involving next-auth. • Next.j • Tailwind • Prisma • Next-auth • Sqlite github.com/eesazahed/next-auth-boilerplate

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/6e7b87b8-d707-43f5-8fcc-8f0a65eca330-img_3265.jpg

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/3736ae6b-0d5c-4faf-bb88-e1e3f685e54a-6b485bb3-6608-4f6c-8e19-94c1ead3a912.png

Started a new project: Personal website using Nextjs 15

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/048bf5c5-842b-4dfc-88b8-4aea267e8faf-image.png

working on a next.js full-stack project! currently making the dashboard, then I will make the back-end server once the dashboard/frontend is done shadcn/ui, next.js and tailwindcss used in the dashboard front-end

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/ffaa24c5-9db1-495b-84b3-f31b241f1a91-image.png

Working on my portfolio! This project marks my very first Next.js project!! I added cool features such as - Headless blog (Hashnode), Guestbook (you can leave your reviews there!), etc more! Built with Next.js, Framer Motion, Postgres, Prisma, Google+Github oAuth, TailwindCSS CHECK OUT: ashish.top

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/6675fd2a-3581-4296-8bdf-9e78bd3c86e9-image.png

Today was quite stuggle-full day, cause I was in no mood to code. Thankfully HighSeas had the motivation inside. Welps, I have now configured the modes change, the different safety precautions and many minor bug fixes. I thought on a full introductory of the project today but I guess It will take till the weekend. Till then I will continue to code and enjoy this scrapbook. Also, I added a README so I dont need to add or save anything here, perhaps fun too !. Anyways (tags : Nextjs, Javascript, TypeScript, Vs Code, High Seas) Ba-Bye and Adios

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/fb19b258-65e5-4b87-bc89-3a9199f44b4a-image.png

Started work on CourseKit. Also learned how to do these fancy dotted backgrounds with CSS. Might not seem like much but the site is not hard coded but dynamically built from a builtin mini CMS (also self coded as part of the project), then cached by NextJS for a few hours

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/a92a6d37-0093-4236-ada2-0d2699d97ece-image.png

So today was a good day at coding, did around 2 hours of coding while 1hour 4 mins was logged because I was watching tutorials too! 37:10 is the timestamp for today. Anyways talking about it, I want to tell that NextJS is easy then other frameworks also that This project's gonna be lit! I will use it for myself too! Hope this project gets everyone productive. Refer to my previous day post

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/6744d3f2-1a3e-4094-a561-b5c4540f1009-image.png

I'm working on an open-source NextJS IT Inventory Management system. Its a really wide project with a bright future. Currently its just a database, a super sexy login page and some dashboard pages. Gonna force out commits trough the week and hopefully have the whole DB being used by friday afternoon! Thanks for reading! github.com/LCHoldings/lc-inventory-mgmt

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/036fc26c-0383-49cb-89fd-bb4233f02c1d-image.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/a5793a34-6439-44bb-9f6b-d5473e75a587-image.png

Loving NextJS so far. The way NextJS handles things is new for me, although I have made many apps I never actually learned anything, but this time I am making myself to the top. Anyways, My project is a part of a bigger picture, a full fledged productivity app. ChopProductivity will be one big productivity ecosystem of a app. Currently I am trying to make a local-db based pomodoro, then it will be a google-sign in prismaDB based cloud stored pomodoro app, then I will expand it to To-Do Lists and futher get it on multiple frameworks and platforms to increase my own productivity along with many others. Wish Me Luck. Made AT Highseas

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/7df762c0-c271-43d6-9ac6-fe37a9c0e2df-image.png

Update on Brainwave, I was super busy this week so haven't worked on it for a while, but I had some time today so I implemented most of the AI and database logic. I am using the Vercel AI sdk with openai as provider which works super well with nextjs. Currently its basically just a worse ChatGPT, but this is the base needed for what my plans are for Brainwave. Excited to work on the features that make it unique tomorrow

Darn it the video didnt embed

Check next post..

Still working on the UI for Brainwave. Playing around with the view transitions api, which sadly isnt oficially supported by nextjs but I found a library and it seems to be working great so far!

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

Day 3/10 of <#C07NUNPGEU8|>! Today I finished most of the URL shortener's small things :). URLs are now scanned for malware before they are shortened. I'm getting started on a QR code generator

! So far I have the basic generation done (I might have to swap the library for more features

). Slightly #C02EXAC2WR0| but oh well (I promise it will look better, also gonna be hack club themed cause that's gonna give me an excuse to try out this typescript + next.js idk thing lol) url.felixgao.dev for the URL shortener, QR code generator isn't live yet ):, coming soon ™️!

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/a91e69da-146c-423a-aa33-5091ce952903-image.png

Didn't code much today had alot of homework and test, might migrate to nextjs to create a api to fetch scrapbook post github.com/GaoYeGithub/ReactSite/commit/5b90adeb83d44bb3e094694f3404929573b80d5f

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/78601294-009e-4284-9b0b-daf2c933f022-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 😭

Next.JS Official DSAT Latin Roots Learner with Comprehensive Feedback using points to redeem practice SAT questions will be a feature soon to be added. Please let me know how you feel about this SAT Prep platform! www.rootified.me github.com/mchuang413/Rootified/commit/0992ea27676aafaf3499e575ee79fcbecae9c904

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/3e1e35d9-938b-48e1-b58a-f90930f3035b-905a18c3-c09a-42ca-88d3-42a455439ece.png

A todolist web app built with Next.js Try: nicesapien.github.io/next-todo GitHub: github.com/NiceSapien/next-todo

https://scrapbook-into-the-redwoods.s3.amazonaws.com/92c8c7f6-4f89-4b55-893f-377486bb38a0-image.png

Made a pizzeria web site with Next.js as a practice. Check out the site or the Github.

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/e914a83d-c40f-42be-b791-85e4a75d35b6-df306d6c-764c-4411-bcc4-56f94404c924.png

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

Hello everyone! I recently completed my chat application, which I made to chat with my friends. It is a simple application created using Next JS, tailwind, and Supabase with one chat room. Check it out! Repo: github.com/tanushchauhan/chat-app Link: chatapp.tanushchauhan.com

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/216ce7fb-6a27-4bfb-8cd8-ffa5ce2d072a-7942f8c2-5c9d-4281-a175-6d862d26423b.png

posting it one more time Hello everyone! I recently completed my Next JS application, which is called GradeMate. I made this app as a wrapper over my high school's gradebook application to create a better UI and add extra features like grade prediction and GPA calculation. I shared it with some people in my school, and they loved it! I plan to improve it as this school year goes on. I have added a demo account in the application so you all can take a look and experience the application. The credentials for the same can be found on the app's login page. Read the readme on the repo for details on running the application locally and credits. repo: github.com/tanushchauhan/grade-app Link: grademate.tanushchauhan.com

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/6cf3e8a5-fc97-4d8f-af8e-f529d2bf5b0c-ac1939c1-32c9-478a-bdc3-ef81eb0a9ddf.png

Posting it again Hello everyone! I recently completed my Next JS application, which is called GradeMate. I made this app as a wrapper over my high school's gradebook application to create a better UI and add extra features like grade prediction and GPA calculation. I shared it with some people in my school, and they loved it! I plan to improve it as this school year goes on. I have added a demo account in the application so you all can take a look and experience the application. The credentials for the same can be found on the app's login page. Read the readme on the repo for details on running the application locally and credits. repo: github.com/tanushchauhan/grade-app Link: grademate.tanushchauhan.com

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/d33718d4-cb16-4e8b-b0bb-315a348ebb98-58c9b2a9-e3ce-4ed8-8aae-55303650f9b1.png

posting again Hello everyone! I recently completed my Next JS application, which is called GradeMate. I made this app as a wrapper over my high school's gradebook application to create a better UI and add extra features like grade prediction and GPA calculation. I shared it with some people in my school, and they loved it! I plan to improve it as this school year goes on. I have added a demo account in the application so you all can take a look and experience the application. The credentials for the same can be found on the app's login page. Read the readme on the repo for details on running the application locally and credits. repo: github.com/tanushchauhan/grade-app Link: grademate.tanushchauhan.com

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/3bab54da-0aae-4907-9aa9-155f2ba81d25-35fb7d72-082f-4d34-8477-50c38327000b.png

Hello everyone! I recently completed my Next JS application, which is called GradeMate. I made this app as a wrapper over my high school's gradebook application to create a better UI and add extra features like grade prediction and GPA calculation. I shared it with some people in my school, and they loved it! I plan to improve it as this school year goes on. I have added a demo account in the application so you all can take a look and experience the application. The credentials for the same can be found on the app's login page. Read the readme on the repo for details on running the application locally and credits. repo: github.com/tanushchauhan/grade-app Link: grademate.tanushchauhan.com

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/dd41f6df-a37d-416b-aaa8-0a4320f12014-fa333366-4dbb-42db-8bb8-8c75a576abb8.png

Made a literature Q&A website powered by next.js and openai. learnt quite a bit about next.js. Got it to a point that I am happy with for this small project (google oauth; openai integration, etc) github.com/jamesrchen/bookance

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/bd33987f-fff0-465e-b71e-ebbccf4e31c8-605869de-1897-484d-9630-89de07747f47.png

I made a browser multiplayer game similar to Survive the Internet using NextJS and SocketIO. It isn't online currently since I don't have the resources to host the socket server. Github Repo: github.com/liqki/cancelled

I finally shipped my project 'Chatty' Its a fullstack discord clone with real time messaging Made with nextjs, shadcn, tailwind, socket.io, prisma, postgresql, It has responsive ui, with light and dark themes, Server creation, channel management.etc, tried to replicate major features of discord If you'd like, join the existing server I created using this link chatty-silk.vercel.app/invite/fd6fb69b-884a-4f2d-ae93-40299ff241ec Review this app and if you have any cool features in mind, just shoot me a dm... GitHub :github.com/jignesh119/chatty Live url: chatty-silk.vercel.app Note: -In the app voice and video calling requires a websocket connection between client and server all the time whereas vercel (where I deployed to) uses serverless architecture. Hence those features won't work -For realtime chat updates I've added constant polling as fallback for websockets(if no websocket connection) hence maintains realtime status Hence, To see app's full features set this up locally using instructions provided in readme. PFA screenshots of app:

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/fef4343c-22b4-4f36-9497-d3847e297765-7a65ce07-bd60-44a1-a710-dc90fa1edfaf.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/de608251-20fe-4571-947e-37ea5335e4af-da5bf955-28ab-4bdb-ac0e-a029da178c6b.png

Made a chat app with next js, material UI, and supabase github.com/GaoYeGithub/ChatWithNext

I finished polishing my Arcade Lookup tool! It's a Next.js project that shows all your Arcade session data using the API.

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/061646ae-7eeb-49a8-9442-80269de1b200-0f4dfe06-ff2f-4f76-8f67-c91663b73e53.png

Finally completed my website AuthSwiss- complete nextjs authentication toolkit, this can be used as template or as reference to build robust authentication system using nextjs Github: github.com/jignesh119/AuthSwiss Live url: auth-swiss.vercel.app (for testing app, use email: revdmi4@gmail.com, password: 1234567 As login credentials, if u dont wanna enter your own details)

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/eac07f10-af8d-47f2-97b9-d50bca7a0d98-6bf685ec-8da7-4045-b7bf-3efedd580e74.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/f0d5fed0-cb5c-4a68-9e11-44dffd6a2dd9-e523bafa-5b41-4f2d-9831-a12919ccfda9.png

Post 26 Podcastt 🎧: An open-source AI-powered podcast creation and discovery platform built with Next.js and Convex So far, I've implemented these key features: • Secure authentication • Podcast creation • AI voiceover generation • AI thumbnail generation Upcoming features include: • Discover podcasts • Home page • Profile page Check it out @ podcastt.vercel.app Open source @ github.com/shrysjain/podcastt Authentication powered by Clerk, some components bootstrapped from shadcn/ui AI functionalities provided by OpenAI. Implementation inspired by jsm.

https://scrapbook-into-the-redwoods.s3.amazonaws.com/94e2da62-fd96-4591-bd8a-49bb429029b1-image.png

https://scrapbook-into-the-redwoods.s3.amazonaws.com/27a3a27c-45c7-40db-9db1-6269d1d5f15a-image.png

github.com/GaoYeGithub/nextjs-docker Built a journaling website demo that connects react to supabase and docker so you can just open docker and Build and run the container

In the past 2 days I finished: Storing the document from the frontend to the backend Improving the toolbar functionality Writing contributor guidelines and setting up auto formatting for the repository This is for my website SciBind, a Next.js website made with Typescript and Tailwind CSS combined with a Django/Python backend/database. This is a website to make it easier for Science Olympiad students to make binders/cheat sheets with all sorts of features at their hands, and I have opened it up to community contribution. Here is the link to the repo: github.com/CrazeXD/SciBind !

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/0a344570-7e04-4fe8-b28d-54936f6cdce3-40a1301c-b75a-448e-9ee6-47381cb62daa.png

I made a free and public API to get registration information about aircraft from the FAA (Federal Aviation Administration). I call it “arla”, which stands for “Aircraft Registration Lookup API”. I use Supabase for the database and Vercel/Next.js for the website/API. I also use GitHub Actions for running the daily update script to fetch registration information from the FAA. The API is very small, but I made a (in my opinion) pretty awesome looking website/documentation page for it. The documentation page is designed to be easy to understand, with buttons for each API endpoint to send a test API request. I also have a light and dark mode theme for the entire website. GitHub: github.com/njfdev/Aircraft-Registration-Lookup-API Website: arla.njf.dev

I created a Drive app in Nextjs, really proud of the result i.imgur.com/8frhVgQ.mp4 github.com/Lorenzo0111/Drive

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/0dd0f7bd-b04b-4e2d-8cb8-5267e172b288-79b6309b-fc5d-48e9-9721-bcc938ca4053.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/c865be64-3ce4-4c00-9ff4-8f9a2382e74c-b7f4c299-4c54-4fbe-81f4-607e5b04af8e.png

I redesigned the landing page of canvasly with tailus ui and nextjs. The project is open source and avaiable here. I plan to redesign the dashboard and the editor in the near future, also with tailus ui.

github.com/KrishOnGH/krisharoraportfolio I create a personal portfolio in next.js + tailwind.

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/87ef73cf-6654-4764-887a-967a8be3a593-06e14509-576d-4f83-9100-07de3096f955.png

Introducing Atomic Clock , a website that shows you the current time, as precise as possible using NTP. Normally NTP is very hard to use in the browser, but using Next.js API functions, I've created a little wrapper. The site has an option to switch between a digital and analog clock, and you can customize those with a ton of options to your liking. If you host your own NTP server, which may be even more precise than some public ones, you can configure that too in the settings! Check out the GitHub: github.com/JustJoostNL/atomic-clock Website: clock.jstt.me

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/b1716c04-3bf6-48ed-8e5b-243c1c33c2d6-a371add6-a5b4-4bc6-9111-e5810d4424c5.png

nextjs.clock (View Live) A clock made with next.js + tailwind

https://scrapbook-into-the-redwoods.s3.amazonaws.com/33034d3d-05ff-4c26-918b-73d61b1e2816-screenshot_2024-08-11_at_14.37.05.png

Hey everyone, I have just completed another 3D Website Project. The goal of this project was to try to render a custom 3D model through STL files. It was a difficult project, I learned a lot about how the STL file stores the data, and how it should be read to render it correctly. I made it using Next.JS and WebGL Link to Demo skywardsyntax.github.io/STLViewer Link to Repository github.com/SkywardSyntax/STLViewer

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/78fc8f1a-b966-4d34-864a-ec9afd673eef-f07b6b22-8624-4220-9eef-0a00d5c639bd.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/6b7ead75-69e8-48f0-bfc6-24f4d9584a7c-f4f807cf-a554-4ea9-8aca-8633f5af525c.png

I made a tool that lists all your Arcade sessions using the API! It uses Next.js and can be ran locally. Check it out here!

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/d314232e-6570-4b75-8fc6-20895365ae19-100fd6fc-7f6e-41c9-8231-6b4e002b7dce.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

Website portfolio, written with Nextjs... github.com/SemicolonUnexpected/website-portfolio.git

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/bb89603a-b4a4-4f35-89eb-9e48f4fcf0af-b189759d-a66f-4de2-941a-8bfe9faa1cc5.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/f0e5cf5e-32ac-43ad-8ca6-37e38f8f8c02-6e7daa01-04bf-4f12-988e-7f7f7c4dac16.png

I was going to do some frontend development with NextJS, but decided I didn't want to anymore. Going to continue developing a game instead.

https://scrapbook-into-the-redwoods.s3.amazonaws.com/4b9293be-dbf2-4324-8a3c-28be8eeda8f4-image.png

( This is a reposted repost, because hakuun send no message to link the hours during the maintenance) I am working on a free to use and open source alternative to power point which is called "canvasly". I am now finished with the basic functionality like creating a slide, edit slides and the preview for slides. This was really hard. I used nextjs, tailwind and fabricjs. Next steps are to connect this platform with a local first database and create the other functions. Here is the gh link: github.com/i-am-henri/canvasly. Preview: