https://github.com/leonardospereira/expertnotes
Aplicação com o objetivo de permitir ao usuário de salvar notas, seja por áudio ou texto / Application aimed at allowing the user to save notes, either through audio or text.
https://github.com/leonardospereira/expertnotes
radix-ui react sonner speech-recognition tailwindcss typescript vite
Last synced: 8 months ago
JSON representation
Aplicação com o objetivo de permitir ao usuário de salvar notas, seja por áudio ou texto / Application aimed at allowing the user to save notes, either through audio or text.
- Host: GitHub
- URL: https://github.com/leonardospereira/expertnotes
- Owner: LeonardoSPereira
- Created: 2024-02-06T12:18:41.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-28T15:50:56.000Z (over 1 year ago)
- Last Synced: 2024-05-29T04:11:37.936Z (over 1 year ago)
- Topics: radix-ui, react, sonner, speech-recognition, tailwindcss, typescript, vite
- Language: TypeScript
- Homepage: https://expert-notes-wheat.vercel.app
- Size: 869 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Expert Notes
[]()
[Português](#pt) / [English](#en)
## 📝 Tabela de conteúdos
- [Sobre](#about_pt)
- [Iniciando a aplicação](#getting_started_pt)
- [Estrutura do projeto](#project_structure_pt)
- [Deploy](#deployment_pt)
- [Usando](#usage_pt)
- [Tecnologias](#built_using_pt)
## 🧐 Sobre
Esse projeto é uma aplicação web que permite que usuários possam criar notas sobre os assuntos que desejar, podendo ser por meio de texto ou áudio.
Ele foi construído durante o evento Next Level Week Expert da Rocketseat, na trilha de ReactJS.
A aplicação foi construída utilizando ReactJS, TypeScript, Tailwind e outras tecnologias.
Foi utilizado a api de reconhecimento de voz do navegador para a funcionalidade de notas por áudio.
## 🏁 Iniciando a aplicação
Essas instruções vão te permitir obter uma cópia do projeto e rodar a aplicação localmente para propósitos de desenvolvimento e teste.
### Pre-requisitos
Para rodar a aplicação, você precisa ter o Node.js instalado na sua máquina. Você pode baixar o Node.js [aqui](https://nodejs.org/en/).
### Instalação
Para acessar o projeto, basta clonar o repositório ou realizar o download dos arquivos do projeto.
Para clonar o repositório, utilize o seguinte comando no seu terminal:
```sh
git clone https://github.com/LeonardoSPereira/ExpertNotes
```
Após clonar o repositório, acesse a pasta do projeto e instale as dependências utilizando o seguinte comando no seu terminal:
```sh
npm install
```
Após instalar as dependências, utilize o seguinte comando no seu terminal para iniciar a aplicação:
```sh
npm run dev
```
Com isso, a aplicação estará rodando em http://localhost:5173. Para acessar a aplicação, basta acessar esse endereço no seu navegador.
## 📁 Estrutura do projeto
A estrutura do projeto é a seguinte:
```
├── public: pasta com arquivos públicos.
├── src: pasta com arquivos do projeto.
│ ├── assets: pasta com arquivos de imagem.
│ ├── components: pasta com componentes da aplicação.
│ │ ├── new-note-card.tsx: componente que contém o card para criação de uma nova nota.
│ │ ├── note-card.tsx: componente que contém o card de uma nota.
│ ├── app.tsx: arquivo que contém a aplicação.
│ ├── index.css: arquivo de estilização que contém a inicialização do Tailwind.
│ ├── main.tsx: arquivo que contém a inicialização do React.
├── index.html: arquivo que contém a estrutura da aplicação.
```
## 🚀 Deploy
O deploy da aplicação foi realizado utilizando a plataforma Vercel. Que garante que a aplicação esteja sempre rodando na última versão do projeto, de forma estável e segura.
A aplicação pode ser acessada [aqui](https://expert-notes-wheat.vercel.app/).
## 🎈 Usando
Para usar a aplicação, basta acessar a aplicação [aqui](https://expert-notes-wheat.vercel.app/). Ou rodar a aplicação localmente, seguindo as instruções acima.
As notas podem ser criadas por meio de texto ou áudio. Para criar uma nota por áudio, basta clicar no botão de iniciar gravação e falar o conteúdo da nota. Após terminar de falar, clique no botão de parar gravação. A nota será criada com o conteúdo falado e poderá ser editada antes de ser salva, garantindo que a nota esteja correta.
As notas podem ser excluídas clicando no botão de excluir na nota desejada.
As notas foram salvas no localStorage do navegador, garantindo que as notas criadas estejam sempre disponíveis, mesmo após fechar a aplicação.
## ⛏️ Tecnologias
- [ReactJS](https://reactjs.org/) - Biblioteca de JavaScript para construção de interfaces.
- [TypeScript](https://www.typescriptlang.org/) - Superset de JavaScript que adiciona tipagem estática ao código.
- [Tailwind](https://tailwindcss.com/) - Framework de estilização.
- [Vite](https://vitejs.dev/) - Build tool para aplicações web.
- [Radix UI](https://radix-ui.com/) - Biblioteca de componentes.
- [Lucide React](https://lucide.dev/) - Biblioteca de ícones.
- [Sonner](https://sonner.emilkowal.ski) - Biblioteca de notificações.
- [SpeechRecognition API](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition) - API de reconhecimento de voz do navegador.
## 📝 Table of Contents
- [About](#about_en)
- [Getting Started](#getting_started_en)
- [Project Structure](#project_structure_en)
- [Deployment](#deployment_en)
- [Usage](#usage_en)
- [Technologies](#built_using_en)
## 🧐 About
This project is a web application that allows users to create notes on any subject they want, either through text or audio.
It was built during the Next Level Week Expert event by Rocketseat, in the ReactJS track.
The application was built using ReactJS, TypeScript, Tailwind and other technologies.
The browser's voice recognition API was used for the audio notes functionality.
## 🏁 Getting Started
These instructions will allow you to get a copy of the project and run the application locally for development and testing purposes.
### Prerequisites
To run the application, you need to have Node.js installed on your machine. You can download Node.js [here](https://nodejs.org/en/).
### Installation
To access the project, either clone the repository or download the project files.
To clone the repository, use the following command in your terminal:
```sh
git clone https://github.com/LeonardoSPereira/ExpertNotes
```
After cloning the repository, navigate to the project folder and install dependencies using the following command in your terminal:
```sh
npm install
```
After installing the dependencies, use the following command in your terminal to start the application:
```sh
npm run dev
```
This will run the application at http://localhost:5173. To access the application, simply open this address in your browser.
## 📁 Project Structure
The project structure is as follows:
```
├── public: folder with public files.
├── src: folder with project files.
│ ├── assets: folder with image files.
│ ├── components: folder with application components.
│ │ ├── new-note-card.tsx: component that contains the card for creating a new note.
│ │ ├── note-card.tsx: component that contains the note card.
│ ├── app.tsx: file that contains the application.
│ ├── index.css: styling file that contains Tailwind initialization.
│ ├── main.tsx: file that contains the React initialization.
├── index.html: file that contains the application structure.
```
## 🚀 Deployment
The application was deployed using the Vercel platform. This ensures that the application is always running the latest version of the project, in a stable and secure manner.
The application can be accessed [here](https://expert-notes-wheat.vercel.app/).
## 🎈 Usage
To use the application, simply access the application [here](https://expert-notes-wheat.vercel.app/). Or run the application locally, following the instructions above.
Notes can be created through text or audio. To create a note by audio, simply click the start recording button and speak the note content. After finishing speaking, click the stop recording button. The note will be created with the spoken content and can be edited before being saved, ensuring that the note is correct.
Notes can be deleted by clicking the delete button on the desired note.
The notes were saved in the browser's localStorage, ensuring that the created notes are always available, even after closing the application.
## ⛏️ Technologies
- [ReactJS](https://reactjs.org/) - JavaScript library for building interfaces.
- [TypeScript](https://www.typescriptlang.org/) - Superset of JavaScript that adds static typing to the code.
- [Tailwind](https://tailwindcss.com/) - Styling framework.
- [Vite](https://vitejs.dev/) - Build tool for web applications.
- [Radix UI](https://radix-ui.com/) - Component library.
- [Lucide React](https://lucide.dev/) - Icon library.
- [Sonner](https://sonner.emilkowal.ski) - Notification library.
- [SpeechRecognition API](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition) - Browser voice recognition API.