https://github.com/dvizioon/plann-er
https://github.com/dvizioon/plann-er
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/dvizioon/plann-er
- Owner: dvizioon
- Created: 2024-07-09T17:51:52.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-07-09T18:05:57.000Z (10 months ago)
- Last Synced: 2025-01-19T07:23:00.491Z (4 months ago)
- Language: TypeScript
- Homepage: https://planner-sigma-livid.vercel.app
- Size: 203 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Aplicação de Planejamento de Viagens ✈️📅
[](https://reactjs.org/)
[](https://www.typescriptlang.org/)
[](https://vitejs.dev/)
[](https://lucide.dev/docs/lucide-react/)
## 🌐 Vizualizar Projeto
🔗 [Veja a aplicação ao vivo](https://planner-sigma-livid.vercel.app/)
## 📜 Descrição
Esta aplicação permite que os usuários planejem viagens convidando amigos por e-mail e especificando detalhes como o destino e a data da viagem.
## ✨ Funcionalidades
- **📧 Convite por E-mail:** Permite convidar amigos para a viagem enviando um convite por e-mail.
- **👥 Modal de Convidados:** Abre um modal para gerenciar a lista de convidados.
- **🌍 Detalhamento de Viagem:** Campo para inserir o destino e a data da viagem.
- **✅ Confirmação de Viagem:** Botão para confirmar a viagem.
## 🛠️ Tecnologias Utilizadas
- **⚛️ React:** Biblioteca JavaScript para construção de interfaces de usuário.
- **🟦 TypeScript:** Superset do JavaScript que adiciona tipos estáticos.
- **⚡ Vite:** Ferramenta de build e desenvolvimento rápida e leve.
- **🔄 Lucide-React:** Biblioteca de ícones para React.
## 🛠️ Instalação
1. Clone o repositório:
```bash
git clone https://github.com/dvizioon/PLANN-ER.git
cd PLANN-ER
```
2. Instale as dependências:
```bash
npm install
```
3. Inicie a aplicação:
```bash
npm run dev
```
## 💡 Utilização
1. Abra a aplicação no navegador.
2. Insira o destino e a data da viagem.
3. Clique em "Continuar" para confirmar o local e a data.
4. Adicione e-mails dos convidados clicando no botão "Quem estará na viagem?".
5. Convide amigos preenchendo o e-mail e clicando em "Convidar".
> 📌 **Nota:** Certifique-se de configurar `main.tsx` e `tailwind.config` conforme necessário.
## 🔧 Códigos Mutáveis
```tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { App } from './App.tsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
,
)
```
>[!NOTE]
> `tailwind.config`
```tsx
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
fontFamily: {
sans:"Inter"
},
boxShadow: {
shape:
"0px 8px 8px rgba(0, 0, 0, 0.1), 0px 4px 4px rgba(0, 0, 0, 0.1), 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.1), inset 0px 0px 0px 1px rgba(255, 255, 255, 0.03), inset 0px 1px 0px rgba(255, 255, 255, 0.03)",
},
backgroundImage: {
pattern:"url(/bg.png)"
}
},
},
plugins: [],
}
```
## 📂 Estrutura do Projeto
- App.tsx: Componente principal que contém a lógica e os componentes da aplicação.
- index.css: Arquivo de estilos globais.
## Contato
E-mail: [email protected]
## Licença
Este projeto está licenciado sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.