https://github.com/itsmorais/react-notes

Este projeto é um bloco de notas digital desenvolvido com React e Styled Components, proporcionando uma experiência fluida e responsiva para organização de informações.
https://github.com/itsmorais/react-notes

javascript jwt localstorage react styled-components

Last synced: 5 days ago
JSON representation

Este projeto é um bloco de notas digital desenvolvido com React e Styled Components, proporcionando uma experiência fluida e responsiva para organização de informações.

• Host: GitHub
• URL: https://github.com/itsmorais/react-notes
• Owner: itsmorais
• Created: 2022-11-17T21:53:45.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2025-01-25T22:54:32.000Z (11 days ago)
• Last Synced: 2025-01-25T23:31:28.975Z (11 days ago)
• Topics: javascript, jwt, localstorage, react, styled-components
• Language: JavaScript
• Homepage:
• Size: 1.18 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React-Notes



## Projeto web fullstack desenvolvido com React e NodeJS

Para um guia detalhado sobre os recursos e telas da aplicação, assista ao seguinte vídeo:

https://www.youtube.com/watch?v=fXbXVgL7cwM

Link para servidor nodeJS: https://github.com/itsmorais/API-NodeJS

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

Este projeto é uma **aplicação de notas baseada em React** projetada para ajudar os usuários a criar, editar e gerenciar suas anotações de forma eficiente. A aplicação oferece uma interface amigável e uma variedade de recursos para aprimorar a experiência de anotação.

## Recursos

- **Criar Notas**: Adicione novas notas com título e conteúdo.

- **Editar Notas**: Modifique notas existentes para atualizar informações.

- **Excluir Notas**: Remova notas que não são mais necessárias.

- **Funcionalidade de Pesquisa**: Encontre rapidamente notas usando a barra de pesquisa.

- **Modo Escuro**: Alterna entre temas claro e escuro para uma experiência visual confortável.

## Tecnologias Utilizadas

- **React.js**: Biblioteca JavaScript para construção de interfaces de usuário.

- **CSS Grid**: Utilizado para layouts responsivos e flexíveis.

- **Local Storage**: Armazena notas no navegador, garantindo persistência dos dados.

## Como Iniciar

Siga estes passos para configurar e executar o projeto localmente:

1. **Clonar o Repositório**:

   ```bash

   git clone 

   cd react-notes-app

   ```

2. **Instalar Dependências**:

   ```bash

   npm install

   ```

3. **Iniciar a Aplicação**:

   ```bash

   npm start

   ```

   A aplicação será executada em `http://localhost:3000`.

## Como Usar

- **Adicionando uma Nota**: Clique no botão "Adicionar Nota", insira o título e o conteúdo e salve.

- **Editando uma Nota**: Clique na nota que deseja editar, faça as alterações e salve.

- **Excluindo uma Nota**: Clique no ícone de exclusão associado à nota.

- **Pesquisando Notas**: Use a barra de pesquisa no topo para filtrar notas por título ou conteúdo.

- **Alternando Modo Escuro**: Clique no botão de alternância para mudar entre temas claro e escuro.

## Contribuição

Contribuições são bem-vindas! Por favor, faça um fork do repositório e envie um pull request para quaisquer melhorias ou correções de bugs.

## Licença

Este projeto está licenciado sob a Licença MIT.

# Screenshots do layout da aplicação

### Página inicial



### Criar uma nova nota



### Ver ou editar nota



### Edição de perfil do usuário