Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marciojorgemelo/devlinks
Projeto de cadastro de links e redes sociais
https://github.com/marciojorgemelo/devlinks
Last synced: 6 days ago
JSON representation
Projeto de cadastro de links e redes sociais
- Host: GitHub
- URL: https://github.com/marciojorgemelo/devlinks
- Owner: MarcioJorgeMelo
- Created: 2024-11-21T22:25:00.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2025-01-14T16:08:22.000Z (14 days ago)
- Last Synced: 2025-01-14T17:14:05.508Z (14 days ago)
- Language: TypeScript
- Homepage: https://dev-links-coral.vercel.app
- Size: 333 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# DevLink
![project-image](public/readme_images/home.png)
O **DevLink** é uma plataforma para cadastro e compartilhamento de links e redes sociais que deseja mostrar para o mundo, que conecta também, colaboradores e empresas de forma elegante e eficiente. Desenvolvido com _React, Tailwind, e TypeScript_, o site utiliza o _Firebase Database_ para gerenciamento de dados. Atualmente, está em fase de planejamento para lançamento na Vercel.
## Sumário
1. [Visão Geral do Projeto](#visão-geral-do-projeto-funcionalidades-principais)
- [Destaque de links publicados](#1-destaque-de-links-publicados)
- [Dados Detalhados](#2-dados-detalhados)
2. [Tecnologias Utilizadas](#tecnologias-utilizadas-linguagens-e-ferramentas)
3. [Estrutura do Projeto](#estrutura-do-projeto)
5. [Screenshots](#screenshots)
- [Iphone 14 pro max](#iphone-14-pro-max)
- [Ipad pro](#ipad-pro)
- [Mobile](#mobile)
- [Desk](#desktop)
6. [Requisitos para Rodar o Projeto Localmente](#requisitos-para-rodar-o-projeto-localmente)
7. [Rodar o Projeto Localmente](#rodar-o-projeto-localmente)
8. [Autores](#autores)
9. [Licença](#licença)## Visão Geral do Projeto (Funcionalidades Principais)
### 1. Destaque de links publicados:
- Os usuários podem acessar os links nos quais forma cadastrados pelos usuários pelo nome para obter informações e entrar em contato com o anunciante.
### 2. Dados Detalhados:
- **Modelo:** Mostra um modelo moderno e elegante para o link.
- **Dados:** Exibe o nome principal do link cadastrado.
- **Acesso:** Acesso direto as redes sociais do anunciante.## Tecnologias Utilizadas (Linguagens e ferramentas)
## Estrutura do Projeto
O projeto é organizado em vários arquivos para melhor organização do código e separação de interesses:
- `public/`: A pasta serve como o local para armazenar arquivos estáticos que não passam pelo processo de build do React e podem ser acessados diretamente no navegador.
- `src/`: Onde encontra-se o processo de desenvolvimento de todo o código-fonte do sistema.
- `components/`: A pasta contém todos os componentes utilizados na aplicação.
- `pages/`: A pasta contém a estrutura das páginas da aplicação.
- `routes/`: Onde encontra-se o controle de autenticação das demais rotas do sistema.
- `services/`: A pasta contém as configurações para utilização das funções do Firebase.
- `App.jsx`: A pasta contém toda a estrutura de rotas do sistema.
- `index.css`: Onde encontra-se a estilização global da aplicação.## Screenshots
### Iphone 14 pro max
![App mobile Screenshot](public/readme_images/iphone.png)
### Ipad pro
![App ipad Screenshot](public/readme_images/ipad.png)
### Mobile
![App mobile Screenshot](public/readme_images/android.png)
### Desktop
![App desktop Screenshot](public/readme_images/home.png)
![App desktop Screenshot](public/readme_images/login.png)
![App desktop Screenshot](public/readme_images/dashboard.png)
![App desktop Screenshot](public/readme_images/social.png)## Requisitos para Rodar o Projeto Localmente
### Node.js e npm:
- Verifique se você tem o Node.js instalado. Caso contrário, faça o download e instale a versão mais recente do Node.js.
- O npm (Node Package Manager) é instalado automaticamente com o Node.js.### Git:
- Certifique-se de ter o Git instalado em sua máquina. Se não tiver, você pode baixá-lo aqui.
### Editor de Texto ou IDE:
- Escolha um editor de texto ou uma IDE (Ambiente de Desenvolvimento Integrado) para trabalhar no código. Alguns exemplos populares incluem o Visual Studio Code, Sublime Text e Atom.
### Navegador Web:
- Você precisará de um navegador web para visualizar o aplicativo localmente. Recomendamos o uso do Google Chrome, Mozilla Firefox ou Microsoft Edge.
### Conta no Firebase Console no plano Blaze:
- O projeto DevLinks consome dados do storage, função paga por utilização, dos serviços do Firebase. Crie uma conta gratuita em OpenWeatherMap, cadastre seu cartão e obtenha uma chave de API (API key).
## Rodar o Projeto Localmente
**Clone o projeto**
```bash
git clone [https://github.com/MarcioJorgeMelo/web-carros.git](https://github.com/MarcioJorgeMelo/DevLinks.git)
```**Vá para a pasta do projeto**
```bash
cd devlinks
```**Abra o projeto no VSCode**
```bash
code .
```**Instale as dependências**
```bash
npm install # Instala as dependências (se ainda não tiver feito)
```**Abra com o React Server**
```bash
npm run dev # Inicia o servidor React
```## Autores
- [@MarcioJorgeMelo](https://github.com/MarcioJorgeMelo)
## Licença
- [MIT](https://choosealicense.com/licenses/mit/)