https://github.com/manthanank/linktree-clone-angular
Linktree Clone in Angular
https://github.com/manthanank/linktree-clone-angular
angular clone clone-app linktree
Last synced: 7 months ago
JSON representation
Linktree Clone in Angular
- Host: GitHub
- URL: https://github.com/manthanank/linktree-clone-angular
- Owner: manthanank
- Created: 2023-01-21T09:42:14.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-12-04T05:38:55.000Z (over 1 year ago)
- Last Synced: 2024-12-25T19:44:13.358Z (over 1 year ago)
- Topics: angular, clone, clone-app, linktree
- Language: HTML
- Homepage: https://linktree-clone-angular.vercel.app
- Size: 2.22 MB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Linktree Clone in Angular
A modern, responsive Linktree clone built with Angular 19. Create your own personal link hub with customizable profile and social media links.
## Features ✨
- 🎨 Modern and responsive design
- 🔗 Customizable social media links
- 📱 Mobile-first approach
- 🚀 Fast and lightweight
- 🌙 Clean UI with modern styling
- 📊 SEO optimized
## Setup 🛠️
1. **Fork this project** to your GitHub account
2. **Clone the repository** to your local machine:
```bash
git clone https://github.com/manthanank/linktree-clone-angular.git
cd linktree-clone-angular
```
3. **Install dependencies**:
```bash
npm install
```
4. **Edit your profile data** in [public/data.json](public/data.json):
- Update your name, description, and profile picture
- Add your social media links and websites
5. **Replace the profile picture**: Add your picture as `public/images/picture.webp`
6. **Run the development server**:
```bash
npm start
```
7. **Deploy to Vercel** and your Linktree Clone is ready!
## Deploy 🚀
Deploy your Linktree clone instantly with Vercel:
[](https://vercel.com/new/import?s=https%3A%2F%2Fgithub.com%2Fmanthanank%2Flinktree-clone-angular&hasTrialAvailable=1&showOptionalTeamCreation=false&project-name=linktree-clone-angular&framework=angular&totalProjects=1&remainingProjects=1)
## Technology Stack 💻
- **Angular 19** - Latest version with standalone components
- **TypeScript** - Type-safe development
- **SCSS** - Enhanced styling capabilities
- **RxJS** - Reactive programming
- **Vercel** - Deployment platform
## Project Structure 📁
```text
src/
├── app/
│ ├── components/ # Reusable components
│ ├── services/ # Angular services
│ ├── models/ # TypeScript interfaces
│ └── constants/ # App constants
├── public/
│ ├── data.json # Profile configuration
│ ├── images/ # Profile and preview images
│ └── svg/ # Social media icons
└── ...
```
## Demo 🌐
**Live Demo:** [linktree-clone-angular.vercel.app](https://linktree-clone-angular.vercel.app/)
## Development 🛠️
### Prerequisites
- Node.js (v18 or higher)
- npm or yarn
- Angular CLI (optional but recommended)
### Development Server
Run the development server:
```bash
npm start
```
Navigate to `http://localhost:4200/`. The application will automatically reload when you change source files.
### Building for Production
Build the project for production:
```bash
npm run build
```
The build artifacts will be stored in the `dist/` directory.
## Contributing 🤝
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License 📄
This project is open source and available under the [MIT License](LICENSE).
## Support ⭐
If you found this project helpful, please give it a star! Your support means a lot.
## Author 👨💻
### Manthan Ankolekar
- Website: [manthanank.github.io](https://manthanank.github.io/)
- GitHub: [@manthanank](https://github.com/manthanank)
- LinkedIn: [manthanank](https://www.linkedin.com/in/manthanank)
---
Built with ❤️ using Angular 19