Linktree Clone Project

Overview

The Linktree Clone is a Next.js project designed to replicate Linktree's modern and responsive interface, showcasing your design and development skills. It allows users to create personalized landing pages for sharing multiple links through a single URL. Key features include a user-friendly homepage, customizable links, and MongoDB for data storage. This project demonstrates your proficiency in building functional, visually appealing web applications.

Features

• Dynamic user interface with smooth animations
• Responsive design for mobile and desktop devices
• User-friendly form to generate a personalized Linktree
• Integration with MongoDB for data storage
• Styled with Tailwind CSS for a modern and clean look
• Custom font implementation for enhanced typography

Technologies Used

Frontend

• Next.js
• HTML
• CSS (with Tailwind CSS for responsiveness)
• JavaScript

Backend

• Node.js

Database

• MongoDB

Other Tools

• GitHub for version control
• Vercel for deployment

Installation and Setup

Prerequisites

• Node.js installed on your system
• MongoDB instance (local or cloud-based)

Steps

1. Clone this repository:

   git clone https://github.com/deepesh2596/linktree-clone.git
   

2. Navigate to the project folder:

   cd linktree-clone
   

3. Install dependencies:

   npm install
   

4. Configure environment variables: Create a .env.local file in the root directory and add the following:

   MONGO_URI=mongodb://localhost:27017/linktree_clone
   

5. Run the development server:

   npm run dev
   

6. Open http://localhost:3000 in your browser to see the project.

Usage

1. Enter your handle in the input field on the homepage.
2. Click the "Claim your Linktree" button to generate your personalized link.
3. Share your unique Linktree URL to consolidate all your profiles in one place.

Deployment

The project is deployed on Vercel. Access it here: Live Demo

Contributing

Contributions are welcome! Please follow these steps:

1. Fork this repository
2. Create a new branch:

   git checkout -b feature/your-feature-name
   

3. Commit your changes:

   git commit -m "Add your feature description"
   

4. Push to the branch:

   git push origin feature/your-feature-name
   

5. Submit a pull request

Acknowledgements

• Next.js Documentation
• MongoDB Documentation
• Tailwind CSS Documentation

Contact

For any inquiries or feedback, contact me at deepesh2596@gmail.com.