Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
link-in-bio nodejs react styled-components typescript
Last synced: 13 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/arturbomtempo-dev/link-in-bio-react-youtube-tutorial
- Owner: arturbomtempo-dev
- License: mit
- Created: 2025-01-29T02:44:28.000Z (15 days ago)
- Default Branch: main
- Last Pushed: 2025-01-30T14:52:29.000Z (14 days ago)
- Last Synced: 2025-01-30T15:33:09.851Z (14 days ago)
- Topics: link-in-bio, nodejs, react, styled-components, typescript
- Language: TypeScript
- Homepage: https://arturbomtempo-links.vercel.app
- Size: 349 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.en.md
- License: LICENSE.md
Awesome Lists containing this project
README
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](#about)
- [Table of Contents](#table-of-contents)
- [Features](#features)
- [Application Demonstration](#application-demonstration)
- [Setup and Run the Application](#setup-and-run-the-application)
- [Technologies](#technologies)
- [Author](#author)
- [License](#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](https://arturbomtempo-links.vercel.app/).
## 📁 Setup and Run the Application
### ⚙️ Prerequisites
Before starting, you need to have the following tools installed on your machine: [Git](https://git-scm.com) and [Node.js](https://nodejs.org/).
It’s also recommended to use a code editor like [Visual Studio Code](https://code.visualstudio.com/).
### 🚀 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
```
## 💻 Technologies
The following tools and frameworks were used in the development of this project:
- [**React.js:**](https://react.dev/learn): A popular JavaScript library for building interactive and component-based user interfaces.
- [**TypeScript**](https://www.typescriptlang.org/docs): A strongly typed programming language based on JavaScript, adding static types and improving code quality.
- [**Styled Components**](https://styled-components.com/docs): A library for styling components in React, allowing the creation of dynamic and scoped CSS in JS.
- [**Vite**](https://vite.dev/guide/): A fast build tool for React.js, offering instant reloading and production optimizations, improving the development experience.
## 👨🏻💻 Author
---
| [
Artur Bomtempo](https://arturbomtempo.dev/) |
| :--------------------------------------------------------------------------------------------------------------------------------------------------: |
Developed by Artur Bomtempo 👋🏻. Get in touch:
[](mailto:[email protected])
[](https://www.linkedin.com/in/artur-bomtempo/)
[](https://www.instagram.com/arturbomtempo.dev/)
## 📜 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.