React Rewrite

[BobDotCom]

React Rewrite

Discussed in #38, this PR rewrites the site in react.

I chose Next.js because it's a very well known framework for react with a lot of nice features. Additionally, it's used on countless websites for major companies including Netflix, TikTok, Twitch, Hulu, Notion, Target, etc. (Next.js Showcase)

I also used tailwind CSS, another extremely widely used framework featured on the websites of ChatGPT / OpenAI, Netflix, and even NASA. (Tailwind CSS Showcase)

Currently, upon creating this PR, I only implemented the index page. The other pages are currently served through Next.js as static files, so they still work as previously but haven't been migrated yet.

For development instructions, see README-nextjs.md.

TODO

• Finish index page
  • Migrate all CSS to inline tailwind
  • Fix styling at the bottom of the page
  • Make responsive, if necessary.
• Finish puzzle pages
  • LockPick
    • Laundromat
  • RepairKit
  • RoofRunning
  • SmokeCrack
  • Word Memory (new)

Before/After

Index

Before	After

Repair Kit

Before	After

[BobDotCom]

Closes #42

[BobDotCom]

Got busy and didn't finish this, but I also have some un-pushed changes locally (lockpick is almost done). I'll work on this in the upcoming days, probably.

[BobDotCom]

I've published my fork to vercel, and it is currently deployed from the react branch so you can visit that to see the changes from this PR: https://nopixel.vercel.app/

[MaximilianAdF]

I've published my fork to vercel, and it is currently deployed from the react branch so you can visit that to see the changes from this PR: https://nopixel.vercel.app/

That is great. Do you think it is beneficial to transition over to Vercel compared to Github Pages in general?

[BobDotCom]

I've published my fork to vercel, and it is currently deployed from the react branch so you can visit that to see the changes from this PR: https://nopixel.vercel.app/

That is great. Do you think it is beneficial to transition over to Vercel compared to Github Pages in general?

@MaximilianAdF Yeah, I'd say so. Next.js is created by vercel, so their platform is totally optimized for it. Additionally, the free plan includes edge network, so some server-side JS code can run.

A couple other things:

1. Feel free to ask if there's any part of the code that you're unsure about. You mentioned that you didn't know too much react yet, and I did try to put a lot of comments in the code, but I didn't put them everywhere.
2. On another note, this isn't completely finished, but it's probably ready to merge. The SmokeCrack hack hasn't been rewritten in React yet, and there's a couple other things I wanted to do, but those can be done later. I think it'd be worth it to merge this PR now (so the word memory hack is available), and the other stuff can be finished in another PR.
3. Do you have a discord account? I typically find it easier to communicate there.
4. If you want, I could help you setup the vercel integration and stuff as well. I'd probably need you to give me access to the repository though, so its up to you if you want to do that.

[MaximilianAdF]

@BobDotCom
Sorry for the extremely late response, I have been busy lately and have also been experimenting a bit with Vercel on my own. My discord is Makimian (238688168763850752). I tried using Vercel in one of my other repositories and it seems to be functioning. If you have time to check out the integration and see if you can spot any problems I would greatly appreciate it, https://github.com/MaximilianAdF/Leetcode-Stats.

I will merge this pull request

[BobDotCom]

@BobDotCom Sorry for the extremely late response, I have been busy lately and have also been experimenting a bit with Vercel on my own. My discord is Makimian (238688168763850752). I tried using Vercel in one of my other repositories and it seems to be functioning. If you have time to check out the integration and see if you can spot any problems I would greatly appreciate it, https://github.com/MaximilianAdF/Leetcode-Stats.

I will merge this pull request

@MaximilianAdF I'll take a look at it, and I also added/messaged you on discord. I'll send you some other info on the configuration though there.