Let's create a Linktree Clone using React.js step by step. This tutorial will guide you through setting up the project, creating components, and adding styling to make it look clean and modern.
Step 1: Setup React Project
First, create a new React app using Vite (or Create React App if you prefer).
# Using Vite (Recommended)
npm create vite@latest linktree-clone --template react
# Move into the project folder
cd linktree-clone
# Install dependencies
npm install
Step 2: Install Dependencies
We'll need Tailwind CSS for styling and React Router for navigation.
# Install Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Now, configure Tailwind in tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
Add Tailwind styles to src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Step 3: Project Structure
Organize the project as follows:
src/
│── components/
│ ├── Profile.js
│ ├── Links.js
│── pages/
│ ├── Home.js
│── App.js
│── main.jsx
Step 4: Create Components
1. Profile Component
This will display the user profile picture and name.
// src/components/Profile.js
import React from "react";
const Profile = () => {
return (
John Doe
@johndoe
);
};
export default Profile;
2. Links Component
This will display multiple social links.
// src/components/Links.js
import React from "react";
const links = [
{ id: 1, title: "GitHub", url: "https://github.com" },
{ id: 2, title: "X", url: "https://x.com" },
{ id: 3, title: "LinkedIn", url: "https://linkedin.com" },
];
const Links = () => {
return (
{links.map((link) => (
{link.title}
))}
);
};
export default Links;
3. Home Page
Now, let's create the home page and use our components.
// src/pages/Home.js
import React from "react";
import Profile from "../components/Profile";
import Links from "../components/Links";
const Home = () => {
return (
);
};
export default Home;
Step 5: Set Up React Router
Edit src/App.js
// src/App.js
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
function App() {
return (
} />
);
}
export default App;
Step 6: Run the Project
Start the development server:
npm run dev
Now, open http://localhost:5173/ in your browser, and you should see a basic Linktree clone!
Step 7: Add More Features
- Allow users to add/edit links dynamically.
- Store link data in local storage or a database.
- Implement dark mode using Tailwind’s
darkmode. - Add authentication so users can create their own link pages.