https://github.com/tutods/nlw-expert-react

Project created during the NLW Expert (React) from Rocketseat
https://github.com/tutods/nlw-expert-react

nlw react rocketseat tailwindcss typescript vite

Last synced: 14 days ago
JSON representation

Project created during the NLW Expert (React) from Rocketseat

• Host: GitHub
• URL: https://github.com/tutods/nlw-expert-react
• Owner: tutods
• Created: 2024-02-07T07:14:08.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-04-04T04:34:55.000Z (8 months ago)
• Last Synced: 2024-04-04T05:32:22.851Z (8 months ago)
• Topics: nlw, react, rocketseat, tailwindcss, typescript, vite
• Language: TypeScript
• Homepage: https://nlw-expert-react.netlify.app/
• Size: 360 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


[![Stargazers][stars-shield]][stars-url] [![Forks][forks-shield]][forks-url]

---

## 📄 Goal

This project is created during the **NLW Expert**, specifically the **React** course, implementing a simple notes app using **speech recognition**.

## 🛠 Skills

![react][react] ![tailwind][tailwind] ![radix-ui][radix-ui] ![eslint][eslint] ![comintlint][commitlint] ![prettier][prettier] ![vite][vite]

## 📄 Changes

This are some changes I have made during this 3 days course:

- [x] **ESLint** configuration;

  - Using my package [![npm package](https://img.myrandomwebs.com/npm/v/@tutods/eslint-config.svg?label=@tutods/eslint-config&icon=npm)](https://www.npmjs.com/package/@tutods/eslint-config)

- [x] **Prettier** configuration;

  - Using my package [![npm package](https://img.myrandomwebs.com/npm/v/@tutods/prettier-config.svg?label=@tutods/prettier-config&icon=npm)](https://www.npmjs.com/package/@tutods/prettier-config)

- [x] Add **Husky** and **Lint Staged** to run on each commit;

- [x] Add **Commit Lint** to follow the guidelines on commit messages;

- [x] Create custom hooks:

  - for recording;

  - for open and close the dialog manually, without any trigger.

- [x] Handle `focus-visible:` styles for the most of the buttons:

  - In some cases, like the "X" to close the modal, instead of add a outline, I change the colors, because of outline will not appear on the corners (being cut by the dialog itself).

## 🌐 Live Version

[![netlify](https://img.shields.io/badge/netlify-000?style=for-the-badge&logo=netlify&logoColor=white)](https://nlw-expert-react.netlify.app/)

## 🔗 More About Me

[

![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)

](https://linkedin.com/in/daniel-sousa-tutods)

[![twitter](https://img.shields.io/badge/twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/dsousa_12)

[![instagram](https://img.shields.io/badge/instagram-E4405F?style=for-the-badge&logo=instagram&logoColor=white)](https://twitter.com/dsousa_12)

[react]: https://img.shields.io/badge/react-1E4174?style=for-the-badge&logo=react&logoColor=white

[tailwind]: https://img.shields.io/badge/tailwindcss-1E4174?style=for-the-badge&logo=tailwindcss&logoColor=white

[radix-ui]: https://img.shields.io/badge/radix%20ui-1E4174?style=for-the-badge&logo=radix-ui&logoColor=white

[eslint]: https://img.shields.io/badge/eslint-1E4174?style=for-the-badge&logo=eslint&logoColor=white

[commitlint]: https://img.shields.io/badge/commitlint-1E4174?style=for-the-badge&logo=commitlint&logoColor=white

[prettier]: https://img.shields.io/badge/prettier-1E4174?style=for-the-badge&logo=prettier&logoColor=white

[vite]: https://img.shields.io/badge/vite-1E4174?style=for-the-badge&logo=vite&logoColor=white

[forks-shield]: https://img.shields.io/github/forks/tutods/nlw-expert-react?style=for-the-badge

[forks-url]: https://github.com/tutods/nlw-expert-react/network/members

[stars-shield]: https://img.shields.io/github/stars/tutods/nlw-expert-react?style=for-the-badge

[stars-url]: https://github.com/tutods/nlw-expert-react/stargazers