This project is my attempt at recreating the amazing system that Linktree has developed. I aim to use Next.js and Tailwind CSS to build the user admin side, including login and sign-up functionality, as well as the user links page.
LinkTree is a popular platform that allows users to create a personalized landing page with multiple links to their various social media profiles or websites. By cloning LinkTree, I hope to enhance my skills as a developer and gain a deeper understanding of Next.js and Tailwind CSS.
- User authentication: Implement a secure login and sign-up system for users.
- User admin dashboard: Develop a user-friendly interface where users can manage their links and customize their profiles.
- User links page: Create a page where users can add, edit, and organize their links with custom names and descriptions.
- Next.js: A React framework for building server-rendered applications.
- Tailwind CSS: A utility-first CSS framework for rapid UI development.
- React Beautiful DnD: A library for implementing drag and drop functionality in React.
- React Hot Toast: A toast notification library for React.
- React Icons: A collection of popular icons for React applications.
- bad-words: To filter out Sensitive Words from Links Page (this only apply when no warning is issued)
- crypto-js: Used to encrypt my Cookie Session data
- js-cookie: Used to Help create, get, delete and edit cookie data
- qrcode.react: Used to create Unique user QR Code
- react-confetti: Used to design the confetti theme background
- react-share: Used to handle Sharing user link to multiple Social Media Platform
-
Clone the repository:
git clone https://github.com/fabiconcept/linktree.git
-
Install the dependencies:
npm install
-
Set up environment variables:
- Create a
.env
file in the root directory. - Add the following environment variables with your Firebase project configuration details:
NEXT_PUBLIC_apiKey="YOUR_API_KEY" NEXT_PUBLIC_authDomain="YOUR_AUTH_DOMAIN" NEXT_PUBLIC_projectId="YOUR_PROJECT_ID" NEXT_PUBLIC_storageBucket="YOUR_STORAGE_BUCKET" NEXT_PUBLIC_messagingSenderId="YOUR_MESSAGING_SENDER_ID" NEXT_PUBLIC_appId="YOUR_APP_ID" NEXT_PUBLIC_measurementId="YOUR_MEASUREMENT_ID"
- Create a
-
Start the development server:
npm run dev
- Open your web browser and navigate to
http://localhost:3000
to access the application.
Contributions to this project are welcome. If you have any ideas, suggestions, or bug fixes, please submit a pull request.
This project is licensed under the MIT License.
- LinkTree for the inspiration and idea behind this project.