unilink banner

unilink

33 devlogs
48h 18m 49s

Smart link in bio

HelloFaizan

Coded the country flag component also, used flagcdn api for flags at low quality, removed the decimal of percentage for all other cards

Attachment
0
HelloFaizan

Implemented this referrer analytics table for the premium users

Attachment
0
HelloFaizan

Developed this ui for analytics, it shows the analytics of devices people visiting from, used Mui x pie chart for the graph

Attachment
0
HelloFaizan

ADDED ANALYTICS COMPONENTS

  • Working on this 11 month analytics graph with total visitors and unique visitors
Attachment
0
HelloFaizan

Implement link deletion and toggle visibility functionality backend logic and total link click counter backend logic and frontend showing that

Attachment
0
HelloFaizan

feat: Added Analytics

Full prisma schema for analytics
Backend logic for analytics counter
Backend logic for get analytics using date and time and filtering them accordingly
Backend api call for link click counter
On click of link, open the link also side by side api call to linkclick gor counting the click
0
HelloFaizan

Added small of card components to the landing page,
Designed them in figma and imported to svg formate into the project

Attachment
0
HelloFaizan

Build this simple and minimal landing page

  • Designed the image in figma, it took forever ;)
  • Also worked on links part of dashboard
Attachment
0
HelloFaizan

Changed the socials ui for username page

  • SOcials deserve less spaces as compared to links
Attachment
0
HelloFaizan

Worked on [username] page, this page is like where random visitrs will visit and see your link in bio

  • fetched user full data using just the username

  • attached the name and bio and image to the page metadata to rank your link in bio higher

  • If user with username not available, show user not found component and added claim this username to the metadata

  • Designed this simple page with the name, image, bio and all the social links, its just simple

Attachment
0
HelloFaizan

Made the delete and edit social link possible, BBoth edit and delete is working with perfect backend logic

  • Also added the upstreaming thing, it instantly updated the ui layout like when we update, delete and add new social, so that the changes instantly popped up on ui

(Added AI hekp for upstreaming)

Attachment
0
HelloFaizan

Added Social Card Preview component

  • Itll first get all the added socials from db mainly its type, handle and url
  • After that get social meta from social-data with the social.type from db
  • After that sets all the data to the social card

!The edit and delete and drag to reorder is not working yet

Attachment
0
HelloFaizan

Added all the socials that are used by most of people

  • Here is the schema of socials data { id: "custom", name: "Custom URL", icon: "globe", baseUrl: "https://", isCustom: true, },
    still working on frontend, next is backend and backend logic
Attachment
0
HelloFaizan

Worked on socials page

  • All social medias (icons, links, name, id)
  • Social linking page
  • Add social media username dialog box,

Just the frontend, no backend logic yet

Attachment
0
HelloFaizan

Password change component

  • Users enters password
  • Backend password hashing
  • Backend password logic change
  • Store new password to the database
Attachment
0
HelloFaizan

Delete account logic

  • ui for delete account button

  • delete account dialog

  • input email just to be clear person actually wants to delete account

  • Delete account click -> Delete Dialog -> Enter user email -> verify email -> Delete Profile Image from UploadThing image stoage -> successfully delete account

Attachment
0
HelloFaizan

Worked more on image upload
_ deletes old pfp from storage before adding the new one

  • improved this 1 mb image upload limit from backend also
  • added progress bar to the image upload
  • added error component
  • saved image key to the prisma db to delete the image in future
Attachment
0
HelloFaizan

Working image upload deature

  • used UploadThing for image storage
  • Used react-image-file-resizer npm library to compress image for storage efficiency

Workflow
Choose File -> gets uuploaded to UploadThing -> Saves the image link to database

Attachment
0
HelloFaizan

Wokrked on username availability, checks if username is available or not using api
_ added debouncing to the username check function using useEffect to avoid spam api calls

  • used prisma $transaction to update both bio, name and username at same time and something occuers, it’ll throw error
Attachment
0
HelloFaizan

Worked on profiele customisation frontend and backend

  • Made a simple minimal ui for form
  • worked on backend to update profile name and bio
  • added the profile for image change
  • the backend for it is pending yet
Attachment
0
HelloFaizan

Improved the app sidebar
worked on unilink profile settings page layout
improved the unilink auth and made accessing dashboard more secure

Attachment
0
HelloFaizan

Designed this beautiful dashboard layout with side bar, right now the side bar is not taggleable, it just stays as it is, maybe ill make it toggeable, also added custom hooks to the project andsession hooks also to get name, email from session to show on layout

Attachment
0
HelloFaizan

Added FAQ page, termsand services page, privacy policy oage to the site and improved the project layout structure, like removed navbar from common kayout file, and kept that navbar only in landing page, this help page and auth pages, ill not be using same navbar in dashboard pages

Attachment
0
HelloFaizan

Designed this beautiful pricing page, it has 2 plans, free life time and premium on time payment for lifetime

Attachment
0
HelloFaizan
  • Added working login function, it firt validted the email and password input with the schema. then it encrypts th password and compare that woth the password stored into the database, then it checks others criterias also and later on logins the user into unilink

  • Also added the reset password function, when user enters email, we first validate the email and then crate a limited time token into db and sends user an email with the token, when user clicks on the link wit tokwn, we show him the new password field to change password, as simple as that (checks a lot of things for security)

Attachment
Attachment
Attachment
0
HelloFaizan

The whole register account logic is workinf perfectly fine, including backend, when user enters email, password and name, it first validates it then sends verification token, then when i click on verification link from email, it visits /new-verification page and verifies the token

Attachment
0
HelloFaizan
  • Added Register account backend logic with email for email verification
  • Added Password reset email logic (it generated a token and saves it for some time, when user user that token, user can change account password, after some time that token is invalid)
  • Added Welcome email logic, registered users will get an email welcoming them to the Unilink.

I am using Resend for emails, Postgresql for databae, prism ORM

Attachment
Attachment
0
HelloFaizan

Worked on Prisma and backend part for authentication setup

  • Added Next Auth beta library
  • Connected it with Prisma
  • Added middleware file to make the site projected, like protect dashboard and other pages from non logged users
  • Coded the get user data, get full user data, get user data using emil, get user data using id etc
Attachment
0
HelloFaizan

Added 3 new pages

  • Forgot page (Request password change email)
  • Reset Password (Reset the password with the token from password change email)
  • New verification (Verify the email of new user)
Attachment
Attachment
0
HelloFaizan
  • The frontend for login page

  • The frontend for Register page

  • NO BACKEND YET, ITS JUST FRONTEND

Attachment
Attachment
0
HelloFaizan
  • Added Prisma for authentication and data storage into postgresql data
  • Inproved the background theme and added working theme toggle also
  • Started work on Register and Login page
Attachment
0
HelloFaizan

Structured Project Files
Added Next Theme for theme toggle
Designed a simple navbar
Added Shadcn ui and daisy ui

Attachment
Attachment
0