Link Sharing App, Firebase, React Hook Form, Radix-UI, dnd-kit

React Hooks Form

The first time I was using it with the useFieldArray hook to generate a dynamic form I depended on the user links. It was useful for adding and removing links. It was quite challenging was connect the React Hooks Form with the Radix UI Select element. Finally, I managed to solve the problem using the Controller from React Hooks Form.

React Recoil

To manage the state I've used

userAccountAtom.ts;

It keeps all the users' information he provided. It's updating on every user change.

  firstName?: string;
  lastName?: string;
  email?: string;
  picture?: string;
  userLink: UserLink[];
  isLoaded: boolean;
  isAvatarChanged: boolean;

isLoaded is preventing from loading data from the firebase more than one time. userLink array takes care of all links created by the user

type UserLink = {
  platform: PlatformsType;
  link: string;
  id: string;
  order: number;
};

order was created to have the correct position on the application and on the firebase. When the user uses drag and drop it also updates the order and the Firebase collection

const snippetQuery = query(
  collection(firestore, `users/${userId}/userLinks`),
  orderBy("order", "asc")
);

React-loading skeleton

Improve the user experience when the web is loading.

react-icons

Instead of the SVG icons I've used react-icons.

react-spinners

Was used to show the loading state on the buttons when the changes are updated to the firebase.

Firebase

Was used to save user details to the Firebase. It keeps all provided by user credentials. Links are stored in the userLinks collection:

type UserLink = {
  id: string;
  link: string;
  order: number;
  platform: PlatformsType;
};

Avatars are stored in the Firebase storage in the folder:

`avatars/${userId}/image`;

dnd-kit

Was used for drag and drop links features.

Radix-UI

To improve accessibility:

• radix-ui/react-dialog was used to log in and Register Modal
• radix-ui/react-navigation-menu to the Navbar
• radix-ui/react-select displays a list of all platforms that the user can choose
• radix-ui/react-toast for the popUp when using save changes or copy the user link to the clipboard

Continued development

• Right now all links have unique backgrounds and font colors. Improve user options to have a way to change the color of each platform.
• Give users a way to add additional platforms.