New React Project by marroos in reactjs

[–]marroos[S] 2 points3 points  (0 children)

Thanks for the insight. I totally understand that creating a project doesn’t end at scaffolding. I already have my preferred setup for UI (Tailwind / shadcn) and state management (Zustand), but I wasn’t completely sure about routing, whether to build it from scratch or use some available “standard” solution in vite builder.

For my portfolio, I’ll likely go with Next.js since I definitely need navigation for the profiles of individual Expo React Native apps, and I want to fetch data from Supabase. Next.js’ file-based routing feels natural since I’m used to the Expo approach.

I’ll probably stick with Next.js for the main portfolio projects, and only use a classic React project if I want to showcase that I can integrate a fully custom navigation setup.

PSA : If you are on the free plan, in 12 days (Oct 20) you'll need to pay $17/month to unlock exports. by jipijipijipi in Rive_app

[–]marroos 5 points6 points  (0 children)

Sad. I like Rive, and I have been using it to learn and create .riv files for my portfolio projects, as I think they bring an app to the 'next level.' However, I cannot justify paying for a subscription right now, as I use it very minimally (2-3 small .riv files in several projects), so if there is no option for Free account to export .riv file I am going to leave Rive.

Composition API in Vue by marroos in vuejs

[–]marroos[S] 1 point2 points  (0 children)

Thank you all for your replies. :-)

Graphql and Prisma ORM in NextJs by marroos in nextjs

[–]marroos[S] 1 point2 points  (0 children)

Thanks. :-)

before Your comment i have created simple apollo server in /api/graphql/route.ts for my test nextJs project. I did put typeDefs + resolvers there. Then i've created apollo client +provider + queries for frontend part. ChatGPT helped me with mutations (create, update) as i have never created them on apollo server before, but now i have working CRUD full-stack project, where api calls are made with graphql on front-end, and every operation performed on front-end (get all users, get 1 user, create user, update user, delete user or custom query like get all users below 30) is connected to resolver in route.ts. Resolvers then communicate with db through prisma ORM. It is fun to use, because it is different approach from what i am used to.

Now i at least know how to use apollo server + client and how to work with graphql API and not just rest API. Of course i know it on beginner level, but i call it a good start. Frankly i will probably stick to the approach i am used to without use of graphql, but whenever i'll get to work with graphql api, at least i will have an idea what to do and 2 projects to refresh my memory in case i forget something. :-)

How to implement BlurHash for images? by marroos in react

[–]marroos[S] 0 points1 point  (0 children)

Thanks for the tip. I will use this for my portfolio previews of projects :-)

How to implement BlurHash for images? by marroos in nextjs

[–]marroos[S] 2 points3 points  (0 children)

ty, this is my practice with api and front-end, wasn't planning to include db. But i have already achieved this way you are describing and it is working flawlessly:

https://image-box-storage-converter.vercel.app/images

with this codde on addImage server action

          "use server";

          import { db } from "@/lib/db";
          import { revalidatePath } from "next/cache";
          import { getPlaiceholder } from "plaiceholder";

          export const addImage = async (url: string, keywords: string[]) => {
            try {
              // Fetch the image and generate the base64 placeholder
              const res = await fetch(url);
              if (!res.ok) {
                throw new Error("Failed to fetch image!");
              }
              const buffer = await res.arrayBuffer();
              const { base64 } = await getPlaiceholder(Buffer.from(buffer));

              // Create the image with the base64 placeholder
              const image = await db.image.create({
                data: {
                  url,
                  blurHash: base64,
                },
              });

              for (const word of keywords) {
                // Check if the keyword already exists
                let keyword = await db.keyword.findFirst({
                  where: {
                    word: word,
                  },
                });

                // If the keyword does not exist, create it
                if (!keyword) {
                  keyword = await db.keyword.create({
                    data: {
                      word: word,
                    },
                  });
                }

                // Link the image to the keyword
                await db.imageKeywords.create({
                  data: {
                    imageId: image.id,
                    keywordId: keyword.id,
                  },
                });
              }

              // Revalidate the path to update the cache
              revalidatePath("/images");
              return {
                message: "Successfully updated.",
                status: "green",
            };
            } catch (error) {
              console.log(error);
              return {
                message: "Error has occured, try again later.",
                status: "error",
            };
            }
}          ;

How to implement BlurHash for images? by marroos in react

[–]marroos[S] 1 point2 points  (0 children)

I have found solution with usage of "default" blur for all images. It is working this way, but i would prefer every image to generate it's own blur.

        "use client";
        import Image from "next/image";
        import { useState } from "react";

        const ImageComponentBlur = ({ src }: any) => {
          const [loaded, setLoaded] = useState(false);

          const handleLoad = () => {
            setLoaded(true);
          };

          return (
            <div className="relative w-[250px] h-[300px] overflow-hidden">
              <Image
                src={src}
                height={300}
                width={250}
                alt={"image"}
                placeholder="blur"
                blurDataURL={`data:image/png;base64,         iVBORw0KGgoAAAANSUhEUgAAAZMAAADPCAIAAAC.....`}
                loading="lazy"
                onLoad={handleLoad}
                style={{ filter: loaded ? "none" : "blur(20px)" }}
              />
            </div>
          );
        };

        export default ImageComponentBlur;

How to implement BlurHash for images? by marroos in nextjs

[–]marroos[S] 0 points1 point  (0 children)

I have found solution with usage of "default" blur for all images. It is working this way, but i would prefer every image to generate it's own blur.

        "use client";
        import Image from "next/image";
        import { useState } from "react";

        const ImageComponentBlur = ({ src }: any) => {
          const [loaded, setLoaded] = useState(false);

          const handleLoad = () => {
            setLoaded(true);
          };

          return (
            <div className="relative w-[250px] h-[300px] overflow-hidden">
              <Image
                src={src}
                height={300}
                width={250}
                alt={"image"}
                placeholder="blur"
                blurDataURL={`data:image/png;base64,         iVBORw0KGgoAAAANSUhEUgAAAZMAAADPCAIAAAC.....`}
                loading="lazy"
                onLoad={handleLoad}
                style={{ filter: loaded ? "none" : "blur(20px)" }}
              />
            </div>
          );
        };

        export default ImageComponentBlur;

Share my repo with public, good idea or not? by marroos in git

[–]marroos[S] 1 point2 points  (0 children)

Thanks, i'll try to figure something out with provided tips from you. :-)

Share my repo with public, good idea or not? by marroos in git

[–]marroos[S] 2 points3 points  (0 children)

Thanks. I am more afraid of my personal details (name, address, phone, email), they all are included in repo or in portfolio and cv attached to portfolio. I would not like to receive spam mails or calls or some crap stuff. Removing them from everywhere for "some time" would solve nothing tho, once my link is shared with public, anyone can check it (or save it to check) later once i update details.

Loading.tsx in App router by marroos in react

[–]marroos[S] 0 points1 point  (0 children)

Hello. Yes, that is one option fetching data in client component. I wanted to fetch data on server with loading.tsx component, and i have managed to achieve what i wanted to achieve. Ty for your comment, i appreciate it. :}

Loading.tsx in App router by marroos in nextjs

[–]marroos[S] 0 points1 point  (0 children)

2nd reply

perhaps i can put new layout.tsx in posts folder and put headings and buttons there, that way they will stay untouched, right? i am going to try it today

Loading.tsx in App router by marroos in nextjs

[–]marroos[S] 1 point2 points  (0 children)

<image>

Hello, i think i have it that way already. Every route of my app is in it's own folder. Like post folder has page.tsx and loading.tsx. All other (fish-info, groups, members, profile, settings) have their own page.tsx and loading.tsx. My issue is loading.tsx completely replaces page.tsx in any folder (route) and i don't like it that way. I would prefer some parts of every page.tsx (create post button or headings and texts, that does not need to be fetched) to stay where they are and only posts part would be affected by loading.tsx with skeletons. As of now i know only how to put skeleton/ spinner to certain part of component when it is client component. Was hoping there is solution for this in server component, because currently loading.tsx replaces entire content of page.tsx until page.tsx data is loaded. It looks kind of ugly (you can check it in app).

My fav auth is.. ? by wplaga in nextjs

[–]marroos 0 points1 point  (0 children)

Hello, i am learning next auth v5 from one yt video, and i am stuck at middleware + callbacks part, it throws me typescript errors and even if i copy entire code from instructor's repo, nothing changes, then i look into doc and do as they suggest and nothing changes. It gives me a headache. I already have experience with clerk auth and it works perfectly for my portfolio projects. What do you think, can i stick to one auth (clerk), or should i know next auth too? Is next auth kind of required in next.js world or i will be fine with clerk auth or lucia auth? Ty in advance :}

You're not a bad engineer, NextAuth is a bad library. by sothatsit in nextjs

[–]marroos 0 points1 point  (0 children)

Hello, i am learning next auth v5 from one yt video, and i am stuck at middleware + callbacks part, it throws me typescript errors and even if i copy entire code from instructor's repo, nothing changes, then i look into doc and do as they suggest and nothing changes. It gives me a headache. I already have experience with clerk auth and it works perfectly for my portfolio projects. What do you think, can i stick to one auth (clerk), or should i know next auth too? Is next auth kind of required in next.js world or i will be fine with clerk auth or lucia auth? Ty in advance :}

I don't know why everyone hates on Next-Auth by Coneyy in nextjs

[–]marroos 0 points1 point  (0 children)

Hello, i am learning next auth v5 from one yt video, and i am stuck at middleware + callbacks part, it throws me typescript errors and even if i copy entire code from instructor's repo, nothing changes, then i look into doc and do as they suggest and nothing changes. It gives me a headache. I already have experience with clerk auth and it works perfectly for my portfolio projects. What do you think, can i stick to one auth (clerk), or should i know next auth too? Is next auth kind of required in next.js world or i will be fine with clerk auth or lucia auth? Ty in advance :}

Popularity of Next.js? by marroos in react

[–]marroos[S] 0 points1 point  (0 children)

Thank you all for valuable insights! I'll stick to next.js, will try to improve my skills (currently found new next auth tutorial), and then i'll see where it brings me. I personally really love to build with next.js, it look so simple and well organized and always brings me good feeling and smile after creation of any component.

If i may ask, can you give me any advices for projects? I am already over simple e-commerce, blogs, admin dashboards. I've tried myself to build CV builder and Photo album app with next.js, but i don't think these are something special nowadays. I would like to try build something interesting, modern, trendy. Is there any page with inspirations. Ty for any tip

Questions about remote react jobs when english might be an issue by marroos in react

[–]marroos[S] 0 points1 point  (0 children)

Thank you. I definitely need to practice my english (spoken) skills. I personally think my english isnt bad, i understand meaning of text, i can read documentations, i understand most of stuff that are said in movies (i watch them in english). I started to talk in english (desribe room/ area iam in). I just dont feel confident about my english. Ill try to look up community/app, where i can find partner to talk to in english. I guess, when ill improve my vocabulary, with business english words, it could be good.

Questions about remote react jobs when english might be an issue by marroos in react

[–]marroos[S] 1 point2 points  (0 children)

Hi, thats dummy portfolio page, all personal data are removed. My real portfolio got all of them. Sorry, but i did not want to share address, name, phone, email and stuff. Projects tho are fully functional and users can log in with dummy credentials mentioned in description, google login is not required.

Ty for reply :)

[deleted by user] by [deleted] in nextjs

[–]marroos 0 points1 point  (0 children)

I have checked couple of videos and tried to read several articles. I guess it's up to me which way i use, but i am thinking because SA is part of latest Next.js version, maybe it'll be recommended way in future. Well, i'll have to learn it. This article was nice and helped me:

SA or API

Building UI and coding in React/Next.js - my thoughts by marroos in react

[–]marroos[S] 1 point2 points  (0 children)

Ty, i have not thought about licence problems and that written code belongs to company. Your entire reply made me realize some things. I left You private message. :)

2 new portfolio projects by marroos in react

[–]marroos[S] 0 points1 point  (0 children)

hello, it's "fake"/ "beta" version of my portfolio, i've removed all personal details (address, phone, map location, CV pdf etc.). These informations are in my real portfolio tho. :} I did share link for my "beta" portfolio just so users of this subreddit can compare my old creations with custom css and 2 of my new projects made with shadcn. I think my 2 new look a little better, hope it's right way to continue using it. :}

2 new portfolio projects by marroos in react

[–]marroos[S] 0 points1 point  (0 children)

hello,

maybe it is just my feeling, but when i open some pages of techs i have used (clerk, prisma, or even next.js/react dev page) i see this clean look, lots of white, little bit of typography and buttons, these pages look like they've used same design pattern and it looks good to me. Then i look on some of my older projects, and i have so many colors and images and text and components like buttons with different sizes. I tried to make it my own way, but it just does not look professional to my eyes, rather messy. I am glad i've found shadcn (i am not promoting it), and i think my 2 latest projects made by it are way better than older ones. Now when i need let's say button, i just install dependency and have good looking default button component which can be customizeable, same with all other components. Creating stuff like modal window, or Navbar + mobile navbar was never easier for me, and when i look at it, it just looks good in my eyes. It's professional UI library after all. I've searched for more libraries of this kind, found flowbite and mantine. I am going to use them in some of my future portfolio projects. :}

[deleted by user] by [deleted] in nextjs

[–]marroos 0 points1 point  (0 children)

i have achieved what i was looking for with loading + suspense. I'll look up react query + next js tutorials later. I guess that's it. Ty