https://github.com/jeffersonsimplicio/first-full-stack

Projeto Full-Stack de To Do List, as tarefas são salvas e gerenciadas pelo back-end, deixando para o front-end a responsabilidade de interface gráfica.
https://github.com/jeffersonsimplicio/first-full-stack

api backend context-api crud docker docker-compose nodejs nodemon react

Last synced: about 18 hours ago
JSON representation

Projeto Full-Stack de To Do List, as tarefas são salvas e gerenciadas pelo back-end, deixando para o front-end a responsabilidade de interface gráfica.

• Host: GitHub
• URL: https://github.com/jeffersonsimplicio/first-full-stack
• Owner: JeffersonSimplicio
• Created: 2022-07-31T12:58:34.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-09-26T15:54:08.000Z (about 2 years ago)
• Last Synced: 2024-04-15T00:16:21.208Z (7 months ago)
• Topics: api, backend, context-api, crud, docker, docker-compose, nodejs, nodemon, react
• Language: JavaScript
• Homepage:
• Size: 354 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
TO DO LIST FULL-STACK 📓


## Descrição

Esse To Do List é uma aplicação full-stack, ou seja, á uma divisão de responsabilidade. O back-end desenvolvido em node.js com uma arquitetura MSC (Model-Service-Controller), é possível criar, ler, editar e deletar(CRUD) as tarefas. O front-end, construído em React, interage com o banc-end, não sendo necessário guardar qualquer arquivo na máquina do usuário.

## Tecnologias

![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)

![NodeJS](https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=nodedotjs&logoColor=white)

![Express.js](https://img.shields.io/badge/Express.js-000000?style=for-the-badge&logo=express&logoColor=white)

O front-end foi desenvolvido com **React**, o código foi componentizado visando uma maior facilidade em futuras manutenções, atualizações e a reutilização de código. A comunicação entre os componentes foi feitai utilizando uma tecnologia interna do react, o **Context API**, dispensando a instalação de bibliotecas externas.

O back-end foi desenvolvido em javascript com **node.js**, utilizando a lib **Express** para a estruturação da API, é usada uma arquitetura **MSC**(Model-Service-Controller) para distribuir responsabilidades, além de facilitar futuras manutenções e melhorias. As tarefas são salvas em um arquivo .JSON, que é editado usando ferramentas internas.

## Utilização

  💻 Localmente

  - Para rodar a aplicação, obrigatoriamente você deve ter o `node` instalado em seu computador.

  1. Clone o projeto para sua maquina

  ```

    git clone [email protected]:JeffersonSimplicio/first-full-stack.git

  ```

  2. Entre no diretório gerado  

  ```

    cd first-full-stack

  ```

  3. Entre no diretório de front-end e instale as dependências

  ```

    cd frontend/ && npm i && cd ..

  ```

  4. Entre no diretório de back-end e instale as dependências

  ```

    cd backend/ && npm i && cd ..

  ```

  5. Inicialize a aplicação back-end

  ```

    cd backend/ && npm start && cd ..

  ```

  6. Inicialize a aplicação front-end

  ```

    cd frontend/ && npm start && cd ..

  ```

  7. Abra o navegador e acesse a url: `http://localhost:3000/`

  🐳 Docker

  - Para rodar a aplicação com docker, é necessário ter instalando em sua maquina `Docker` e `Docker Compose`

  1. Clone o projeto para sua maquina

  ```

    git clone [email protected]:JeffersonSimplicio/first-full-stack.git

  ```

  2. Entre no diretório gerado  

  ```

    cd first-full-stack

  ```

  3. Suba o ambiente do docker

  ```

    docker-compose up -d --build

  ```

  4. Abra o navegador e acesse a url: `http://localhost:3000/`