👋 Hey! I'm Samuel Vitor, a brazilian programmer.

Next.js + TypeScript To-Do List Application

• 🔗 Modern fullstack To-Do List application using Next.js, TypeScript, Prisma, and Tailwind CSS.
• 👨 Users can create, read, update, delete, and filter tasks by status.
• 📊 Includes progress bars and task counters for better task management.

Technologies Used

📚 Backend

📚 Frontend

Methodology

This project uses a file-based routing system, where routes are automatically generated from the structure of the pages or app folders. It supports Server-Side Rendering (SSR) and Static Site Generation (SSG), ensuring optimized performance and a smooth user experience. Built with TypeScript, it benefits from static typing for enhanced code safety, readability, and maintainability.

Project Structure

src/
├─ app/ # Layouts e páginas principais
│ ├─ layout.tsx
│ ├─ page.tsx
│ ├─ task/ # Páginas de tarefas
│ │ └─ page.tsx
│ └─ __tests__/ # Testes de integração
│ ├─ page.test.tsx
│ └─ task-page.test.tsx
├─ actions/ # Ações server-side (Next.js Server Actions)
│ ├─ add-task.ts
│ ├─ delete-task.ts
│ ├─ edit-task.ts
│ ├─ toggle-done.ts
│ ├─ user.ts
│ ├─ get-tasks-from-bd.ts
│ ├─ clear-completed-tasks.ts
│ └─ authcontext.tsx
│ └─ __tests__/ # Testes unitários para ações
│ ├─ add-task.test.ts
│ ├─ delete-task.test.ts
│ ├─ edit-task.test.ts
│ ├─ toggle-done.test.ts
│ └─ user.test.ts
├─ components/ # Componentes reutilizáveis
│ ├─ edit-task.tsx
│ ├─ filter.tsx
│ └─ task.tsx
│ └─ __tests__/ # Testes unitários para componentes
│ ├─ edit-task.test.tsx
│ └─ filter.test.tsx
├─ lib/        # Código compartilhado
│ ├─ prisma.ts # Cliente Prisma
│ └─ utils.ts
├─ utils/ # Funções utilitárias
│ └─ prisma.ts
└─ globals.d.ts # Tipos globais

Tests

Tests are implemented using Jest and @testing-library/react to ensure the project's reliability through both unit and integration testing. Test structure: Organized by type, with unit tests focusing on components and isolated functions, and integration tests covering complete system flows.

How to Use

1. Clone the repository.
2. npm install
3. Set up environment variables in .env

  DATABASE_URL="postgresql://USER:PASSWORD@HOST:PORT/DATABASE_NAME"

4. npx prisma migrate dev
5. npm run dev
6. Access the application at http://localhost:3000

Testing

• Run all tests: npm test
• Run tests with coverage: npm test -- --coverage
• Test structure: Unit tests for actions and components, integration tests for full flows