Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pabloxt14/nlw-journey-react
Esta aplicação de nome Plann.er consiste em um site desktop para montar planos de viagem com amigos, registrar atividades e links úteis.
https://github.com/pabloxt14/nlw-journey-react
axios date-fns radix-ui react react-day-picker react-icons react-query react-router sooner tailwind-variants tailwindcss typescript vite zustand
Last synced: 11 days ago
JSON representation
Esta aplicação de nome Plann.er consiste em um site desktop para montar planos de viagem com amigos, registrar atividades e links úteis.
- Host: GitHub
- URL: https://github.com/pabloxt14/nlw-journey-react
- Owner: PabloXT14
- Created: 2024-07-13T00:05:55.000Z (7 months ago)
- Default Branch: master
- Last Pushed: 2024-07-26T22:16:54.000Z (7 months ago)
- Last Synced: 2024-11-29T00:13:55.074Z (2 months ago)
- Topics: axios, date-fns, radix-ui, react, react-day-picker, react-icons, react-query, react-router, sooner, tailwind-variants, tailwindcss, typescript, vite, zustand
- Language: TypeScript
- Homepage:
- Size: 3.56 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
NLW Journey (React)
🚀 Aplicação finalizada 🚀
About |
Layout |
Setup |
Technologies |
License
## 💻 About
Esta aplicação de nome **Plann.er** consiste em um site desktop para montar planos de viagem com amigos, registrar atividades e links úteis.
Os principais aprendizados neste projeto são a separação e componentização da interface em pequenas partes que podem ser reutilizadas, desta forma, facilitando também a manutenção futura. Ademais, também teve-se a implementação de roteamento com `React Route DOM` para a apresentação das rotas/paginas da aplicação de maneira dinâmica. Contudo, também vale destacar implementação de uma interface totalmente padronizada com princípios de um bom design usando o `Tailwind`.
Todavia, essa aplicação foi desenvolvida durante o NLW Journey da [Rocketseat](https://www.rocketseat.com.br/) utilizando principalmente tecnologias como `React`, `TypeScript` e `Tailwind`.
## 🎨 Layout
Você pode visualizar o layout do projeto através [desse link](https://www.figma.com/community/file/1392276515495389646/nlw-journey-planejador-de-viagem). É necessário ter conta no [Figma](https://www.figma.com/) para acessá-lo.
A seguir, veja uma demonstração das principais telas da aplicação:
### Nova Viagem (Local e Data)
### Nova Viagem (Pessoas)
### Nova Viagem (Convidar)
### Nova Viagem (Finalizar)
### Nova Viagem (Confirmar)
### Detalhes da Viagem (Full Page)
### Detalhes da Viagem (Nova Atividade)
### Detalhes da Viagem (Novo Link)
### Detalhes da Viagem (Confirmar Participante)
## ⚙ Setup
### 📝 Requisites
Antes de baixar o projeto você vai precisar ter instalado na sua máquina as seguintes ferramentas:
* [Git](https://git-scm.com)
* [NodeJS](https://nodejs.org/en/)
* [NPM](https://www.npmjs.com/) ou [Yarn](https://yarnpkg.com/)
* Para reproduzir o acesso a API back-end com os dados necessários para o front-end, clone o seguinte [repositório](https://github.com/pabloxt14/nlw-journey-node) que contem a API do nosso back-end feita em Node.js e execute na sua máquina.
Além disto é bom ter um editor para trabalhar com o código como [VSCode](https://code.visualstudio.com/)
### Cloning and Running
Passo a passo para clonar e executar a aplicação na sua máquina:
```bash
# Clone este repositório
$ git clone [email protected]:pabloxt14/nlw-journey-react.git
# Acesse a pasta do projeto no terminal
$ cd nlw-journey-react
# Instale as dependências
$ npm install
# Execute a API back-end
# Execute a aplicação em modo de desenvolvimento
$ npm run dev
# A aplicação inciará em alguma porta disponível que poderá ser acessada pelo navegador
```
## 🛠 Technologies
As seguintes principais ferramentas foram usadas na construção do projeto:
- **[React + Vite](https://vitejs.dev/)**
- **[TypeScript](https://www.typescriptlang.org/)**
- **[TailwindCSS](https://tailwindcss.com/)**
- **[TailwindCSS Variants](https://www.tailwind-variants.org/)**
- **[React Router DOM](https://reactrouter.com/)**
- **[React Query](https://tanstack.com/query/latest)**
- **[Zustand](https://zustand-demo.pmnd.rs/)**
- **[React Icons](https://react-icons.github.io/react-icons/)**
- **[Sooner](https://sonner.emilkowal.ski/)**
- **[React Day Picker](https://daypicker.dev/)**
- **[date-fns](https://date-fns.org/)**
- **[Axios](https://axios-http.com/ptbr/docs/intro)**
- **[Radix UI](https://www.radix-ui.com/)**
> Para mais detalhes das dependências gerais da aplicação veja o arquivo [package.json](./package.json)
## 📝 License
Este projeto está sob a licença MIT. Consulte o arquivo [LICENSE](./LICENSE) para mais informações
Feito com 💜 por Pablo Alan 👋🏽 Entre em contato!