Nivo

Aplicação web desenvolvida no React na prática da RocketSeat

💻 Projeto

    Esse projeto é uma aplicação web para catalogar produtos em categorias. Foi desenvolvido em React utilizando Typescript, TailwindCSS, Radix/ui, React Query, React Hook Form, React Router DOM, Tanstack...

    🚧 Em desenvolvimento: apenas a tela Upload foi desenvolvida parcialmente, implementados a criação de nova tag, o search/filter e a paginação.

    🌐 Aplicação está disponível aqui

🚀 Tecnologias

HTML CSS JavaScript React ViteJS TypeScript TailWindCSS Radix UI Lucide React Tanstack VS Code

• HTML - linguagem de marcação de hipertexto usada na construção de aplicaçÇão web
• CSS - folhas de estilo em cascata é uma linguagem usada para estilizar
• JavaScript - linguagem de programação que permite implementar itens complexos em páginas web
• ReactJS - biblioteca JavaScript para construção de interfaces
• Vite - build tool para aplicações web
• TypeScript - superset de JavaScript que adiciona tipagem estática ao código
• Tailwind - framework de estilização
• Radix UI - biblioteca de componentes
• Tanstack - biblioteca que facilita o trabalho com consultas, roteamento, tabela, formulário...
• Lucide React - biblioteca de ícones

👩‍💻 Aprendizado

HTML CSS JavaScript React

TypeScript Tailwind Radix-ui (select + dialog) Lucide react

React Query: mutation React Hook Form React Router DOM JSON-server

Tanstack Componetização Desestruturação Acessibilidade

🗃️ Estrutura de pastas

├── 📁 public: arquivos públicos
├── 📁 src: arquivos do projeto
│   ├── 📁 assets: arquivo de imagem
│   ├── 📁 components: componentes da aplicação
│   |   |── 📁 ui: componentes prontos
│   │   ├── create-tag-form.tsx: componente de criação de tag
│   │   ├── header.tsx: componente do header
│   │   ├── pagination.tsx: componente da paginação
│   │   ├── tabs.tsx: componente da tabela
│   ├── app.tsx: arquivo que contém a aplicação
│   ├── index.css: arquivo de estilização com a inicialização do Tailwind
│   ├── main.tsx: arquivo com a inicialização do React
├── index.html: arquivo com a estrutura da aplicação
├── README.md: arquivo com informações do projeto
├── server.json: banco de dados para a API REST (JSON-server)

⚡ Executando

    Precisa ter o Node.js instalado na sua máquina para rodar essa aplicação.

    Após clonar o repositório, acesse a pasta do projeto e execute os comandos: npm install, npm run server e em outro terminal npm run dev.

  git clone https://github.com/MichelleCordeiro/nlw-expert-react-notes.git

  npm install

  npm run server

  npm run dev

    Acesse http://localhost:5173 para visualizar a aplicação.

👩🏼‍💻 Contatos

    Michelle Cordeiro   LinkedIn   E-mail: [email protected]

📝 License

Made with 💜 by Michelle Cordeiro