Plataforma moderna de rastreamento de tempo de estudos com metodologias de gamificação, totalmente responsiva e construída sob sólidas premissas de arquitetura de software.
O StudyTracker é uma aplicação focada em gerenciar sessões de estudo, organizar por diferentes matérias e rastrear métricas contínuas de produtividade. Projetado para proporcionar uma experiência fluida, o sistema insere incentivos constantes ao adotar conceitos de Gamificação, concedendo experiência (XP), níveis e conquistas à medida que o usuário mantém sua rotina de estudos de forma ininterrupta (Streaks).
O core da aplicação não apenas resolve problemas de procrastinação, mas também serve como uma "vitrine técnica" exemplar, arquitetado sob as melhores práticas do mercado, como SOLID, Programação Orientada a Objetos, Prevenção OWASP e sintaxe HTML/CSS moderna e acessível, em conformidade com as diretrizes da LGPD (Brasil).
O sistema atua como uma pochete virtual de produtividade e acompanhamento acadêmico. É o aliado indispensável de estudantes de concurso público, alunos de vestibular, universitários, desenvolvedores e pesquisadores independentes, permitindo visualizar com clareza o quanto estudam, onde devem focar mais tempo e premiando-os diretamente pelo esforço disciplinado.
- Gestão do Tempo e Controle de Sessão: O estudante cadastra suas matérias e dá o "Play" em sessões dedicadas. O aplicativo cronometra o progresso e avalia a performance no tempo decorrido de acordo com eficiência.
- Avaliação Prática (Dashboard e Gráficos): A visão de "Estatísticas" provê dados absolutos semanais, médias e comparações do tempo gasto em relatórios visuais úteis (gráfico de barras/distribuição de esforços).
- Mapeamento de Conteúdos: Na listagem da matéria, o estudante anota e checa pendências, separando tópicos e gerando um checklist focado e restrito.
- Resguardo Pessoal (LGPD): Com um menu flutuante dedicado e persistente de conformidade, o usuário controla sua gestão de dados sob as leis locais de descarte rápido e consentimento.
O projeto está modularizado de forma simples para o desenvolvimento ágil e dispensa setups hiper-complexos, rodando localmente de forma nativa.
- Clone o repositório:
git clone https://github.com/SeuUsuario/studytracker.git
cd studytracker- Instale as dependências:
npm install # ou yarn- Suba o Front e o Back End simultaneamente:
npm run dev(O projeto usará pacotes como concurrently para servir a porta 5800 da interface e o ambiente de APIs estendido na 5801 em um único processo node local).
- Node.js
v16.0ou superior. - Pacote Gerenciador: NPM ou Yarn.
- Navegador moderno (Chrome, Edge, Firefox, Brave, Safari) sem bloqueio rígido de scripts CORS/Localstorage local host.
A aplicação é fragmentada de forma inteligente. Abaixo, temos um retrato geral de como os domínios se comportam dentro da camada src/:
📂 studytracker
┣ 📂 public
┣ 📂 server # API Back-end node e rotas de salvamento persistentes
┣ 📂 src
┃ ┣ 📂 components # Elementos visuais reusáveis da UI (Botões, Cards, Modais)
┃ ┃ ┣ 📂 Dashboard
┃ ┃ ┣ 📂 Forms
┃ ┃ ┣ 📂 Layout
┃ ┃ ┣ 📂 StudyItems
┃ ┃ ┗ 📂 Views
┃ ┣ 📂 hooks # Custom hooks do React
┃ ┣ 📂 lib # Funções helpers genéricas ou inicializações de bibliotecas
┃ ┣ 📂 services # Lógica pesada de domínio, POO, interações com a API e DB Central
┃ ┣ 📂 types # Interfaces TypeScript / Tipagens definitivas
┃ ┗ 📂 utils # Conversores (Ícones, Tempos, Funções utilitárias puras)
┃ ┣ 📜 App.tsx # Container master e rotas visuais
┃ ┗ 📜 index.css # Sistema base Tailwind
┣ 📜 .env
┣ 📜 server.js
┣ 📜 package.json
┗ 📜 README.md
- Camada de Apresentação (Components / Views): Recebe inputs e exibe informações. Desacoplada 100% da transação do banco de dados persistente.
- Camada de Negócio (Services/Hooks): Orquestram regras de gamificação de níveis de usuário e validação algorítmica.
- Camada de Dados (Server/API/LocalStorage): Lida única e puramente com o transporte de Payload e gravação bruta do FileSystem do cliente.
Foi aplicada uma variação otimizada de Layered Architecture (Arquitetura em Camadas) mesclada com a mentalidade focada do React baseada em Components e Clean Architecture sutil para Domain Separation. Em vez dos componentes visuais lidarem com regras de exp e salvamentos massivos (Acoplamento), esses métodos são delegados para Controllers puros dentro de services/ ou injetados por hooks puros.
A estrutura foi rigorosamente avaliada com os conceitos clássicos da computação voltada a objetos e manutenibilidade contínua:
| Princípio | Aplicação no Projeto |
|---|---|
| S - Single Responsibility Principle | Cada arquivo em components faz uma única coisa (Ex: StatisticsView.tsx apenas exibe a view, ou SubjectIcons.tsx apenas formata dicionários). |
| O - Open/Closed Principle | Facilidade de extensão de novas Categorias e Ícones de Matérias sem mutilar o coração do arquivo base de roteamento React. |
| L - Liskov Substitution Principle | As implementações de chamadas ao Storage mantêm uma camada estrita. Caso a persistência de banco mude de JSON estático pra MongoDB, as Views da Interface ignorarão essa alteração pois as respostas têm a mesma forma abstrata garantida. |
| I - Interface Segregation Principle | Os domínios (Subject, Session, Progress) estão perfeitamente separados em Interfaces tipadas TypeScript específicas. Apenas funções designadas assinam suas próprias demandas (types/StudySession.ts). |
| D - Dependency Inversion Principle | Os relatórios visuais altos confiam na dependência imposta pelos controladores através das props abstraídas enviadas em top-level na App.tsx, e não na lógica imperativa interna construída do zero dentro dos relatórios. |
- Sanitização Refinada de Entradas: Implementamos bloqueios programáticos garantindo zero vulnerabilidade XSS passiva antes da inserção de tarefas e metas (
Sanitization Layers). - Política de Controle de Erros (Stack Traces Ocultas): O Back End no Express envia HTTP 200, 400 ou 500 formatados e descritivos blindando lógicas perigosas.
- Portas Desacopladas via Variáveis de Ambiente: Prevenções simples para conflitos sistêmicos (
.env) e uso de Restrições CORS que forçam apenas o domínio próprio React chamar as rotas JSON. - HTML Semântico Acessível: Os botões, formulários e divs têm restrições lógicas com uso rigoroso de contraste nativo Tailwind para visibilidade padrão (W3C A11y).
- Repository Pattern: Centralizado no uso indireto via Node/APIs onde o Front End não precisa saber a complexidade oculta de resgate (
StorageService). - Observer Pattern: Implícito pelas engines reativas do Context e State (via hooks padrão), permitindo re-renderizações puras sempre que um estado de Gamificação muta.
- Factory Method: Visível na construção padronizada contínua por funções que disparam a fabricação natural de Itens e de novas Contas/Sessões formatadas limpas.
- Linguagem: TypeScript (Strict Typing) / JavaScript ES6+
- Interface / Framework: React.js 18
- Estilização: Tailwind CSS / Vanilla Base CSS
- Ícones: Lucide React
- Motor Backend/Serviço Auxiliar: Node.Js com Express & Cors
- Armazenamento: Local Storage & File System (JSON Engine)
- Design/Semântica: ES6 Modules, ARIA Labels, LGPD Checkboxes
- Inclusão visual estilizada de "Matérias" com Nível Dinâmico (RPG).
- Contabilização em tempo real de Tarefas checkables por área.
- XP Farm e Streaks para estimular o ritmo contínuo.
- Renderizador Dashboard de estatísticas e gráficos barra-progresso por minutos.
- Botão Central para Cronometragem da sessão.
- Módulo flutuante de adequação e controle individual (Privacidade / Remoção Local de Dados).
- Antes: Arquivos React poluídos de regras JSON, mesclando salvamentos locais e lógicas complexas com renderização Divs (spaghetti code) onde tudo dava warning.
- Depois: Código focado e hiper-limpo, onde Emojis foram convertidos dinamicamente para Vetores de precisão matemática SVG. Total dissociação dos papéis usando Tailwind para limpeza do design e Clean Code Typescript para não permitir builds com lixo acumulado. Qualquer novo programador absorve mentalmente e expande o projeto com facilidade extrema.
- Utilização pesada e nativa de Data Manipulation em TypeScript, contornando mutações puras.
- Formato adequado para criação e isolamento de rotas Full Stack de pequena escala (React Frontend para Local Backend Express).
- Gerenciamento estrito de Portas Ambientais (ENV / CORS).
- Construtor visual de Design System responsivo usando Tailwind sob fundações dark/light transparentes contemporâneas (Glassmorphism sutil).
Este repositório está sob a licença MIT. Você é livre para usá-lo, modificar o código e aplicá-lo ao portfólio. (Consulte o arquivo oficial para resguardos detalhados de propriedade e garantias comerciais padrão).
Modern study-time tracking platform with built-in gamification methodologies. Fully responsive and built on incredibly solid software architectural foundations.
StudyTracker is an application focused on managing study sessions, organizing subjects, and tracking continuous productivity metrics smoothly. The system introduces constant stimuli by taking on Gamification concepts, granting Experience Points (XP), levels, and achievements as the user maintains an uninterrupted daily routine (Streaks). It's not just an end-product against procrastination; but acts as a paramount "engineering portfolio" application crafted around industry best practices like SOLID Principles, Object-Oriented Programming (OOP), OWASP Prevention Patterns, LGPD (Brazilian Laws) Directives, and Semantic & Accessible HTML/CSS.
Think of the application as a Virtual Academic Companion Pouch. An indispensable tool for students, developers, researchers, and public-contest contenders. It makes absolutely clear how much one studies, validates progression milestones transparently, and financially "pays back" through the built-in psychological gamification engine.
- Time Management & Session Control: Register customized subjects and smash "Play" on dedicated sessions. The app calculates progression globally matching focus efficiency.
- Dashboard Visual Reporting: The "Statistics" views render pure numbers of absolute weekly data, mathematical averages, and comparison time layouts (progress bar-graphs) useful at any moment.
- Item Mapping: Inside the subject module, generate quick, restricted checklists and toggle completion states in a glimpse.
- LGPD Consent Modules (Privacy Laws): Through a floating, persistent compliance widget, users natively govern their own LocalStorage and data deletion rules, honoring state-laws protocols quickly.
The implementation is natively modularized and avoids hyper-complex enterprise setups. You can launch it easily.
- Clone the Source:
git clone https://github.com/YourName/studytracker.git
cd studytracker- Dependencies Retrieval:
npm install # or yarn- Fire Front-End and Back-End simultaneously:
npm run dev(Running concurrently, the interface serves on 5800 via .env port declaration while the node API Storage runs side-by-side gracefully at port 5801 without overlap).
- Node.js
v16.0or greater. - NPM or Yarn.
- A Modern Browser without strict localhost CORS blocking.
A well-orchestrated structural tree separates the application naturally into domains:
📂 studytracker
┣ 📂 public
┣ 📂 server # API Back-End running on Node mapped correctly
┣ 📂 src
┃ ┣ 📂 components # Visual UI Blocks (Inputs, Cards, Dashboard)
┃ ┣ 📂 hooks # React Pure Custom Hooks
┃ ┣ 📂 lib # Helpers & Initializers
┃ ┣ 📂 services # The true Core (OOP Controllers, XP Maths, API interactions)
┃ ┣ 📂 types # TypeScript Interfaces definition core limits
┃ ┗ 📂 utils # Pure converters (Icon maps, time math strings)
┃ ┣ 📜 App.tsx # High Order visual Routing Parent Container
┃ ┗ 📜 index.css # Core Tailwind Engine & CSS Rules
┣ 📜 .env
┣ 📜 server.js
┣ 📜 package.json
┗ 📜 README.md
A highly-optimized variation of traditional Layered Architecture mixed flawlessly with React's Component-Driven Architecture and subtle Clean Architecture concepts. Instead of entangling components mapping localstorages mixed with complex mathematical XP generators, the visual DOM acts as "dumb displays" delegating the responsibilities completely through pure hooks into Domain specialized Services layer logic.
| Principle | Software Usage Focus |
|---|---|
| S - Single Responsibility Principle | Every inner view inside components solely handles display. (E.g. SubjectIcons.tsx only acts as a fast mapping dictionary for UI display engines, keeping maths away). |
| O - Open/Closed Principle | New Categories or custom Icons can be mapped and extrapolated without touching or breaking the heart of the Master Router Base. |
| L - Liskov Substitution Principle | Should the local storage paradigm shift into a remote MongoDB API, the visual interfaces don't need any updates. The data endpoints return the precise contract abstractions. |
| I - Interface Segregation Principle | Strict Typescript Domains (StudySession.ts). Separated, small chunks. Objects don't carry extra burden or forced variables they do not use inside the logic. |
| D - Dependency Inversion Principle | High order displays rely blindly on upper injection states, and never hardcode behavior downwards directly inside loop structures, letting controllers deal with abstractions smoothly. |
- Sanitization Core: Added passive security blocking algorithmic XSS inputs from breaking the layout/JSON arrays before committing text to assignments or items.
- REST Statuses Format: Meaningful local endpoints guaranteeing descriptive payload crashes without exposing node runtime exceptions back locally.
- Environment & Port Configuration: Unhooked configurations manually assigned to
.envpreventing hardcoded localhost risks to break outside local setups. - Semantic HTML Patterns: Absolute enforcement of W3C contrast visibility (accessibility rules), strict DOM elements structure boundaries (
main,divs, etc).
- Repository Pattern: Abstractions over fetching mechanisms hidden under pure asynchronous JS promises inside
StorageService. - Observer Pattern: Implied organically inside React Context / state reactivity paradigms driving views correctly when gamification thresholds are suddenly met.
- Factory Method: Deployed when crafting brand new, purely normalized Items, Session limits, or Player account structures internally without manually assembling nested arrays inside UI buttons callbacks.
- Language: TypeScript (Strict Typing Mode) / ECMAScript 6+
- Framework: React.js 18
- Styling Runtime: Tailwind CSS
- SVGs Arrays: Lucide React
- Micro Backend API Engine: Node.Js with Express & Cors implementations
- Database Emulator Layer: Local Storage (Window Bound) / JSON Object Mapping
- Semantic Web Rules: Accessibility, A11y & LGPD (General Data Protection Guidelines) Checks
- Visual Subject RPG Level-Ups.
- Actionable realtime progression tracking checklists.
- Passive XP Farm and continuous calendar streak multipliers implementations.
- Progress-mapped UI statistics on Dashboard layout.
- One-Click Stop-watch implementation for true focused flow.
- A floating Compliance center taking care of Privacy/Locals regulations.
- Before: Scattered variables saving things directly from button-clicks mixing states and logic into nested Div loops with text-emojis completely misaligned cross-browser rendering errors.
- After: Hyper-cleaned, beautifully aligned UI using mathematical pure SVG outlines instead of font emojis. Strict isolation by specialized files enforcing Type Safety preventing compile bugs with CSS completely handed off to centralized tailwinds. Ready for mid-level developers to jump in scaling the project without refactoring pains.
By absorbing this project codebase developers can heavily extract the following knowledges:
- Native TS Data Manipulations avoiding mutability overlaps inside JS complex trees.
- Lightweight React Client to local specific REST Node Servers.
- Cors management methodologies &
.envconfigurations manually bounded. - Designing Modern Web aesthetics leveraging dark/light glass structures completely pixel-perfect on CSS frameworks.
The project is officially released under the MIT License terms. Feel free to extend and modify components for educational or portfolio uses.