https://github.com/gmartins-dev/videoteca-completo

Aplicação criada para praticar o básico de Node.js e React em conjunto. Criar uma API básica e consumi-la no frontend.
https://github.com/gmartins-dev/videoteca-completo

Last synced: over 1 year ago
JSON representation

Aplicação criada para praticar o básico de Node.js e React em conjunto. Criar uma API básica e consumi-la no frontend.

• Host: GitHub
• URL: https://github.com/gmartins-dev/videoteca-completo
• Owner: gmartins-dev
• Created: 2022-05-14T19:39:00.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2022-05-14T20:57:59.000Z (about 4 years ago)
• Last Synced: 2025-02-01T17:25:23.705Z (over 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 86.9 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Videoteca

Aplicação de estudo desenvolvida para aprender tecnologias e fixar conceitos da web.

### Tecnologias utilizadas:

* MongoDB

* Node.js

  * Express

  * uuid

  * Mongoose

* React

  * React Icons

  * Axios

  * SWR

### Novos aprendizados:

#### Node.js:

Em Node.js, pude aprender a criar um **API Rest** utilizando conceitos básicos de desenvolvimento de uma aplicação, como:

* Criação de um CRUD em Node.js;

* A separação de responsabilidades através de arquivos e funções de acordo com os padrões utilizados pela comunidade;

* Roteamento com o **Express**;

* Utilizar **Insomnia** para desenvolver o backend sem um frontend estruturado; 

* **Métodos HTTP**

* Liberação de uso do backend para o **CORS**.

#### React:

Aqui obtive vários conhecimentos novos, como:

* Como consumir uma API utilizando o Axios;

* Criação e utilização de hooks personalizados no React para melhor aproveitamento de código;

* Separação das regras de negócio para serem gerenciadas por contextos;

* O uso de SWR para melhorar ainda mais a User Experience;

* O conceito de UI otimista e o mutate de SWR;

* Um pouco mais sobre design responsivo e CSS.

### Sobre o app

É um aplicativo para você salvar links de vídeos, onde pode colar o link de um vídeo, atribuí-lo um nome, dar like, editar e excluir. O código e a UI foi feita inteiramente em inglês, buscando melhorar meu conhecimento na linguagem.

**Homepage:**

![Homepage](./images/homepage_novideo.png)

**Homepage com notas:**

![Homepage2](./images/homepage.png)

**Modal para criar/editar nota**

![Modal](./images/modal.png)

**E sim, funciona em dispositivos móveis!**

![Mobile](./images/mobile.png)