Few questions

[legacyxdd]

Hey, amazing project! I just have few questions I would be really happy if you can answer.

1. How can we add view count in users profiles and also add a toggle button in dashboard that enables/disables showing the view count on users site?
2. How can we add an input to dashboard that will allow users to upload an image as a link (like https://c.tenor.com/zzz/tenor.gif) which will set their background (basically custom backgrounds)?

[r2hu1]

to add a view counter basically analysis just add a new schema in property in userSchema i.e profileViews and update its value i.e currentview + 1 whenever new user visits its page make sure to add cookie to make it unique per user

and about profile image just update the value of the image:{
type: String,
max:4000
}, as you need

pretty simple and i am gonna add detailed views analysis in some days

[legacyxdd]

Thanks for the fast answer! One thing, I meant the background of the user, not the profile image.

[r2hu1]

misunderstood but its pretty simple you need to add a new value in the user schema and add a div with img in it and in the dashboard add a input to update the value and the img src thats it

[legacyxdd]

Thanks! I will try that. Still I would be glad if you could add it in the next update if you have free time.

[legacyxdd]

By the way I want to mention a small but important bug
let's say my username is test, and I change it to test1, I now own both test and test1 links which results in being able to claim unlimited links. Also when I change to test1 it keeps displaying the name as test in the dashboard

[r2hu1]

yah fixing it

[r2hu1]

By the way I want to mention a small but important bug let's say my username is test, and I change it to test1, I now own both test and test1 links which results in being able to claim unlimited links. Also when I change to test1 it keeps displaying the name as test in the dashboard

fixed!!

[legacyxdd]

Works amazing, thanks 👍🏻

[legacyxdd]

Hey, I tried to add custom background feature myself I listed every change I made really sorry if its hard to read. I made these changes but when I click publish, the page gets reload and the background link is always gone. I don't know if you can help from here but I wanted to ask. (I don't get any errors, it says succesfully published profile)

Added background:{type: String,} in schema/user.js
Changed api/create/route.js:12 const { username, bio, youtube, insta, face, github, name, back } = await request.json();
Added api/create/route.js:35 background: back
Changed api/create/route.js:38 return NextResponse.json({ message: "success", name, username, bio, youtube, insta, face, github, back }, { status: 200 });
Added api/create/route.js:50 background: back
Changed api/create/route.js:52 background: back return NextResponse.json({ message: "success", name, username, bio, youtube, insta, face, github, back }, { status: 200 });

Added (user)/_components/ManageForm.jsx:21 const [back, SetBack] = useState('');
Changed (user)/_components/ManageForm.jsx:41 body: JSON.stringify({ username, bio, insta, face, github, youtube, name, back }),
Changed (user)/_components/ManageForm.jsx:65 if (!username && !bio && !insta && !face && !github && !youtube && !back) {
Added (user)/_components/ManageForm.jsx:79 SetBack(data.data.background);
Added (user)/_components/ManageForm.jsx Background
Link<Input value={back} onChange={(e) => SetBack(e.target.value)} id="back" type="url" placeholder="example.com/video.mp4" />

Added (page)/_components/UserSocials.jsx:22 const [back, SetBack] = useState('');
Changed (page)/_components/UserSocials.jsx:26 if (!bio && !insta && !face && !github && !youtube && !back) {
Added (page)/_components/UserSocials.jsx:46 SetBack(data.data.background);
Added (page)/_components/UserSocials.jsx:57

[r2hu1]

in /app/(user)/_components /ManageForm.jsx theres a func that reloads page setTimeout(() => { location.reload(); }, 1000)
might making trouble try removing it or change the timeout delay

[legacyxdd]

Hey, removing it solved the issue of link being disappear from dashboard, however I still can't see the background on my profile 🤔

[r2hu1]

did you added img tag with proper fetching and assigning src? in the UserSocials.jsx?

[legacyxdd]

Probably not. I tried these but they only display videos or images, I don't know how to display both videos and images at once
<.video src={back} className="h-full w-full object-fill" autoPlay loop muted/>
<.img src={back} className="h-full w-full object-fill"/>

[r2hu1]

pretty easy fix just add a logic, if theres .mp4 in the back i.e background url render video eliment else img

{ back.includes(".mp4") : (<video do stuff here/>) ? (<img do stiff here/>) }

[r2hu1]

it will work ig

[legacyxdd]

I just changed places of ? and : and it works!! You are a genius 😄

[r2hu1]

haha mistakenly swapped the place

glad it worked 😁

[legacyxdd]

I changed few things about the user links, I tried for an hour to center the buttons but I couldn't do it im pretty sure its easy but can u help?

                <div className="grid relative gap-3 grid-cols-10 max-w-[1000px]">
                    {!youtube ? null : (
                        <Link className="w-full transition md:w-[420px] sm:w-[300px] mx-auto h-14 content-center flex items-center justify-center rounded-lg hover:text-white hover:scale-110 relative" target="_blank" href={youtube}><Youtube className="absolute left-6 h-5 w-5"/></Link>
                    )}
                    {!insta ? null : (
                        <Link className="w-full transition md:w-[420px] sm:w-[300px] mx-auto h-14 content-center flex items-center justify-center rounded-lg hover:text-white hover:scale-110 relative" target="_blank" href={insta}><Instagram className="absolute left-6 h-5 w-5"/></Link>
                    )}
                    {!face ? null : (
                        <Link className="w-full transition md:w-[420px] sm:w-[300px] mx-auto h-14 content-center flex items-center justify-center rounded-lg hover:text-white hover:scale-110 relative" target="_blank" href={face}><Facebook className="absolute left-6 h-5 w-5"/></Link>
                    )}
                    {!github ? null : (
                        <Link className="w-full transition md:w-[420px] sm:w-[300px] mx-auto h-14 content-center flex items-center justify-center rounded-lg hover:text-white hover:scale-110 relative" target="_blank" href={github}><Github className="absolute left-6 h-5 w-5"/></Link>
                    )}
                </div>

[r2hu1]

I changed few things about the user links, I tried for an hour to center the buttons but I couldn't do it im pretty sure its easy but can u help?

                <div className="grid relative gap-3 grid-cols-10 max-w-[1000px]">
                    {!youtube ? null : (
                        <Link className="w-full transition md:w-[420px] sm:w-[300px] mx-auto h-14 content-center flex items-center justify-center rounded-lg hover:text-white hover:scale-110 relative" target="_blank" href={youtube}><Youtube className="absolute left-6 h-5 w-5"/></Link>
                    )}
                    {!insta ? null : (
                        <Link className="w-full transition md:w-[420px] sm:w-[300px] mx-auto h-14 content-center flex items-center justify-center rounded-lg hover:text-white hover:scale-110 relative" target="_blank" href={insta}><Instagram className="absolute left-6 h-5 w-5"/></Link>
                    )}
                    {!face ? null : (
                        <Link className="w-full transition md:w-[420px] sm:w-[300px] mx-auto h-14 content-center flex items-center justify-center rounded-lg hover:text-white hover:scale-110 relative" target="_blank" href={face}><Facebook className="absolute left-6 h-5 w-5"/></Link>
                    )}
                    {!github ? null : (
                        <Link className="w-full transition md:w-[420px] sm:w-[300px] mx-auto h-14 content-center flex items-center justify-center rounded-lg hover:text-white hover:scale-110 relative" target="_blank" href={github}><Github className="absolute left-6 h-5 w-5"/></Link>
                    )}
                </div>

just add place-items-center or place-content-center in this
<div className="grid relative gap-3 grid-cols-10 max-w-[1000px]">

[r2hu1]

and why grid-cols-10 ?

[legacyxdd]

It currently looks like this, adding place-items-center or place-content-center didn't fix it
I wanted the links to be next to each other that's why I added grid-cols-10

[r2hu1]

dude thats what making it to not be in center the grid-cols-10 just replace it with grid-cols-4

[legacyxdd]

I replaced it to grid-cols-4 and also removed few things and now its working thanks! but I was also going to make adding custom url's so that's why I did that. If the user adds more or less than 4 links then grid-cols-4 also doesn't work. How can we keep the symbols aligned no matter how many links the user adds?
This is what grid-cols-4 with 3 links looks like:

[legacyxdd]

Oh I fixed it by changing few things on the div