An open API service indexing awesome lists of open source software.

https://github.com/mathrb22/nlw-journey-frontend

Plann.er é uma aplicação web para criação de planos de viagem com amigos, registro de atividades e links úteis. Projeto desenvolvido durante o NLW Journey
https://github.com/mathrb22/nlw-journey-frontend

frontend reactjs tailwindcss typescript web

Last synced: about 2 months ago
JSON representation

Plann.er é uma aplicação web para criação de planos de viagem com amigos, registro de atividades e links úteis. Projeto desenvolvido durante o NLW Journey

Awesome Lists containing this project

README

          


plann.er







Made by mathrb22


GitHub Last Commit


GitHub Issues


Pull Requests Welcome


GitHub License

[**Sobre**](#-sobre)   **|**  
[**Objetivo**](#-objetivo)   **|**  
[**Tecnologias e ferramentas**](#-tecnologias-e-ferramentas)   **|**  
[**Features**](#-features)   **|**  
[**Demonstração**](#-demonstração)   **|**  
[**Protótipo**](#-protótipo)   **|**  
[**Referência da API**](#-referência-da-api)   **|**  
[**Instalação e execução**](#-instalação-e-execução)   **|**  
[**Como contribuir**](#-como-contribuir)   **|**  
[**Licença**](#-licença)

## 📃 Sobre

plann.er

**Plann.er** é o projeto desenvolvido durante a trilha de React da **Next Level Week Journey**, um evento online produzido pela [**Rocketseat**](https://github.com/Rocketseat).

Trata-se de uma aplicação web que permite aos usuários convidar seus amigos e planejar suas próximas viagens de uma forma simples e intuitiva.

## 🎯 Objetivo

O objetivo principal do **Plann.er** é criar uma plataforma que permita aos usuários planejar suas viagens, cadastrar atividades, e links úteis para a viagem, além de poder convidar amigos para acompanhar o planejamento.

## 🚀 Tecnologias e ferramentas




React

React



TypeScript

TypeScript



Tailwind CSS

Tailwind CSS



Vite

Vite.js

## ✨ Features

✅ Criação de viagens
✅ Seleção de convidados para a viagem
✅ Cadastro de atividades
✅ Validação de datas disponíveis para atividades
✅ Cadastro de links úteis
✅ Skeleton loader para carregamento de informações
✅ Design responsivo
✅ Cópia de link para a área de transferência

## 💻 Demonstração

[plann-er-demo.webm](https://github.com/mathrb22/nlw-journey-frontend/assets/62413443/3d8dcfa3-9fb8-47d0-80d6-e9f55627f19e)

Criação de uma viagem:
Criação de uma viagem no Plann.er

Inclusão de convidados:
Inclusão de convidados no Plann.er

Confirmar criação de uma viagem:
Confirmar criação de uma viagem no Plann.er

Skeleton loader para as informações da viagem:
Skeleton loader para as informações da viagem

Detalhes do plano de viagem:
Detalhes do plano de viagem no Plann.er

Cadastro de atividade:
Cadastro de atividade no Plann.er

Cadastro de link:
Cadastro de link no Plann.er

## 🎨 Protótipo

O protótipo do projeto foi desenvolvido utilizando a ferramenta [**Figma**](https://www.figma.com/). Você pode acessá-lo [aqui](https://www.figma.com/community/file/1392276515495389646/nlw-journey-planejador-de-viagem).

## ⚙ Referência da API

A API utilizada neste projeto foi desenvolvida pela trilha de Nodejs do NLW Journey. Você pode acessar o repositório do backend [aqui](https://github.com/mathrb22/nlw-journey-nodejs).

🔗 Documentação da API base: [NLW Journey Nodejs API](https://nlw-journey.apidocumentation.com/reference)

> **Nota:** Para rodar o frontend em sua máquina, será necessário ter o backend rodando localmente para conexão dos recursos do banco de dados. Siga as instruções no repositório do backend para configurá-lo em sua máquina.

## 🔧 Instalação e execução

Para baixar o código-fonte do projeto em sua máquina, primeiramente terá que ter instalado o [**Git**](https://git-scm.com/).
Com o Git instalado, em seu terminal execute o seguinte comando:

```bash
git clone https://github.com/mathrb22/nlw-journey-frontend.git
```

Para instalar as dependências e executar o projeto terá que ter instalado em sua máquina o [**node.js**](https://nodejs.org/en/), que vem acompanhado do npm. Instale as dependências usando o comando abaixo:

```bash
npm install
```

Executar o projeto:

```bash
npm run dev
```

A aplicação estará disponível em http://localhost:5173. Você poderá acessá-la a partir do seu navegador.

## 💡 Como contribuir

- Faça um **_fork_** desse repositório;
- Crie um **branch** para a sua feature: `git checkout -b minha-feature`;
- Faça um **commit** com suas alterações: `git commit -m 'feat: Minha nova feature'`;
- Faça um **push** para o seu branch: `git push origin minha-feature`;
- Faça um **pull request** com sua feature;

Pull requests são sempre bem-vindos. Em caso de dúvidas ou sugestões, crie uma _**issue**_ ou entre em contato comigo.

## 📝 Licença


GitHub License

Esse projeto está sob a licença **MIT**. Veja o arquivo _**LICENSE**_ para mais detalhes.

---

Desenvolvido com 💚 por mathrb22



Gmail