https://github.com/arturbomtempo-dev/link-in-bio-react-youtube-tutorial
A simple and customizable “Link in Bio” project built with React, TypeScript, and Styled Components. This tutorial is part of a YouTube lesson on modern front-end development.
https://github.com/arturbomtempo-dev/link-in-bio-react-youtube-tutorial
Science Score: 26.0%
This score indicates how likely this project is to be science-related based on various indicators:
-
○CITATION.cff file
-
✓codemeta.json file
Found codemeta.json file -
✓.zenodo.json file
Found .zenodo.json file -
○DOI references
-
○Academic publication links
-
○Academic email domains
-
○Institutional organization owner
-
○JOSS paper metadata
-
○Scientific vocabulary similarity
Low similarity (14.3%) to scientific vocabulary
Keywords
Repository
A simple and customizable “Link in Bio” project built with React, TypeScript, and Styled Components. This tutorial is part of a YouTube lesson on modern front-end development.
Basic Info
- Host: GitHub
- Owner: arturbomtempo-dev
- License: mit
- Language: TypeScript
- Default Branch: main
- Homepage: https://arturbomtempo-links.vercel.app
- Size: 372 KB
Statistics
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
- Releases: 0
Topics
Metadata Files
README.en.md
Link in Bio
This project was developed with the goal of teaching the basic concepts of TypeScript, React, and Styled Components in a practical and educational way. Created for a tutorial on YouTube, it demonstrates step-by-step how to build a Link in Bio, a page that centralizes and facilitates access to various important links, such as portfolio, social media, and contact. Inspired by tools like Linktree, this project offers a customizable and accessible solution for those who want to create their own link page, especially for Instagram.
📋 Table of Contents
- About
- Table of Contents
- Features
- Application Demonstration
- Setup and Run the Application
- Technologies
- Author
- License
📝 Features
- [x] Profile display with photo, name, and description
- [x] Addition of multiple custom links
- [x] Social media icons with direct links
- [x] Responsive design for mobile devices
📲 Application Demonstration
The project is hosted on Vercel and can be accessed directly by clicking here.
📁 Setup and Run the Application
⚙️ Prerequisites
Before starting, you need to have the following tools installed on your machine: Git and Node.js.
It’s also recommended to use a code editor like Visual Studio Code.
🚀 How to Run the Application Locally
```bash
Clone this repository
$ git clone https://github.com/arturbomtempo-dev/Link-in-bio-react-youtube-tutorial.git
Navigate to the project folder
$ cd Link-in-bio-react-youtube-tutorial
Install dependencies
$ npm install
Run the application in development mode
$ npm run dev
The front-end will start on port 5173 - access http://localhost:5173
```
💻 Technologies
The following tools and frameworks were used in the development of this project:
- React.js:: A popular JavaScript library for building interactive and component-based user interfaces.
- TypeScript: A strongly typed programming language based on JavaScript, adding static types and improving code quality.
- Styled Components: A library for styling components in React, allowing the creation of dynamic and scoped CSS in JS.
- Vite: A fast build tool for React.js, offering instant reloading and production optimizations, improving the development experience.
👨🏻💻 Author
|
Artur Bomtempo |
| :--------------------------------------------------------------------------------------------------------------------------------------------------: |
Developed by Artur Bomtempo 👋🏻. Get in touch:
📜 License
MIT License
Copyright (c) 2025 Artur Bomtempo Colen
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Owner
- Name: Artur Bomtempo Colen
- Login: arturbomtempo-dev
- Kind: user
- Location: Belo Horizonte, MG
- Company: @webtech-network
- Website: https://arturbomtempo.dev
- Repositories: 28
- Profile: https://github.com/arturbomtempo-dev
Full Stack Developer passionate about technology since 2006.
GitHub Events
Total
- Watch event: 3
- Push event: 4
Last Year
- Watch event: 3
- Push event: 4
Issues and Pull Requests
Last synced: 11 months ago
All Time
- Total issues: 0
- Total pull requests: 0
- Average time to close issues: N/A
- Average time to close pull requests: N/A
- Total issue authors: 0
- Total pull request authors: 0
- Average comments per issue: 0
- Average comments per pull request: 0
- Merged pull requests: 0
- Bot issues: 0
- Bot pull requests: 0
Past Year
- Issues: 0
- Pull requests: 0
- Average time to close issues: N/A
- Average time to close pull requests: N/A
- Issue authors: 0
- Pull request authors: 0
- Average comments per issue: 0
- Average comments per pull request: 0
- Merged pull requests: 0
- Bot issues: 0
- Bot pull requests: 0
Top Authors
Issue Authors
Pull Request Authors
Top Labels
Issue Labels
Pull Request Labels
Dependencies
- 239 dependencies
- @eslint/js ^9.17.0 development
- @types/react ^18.3.18 development
- @types/react-dom ^18.3.5 development
- @vitejs/plugin-react ^4.3.4 development
- eslint ^9.17.0 development
- eslint-plugin-react-hooks ^5.0.0 development
- eslint-plugin-react-refresh ^0.4.16 development
- globals ^15.14.0 development
- prettier ^3.4.2 development
- typescript ~5.6.2 development
- typescript-eslint ^8.18.2 development
- vite ^6.0.5 development
- react ^18.3.1
- react-dom ^18.3.1
- react-icons ^5.4.0
- styled-components ^6.1.14