This is a solution to the Link-sharing app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- Create, read, update, delete links and see previews in the mobile mockup
- Receive validations if the links form is submitted without a URL or with the wrong URL pattern for the platform
- Drag and drop links to reorder them
- Add profile details like profile picture, first name, last name, and email
- Receive validations if the profile details form is saved with no first or last name
- Preview their devlinks profile and copy the link to their clipboard
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Bonus: Save details to a database (build the project as a full-stack app)
- Bonus: Create an account and log in (add user authentication to the full-stack app)
- Solution URL: https://github.com/kamiliano1/link-sharing
- Live Site URL: https://link-sharing-iota.vercel.app/
- My profile: https://link-sharing-iota.vercel.app/previewProfile/kDiRPl8vM7ZsAgsbmn26EF8azgi1
- Semantic HTML5 markup
- Mobile-first workflow
- React - JS library
- Next.js - React framework
- TailwindCSS
- React Recoil
- React hooks form
- React-loading skeleton
- React-firebase-hooks
- firebase
- radix-ui
- dndKit
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.
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")
);Improve the user experience when the web is loading.
Instead of the SVG icons I've used react-icons.
Was used to show the loading state on the buttons when the changes are updated to the 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`;Was used for drag and drop links features.
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
- 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.
- Code a Reddit Clone with React, Next.js, firebase v9, Chakra UI – Full Course - This course helped me on how to implement firebase to this project.
- Website - Kamil Szymon
- Frontend Mentor - @kamiliano1
As I mentioned before I want to thank you for the Reddit clone course. It was much helpful when I was working on this project. It showed step-by-step how to start working with firebase and how to use it.