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.
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.
Para rodar a aplicação, você precisa ter o Node.js instalado na sua máquina. Você pode baixar o Node.js aqui.
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:
git clone https://github.com/LeonardoSPereira/ExpertNotesApós clonar o repositório, acesse a pasta do projeto e instale as dependências utilizando o seguinte comando no seu terminal:
npm installApós instalar as dependências, utilize o seguinte comando no seu terminal para iniciar a aplicação:
npm run devCom isso, a aplicação estará rodando em http://localhost:5173. Para acessar a aplicação, basta acessar esse endereço no seu navegador.
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.
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.
Para usar a aplicação, basta acessar a aplicação aqui. 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.
- ReactJS - Biblioteca de JavaScript para construção de interfaces.
- TypeScript - Superset de JavaScript que adiciona tipagem estática ao código.
- Tailwind - Framework de estilização.
- Vite - Build tool para aplicações web.
- Radix UI - Biblioteca de componentes.
- Lucide React - Biblioteca de ícones.
- Sonner - Biblioteca de notificações.
- SpeechRecognition API - API de reconhecimento de voz do navegador.
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.
These instructions will allow you to get a copy of the project and run the application locally for development and testing purposes.
To run the application, you need to have Node.js installed on your machine. You can download Node.js here.
To access the project, either clone the repository or download the project files.
To clone the repository, use the following command in your terminal:
git clone https://github.com/LeonardoSPereira/ExpertNotesAfter cloning the repository, navigate to the project folder and install dependencies using the following command in your terminal:
npm installAfter installing the dependencies, use the following command in your terminal to start the application:
npm run devThis will run the application at http://localhost:5173. To access the application, simply open this address in your browser.
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.
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.
To use the application, simply access the application here. 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.
- ReactJS - JavaScript library for building interfaces.
- TypeScript - Superset of JavaScript that adds static typing to the code.
- Tailwind - Styling framework.
- Vite - Build tool for web applications.
- Radix UI - Component library.
- Lucide React - Icon library.
- Sonner - Notification library.
- SpeechRecognition API - Browser voice recognition API.