https://github.com/jairodoni/ecoleta
O Ecoleta é um marketplace que ajuda pessoas a encontrarem pontos de coleta de resíduos de forma eficiente. O projeto foi desenvolvido com base nas aulas da semana NextLevelWeek#1, evento criado pela Rocketseat.
https://github.com/jairodoni/ecoleta
Last synced: 3 months ago
JSON representation
O Ecoleta é um marketplace que ajuda pessoas a encontrarem pontos de coleta de resíduos de forma eficiente. O projeto foi desenvolvido com base nas aulas da semana NextLevelWeek#1, evento criado pela Rocketseat.
- Host: GitHub
- URL: https://github.com/jairodoni/ecoleta
- Owner: jairodoni
- License: mit
- Created: 2020-06-01T18:06:00.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-11T03:08:47.000Z (over 2 years ago)
- Last Synced: 2025-01-23T21:20:51.627Z (5 months ago)
- Language: TypeScript
- Homepage:
- Size: 6.76 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 46
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
![Npm_Badge][npm_version_badge] ![Node_Badge][node_version_badge] ![NodeJS_Badge][server_nodejs_badge] ![React_Badge][web_react_badge] ![React_Native_Badge][mobile_react-native_badge]![GitHub][repository_license_badge]
## **💻 Projeto**
O Ecoleta é um marketplace que ajuda pessoas a encontrarem pontos de coleta de resíduos de forma eficiente.
O projeto foi desenvolvido com base nas aulas da semana NextLevelWeek#1, evento criado pela Rocketseat.
## **🔖 Layout**
Você pode visualizar o layout do projeto no formato através [desse link](https://www.figma.com/file/9TlOcj6l7D05fZhU12xWT3/Ecoleta-Booster?node-id=0%3A1). Lembrando que você irá precisar ter uma conta no [Figma](http://figma.com/).
## **💻 Tecnologias**
#### **Website** ([React][react] + [TypeScript][typescript])
- **[React Router Dom][react_router_dom]**
- **[React Icons][react_icons]**
- **[Axios][axios]**
- **[Leaflet][leaflet]**
- **[React Leaflet][react_leaflet]**
- **[React Dropzone][react_dropzone]**
#### **Server** ([NodeJS][node] + [TypeScript][typescript])
- **[Express][express]**
- **[CORS][cors]**
- **[KnexJS][knex]**
- **[SQLite][sqlite3]**
- **[ts-node][tsnode]**
- **[dotENV][dotenv]**
- **[Multer][multer]**
- **[Celebrate][celebrate]**
- **[Joi][joi]**
\* Veja o arquivo [package.json](./project/server/package.json)
#### **Mobile** ([React Native][react_native] + [TypeScript][typescript])
- **[Expo][expo]**
- **[Expo Google Fonts][expo_google_fonts]**
- **[React Navigation][react_navigation]**
- **[React Native Maps][react_native_maps]**
- **[Expo Constants][expo_constants]**
- **[React Native SVG][react_native_svg]**
- **[Axios][axios]**
- **[Expo Location][expo_location]**
- **[Expo Mail Composer][expo_mail_composer]**
\* Veja o arquivo [package.json](./project/mobile/package.json)
#### **Utilitários**
- Protótipo: **[Figma](https://www.figma.com/)** → **[Protótipo (Ecoleta)](https://www.figma.com/file/9TlOcj6l7D05fZhU12xWT3/Ecoleta-Booster?node-id=0%3A1)**
- API: **[IBGE API][ibge_api]** → **[API de UFs][ibge_api_ufs]**, **[API de Municípios][ibge_api_municipios]**
- Maps: **[Leaflet][leaflet]**
- Editor: **[Visual Studio Code][vscode]** → Extensions: **[SQLite][vscode_sqlite_extension]**
- Markdown: **[StackEdit][stackedit]**, **[Markdown Emoji][markdown_emoji]**
- Teste de API: **[Insomnia][insomnia]**
- Ícones: **[Feather Icons][feather_icons]**, **[Font Awesome][font_awesome]**
- Fontes: **[Ubuntu][font_ubuntu]**, **[Roboto][font_roboto]**
## **🚀 Como executar o projeto**
### Configurações Iniciais
Primeiro, você precisa ter o [NodeJS](https://nodejs.org/en/download/) instalado na sua máquina.
Se você estiver utilizando o **Linux**, você pode optar por instalar o **Node** através do gerênciador de versões [asdf] para facilitar o processo de mudança da versão do **Node**, quando for necessário.
Você pode optar também por utilizar o **yarn** no lugar do **npm**. Você pode instalar clicando nesse [link][yarn], ou através do [asdf].
Após ter o **Node** instalado, instale as dependências do **React e React Native (Expo)** de forma global, utilizando os comandos:
```sh
# Expo (React Native):
$ npm install -g expo-cli
```
Você precisa renomear o arquivo `.env-example` para `.env` e inserir as informações que condizem com o seu **host**:
```sh
$ mv .env-example .env
```
Instale as dependências contidas nos arquivos `package.json` que se encontram na raíz do repositório, no diretório do **server**, no diretório do **website** e no diretório **mobile**. Para instalar as dependências, basta abrir o terminal no diretório e digitar o comando:
```sh
$ npm install
# ou
$ yarn
```
Exemplos:
```sh
# Instalando as dependências do server:
$ cd ./project/server
$ npm install
# Instalando as dependências do website:
$ cd ./project/website
$ npm install
# Instalando as dependências do mobile:
$ cd ./project/mobile
$ npm install
```
Veja os arquivos **`package.json`** do [server](./project/server/package.json), [website](./project/website/package.json) e [mobile](./project/mobile/package.json).
### Executando o Server
```sh
# Abrindo o terminal no diretório do servidor:
$ cd ./project/server
# Executando a aplicação em modo de desenvolvimento:
$ npm run dev
# Instanciando o banco de dados:
$ npm run knex:migrate
# Povoando o banco de dados (seeds):
$ npm run knex:seed
```
> Veja a parte de **scripts {}** do arquivo [package.json](./project/server/package.json) para saber quais scripts estão disponíveis.
### Executando o Website
```sh
# Abrindo o terminal no diretório do website:
$ cd ./project/website
# Executando o website no modo de desenvolvimento:
$ npm run start
```
> Se o browser não abrir automaticamente, acesse: http://localhost:3000.
### Executando o Mobile
Instale o aplicativo [Expo](https://play.google.com/store/apps/details?id=host.exp.exponent&hl=en) no seu smartphone.
```sh
# Abrindo o terminal no diretório do mobile:
$ cd ./project/mobile
# Executando o mobile no modo de desenvolvimento:
$ npm run start
```
Agora, abra o aplicativo do expo e no modo **LAN** faça o scan do QRCode.
> Se tiver algum problema para executar o aplicativo nesse modo, tente desabilitar o firewall da sua máquina.
Se tiver algum problema com as fontes, utilize o comando:
```sh
$ expo install expo-font @expo-google-fonts/ubuntu @expo-google-fonts/roboto
```
**\* Lembre de inserir no arquivo `.env` o IP exato que foi gerado pelo seu mobile após utilizar o comando `npm run start`.**
## **📚 Referências**
- [React + TypeScript Cheat Sheet](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet)
- [Blog Rocketseat](https://blog.rocketseat.com.br/)
- [ReactJS](https://reactjs.org/docs/getting-started.html) | [ReactJS pt-BR](https://pt-br.reactjs.org/docs/getting-started.html)
- [TypeScript](https://www.typescriptlang.org/docs/home.html)
- [React Native](https://reactnative.dev/docs/getting-started)
- [Expo](https://expo.io/learn)
- [Knex][knex]
- [Express](https://expressjs.com/pt-br/)
- [Node](https://nodejs.org/en/)
- [Celebrate](https://github.com/arb/celebrate)
- [Joi](https://hapi.dev/module/joi/)
## :memo: Licença
Esse projeto está sob a licença MIT. Veja o arquivo [LICENSE](LICENSE.md) para mais detalhes.
[rocketseat_site]: https://rocketseat.com.br/
[repository_license_badge]: https://img.shields.io/github/license/JairoDoni/NLW-1.0
[node_version_badge]: https://img.shields.io/badge/node-12.18.0-green
[npm_version_badge]: https://img.shields.io/badge/npm-6.14.4-red
[web_react_badge]: https://img.shields.io/badge/web-react-blue
[mobile_react-native_badge]: https://img.shields.io/badge/mobile-react%20native-blueviolet
[server_nodejs_badge]: https://img.shields.io/badge/server-nodejs-important
[react]: https://reactjs.org/
[typescript]: https://www.typescriptlang.org/
[node]: https://nodejs.org/en/
[leaflet]: https://react-leaflet.js.org/en/
[ibge_api]: https://servicodados.ibge.gov.br/api/docs/localidades?versao=1
[ibge_api_ufs]: https://servicodados.ibge.gov.br/api/docs/localidades?versao=1#api-UFs-estadosGet
[ibge_api_municipios]: https://servicodados.ibge.gov.br/api/docs/localidades?versao=1#api-Municipios-estadosUFMunicipiosGet
[vscode]: https://code.visualstudio.com/
[react_native]: http://www.reactnative.com/
[stackedit]: https://stackedit.io
[vscode_sqlite_extension]: https://marketplace.visualstudio.com/items?itemName=alexcvzz.vscode-sqlite
[markdown_emoji]: https://gist.github.com/rxaviers/7360908
[commitlint]: https://github.com/conventional-changelog/commitlint
[express]: https://expressjs.com/
[cors]: https://expressjs.com/en/resources/middleware/cors.html
[knex]: http://knexjs.org/
[sqlite3]: https://github.com/mapbox/node-sqlite3
[tsnode]: https://github.com/TypeStrong/ts-node
[feather_icons]: https://feathericons.com/
[insomnia]: https://insomnia.rest/
[react_leaflet]: https://react-leaflet.js.org/
[react_router_dom]: https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom
[react_icons]: https://react-icons.github.io/react-icons/
[axios]: https://github.com/axios/axios
[dotenv]: https://github.com/motdotla/dotenv
[expo]: https://expo.io/
[expo_google_fonts]: https://github.com/expo/google-fonts
[react_navigation]: https://reactnavigation.org/
[react_native_maps]: https://github.com/react-native-community/react-native-maps
[expo_constants]: https://docs.expo.io/versions/latest/sdk/constants/
[react_native_svg]: https://github.com/react-native-community/react-native-svg
[expo_location]: https://docs.expo.io/versions/latest/sdk/location/
[expo_mail_composer]: https://docs.expo.io/versions/latest/sdk/mail-composer/
[font_roboto]: https://fonts.google.com/specimen/Roboto
[font_ubuntu]: https://fonts.google.com/specimen/Ubuntu
[font_awesome]: https://fontawesome.com/
[multer]: https://github.com/expressjs/multer
[celebrate]: https://github.com/arb/celebrate
[joi]: https://github.com/hapijs/joi
[react_dropzone]: https://github.com/react-dropzone/react-dropzone
[asdf]: https://github.com/asdf-vm/asdf
[yarn]: https://classic.yarnpkg.com/en/docs/install/#debian-stable
