Desenvolvendo um Planejador de Estudos com React, TypeScript, ViteJs e TailwindCss

Sobre • Vitrine Dev • Tecnologias • Instalações • Funcionalidades • Autor • Licença

 

 

💻 Sobre o projeto

🚀 É um planejador de estudos desenvolvido em ViteJs, TypeScript, React e TailwindCSS.

Usei o ViteJs para iniciar o projeto React com TypeScript.

Usei todos os principais conceitos de ReactJs para desenvolver esta aplicação como: Componentização, Renderização dinâmica, Props, Hooks (useState e useEffect).

Utilizei o TailwindCss para abstrair o CSS.

 

---

 

📺 Vitrine Dev

🪧 Vitrine.Dev
✨ Nome	Desenvolvendo um Planejador de Estudos com React, TypeScript, ViteJs e TailwindCss
🏷️ Tecnologias	React, TypeScript, TailwindCSS, ViteJs, NodeJs, JavaScript, HTML5, CSS3, Prettier
🚀 URL	https://study-planner-livio-alvarenga.vercel.app/

---

 

🛠 Tecnologias

As seguintes ferramentas foram usadas na construção do projeto

 

---

 

⚙️ Instalações

# Criando projeto com ViteJs e React e TypeScript
npm create vite@latest studyPlanner -- --template react-ts

# Instalando dependências
cd studyPlanner
npm install

# Instalando faker
npm install --save-dev @faker-js/faker

# Instalando arquitetura Tailwindcss
npm install -D tailwindcss postcss autoprefixer prettier prettier-plugin-tailwindcss

# Criando tailwind.config.cjs
npx tailwindcss init -p

# Editando npx tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

# Adicionando configuração Tailwindcss em index.css
@tailwind base;
@tailwind components;
@tailwind utilities

# Cria arquivo .prettierrc.json na raiz do projeto

# Inicia projeto
npm run dev

 

---

 

⚙️ Funcionalidades

• Input para adicionar Tarefa;
• Input para adicionar Tempo;
• Lista dinâmica de tarefas e tempo;
• Seleção de tarefas e adição de tempo em cronometro;
• Start de cronometro e identificação de concluído em lista de tarefas;
• Estilização moderna com conceitos avançados de CSS.

 

🧭 Rodando a aplicação web (Modo desenvolvimento)

# Clone este repositório
$ git clone https://github.com/livioalvarenga/studyPlanner.git
# Acesse a pasta do projeto no seu terminal/cmd
$ cd studyPlanner
# Instale as dependências
$ npm install
# Execute a aplicação em modo de desenvolvimento
$ npm run dev
# A aplicação será aberta na porta:5173 - acesse http://localhost:5173

 

---

 

🦸 Autor

Olá, eu sou Livio Alvarenga, Engenheiro de Produção | Dev Back-end e Front-end. Sou aficcionado por tecnologia, programação, processos e planejamento. Uni todas essas paixões em uma só profissão. Dúvidas, sugestões e críticas são super bem vindas. Seguem meus contatos.

• www.livioalvarenga.com
• [email protected]

 

---

 

📝 Licença

Este projeto é MIT licensed.

#CompartilheConhecimento