🇧🇷 Português

---

🇺🇸 English

🎬 Project Description

LinkOrganizerApp is a full-stack web application designed for organizing and managing web links. Developed with a .NET backend and an Angular frontend, the system allows users to save, categorize, and search for their favorite links in an easy and intuitive way. It's the perfect tool to keep all your important URLs centralized and accessible.

🛠️ Tools and Technologies Used

• Backend:

  • .NET 8 / C# 💻 — Core platform for the API.
  • ASP.NET Core 🌐 — Framework for building the REST API.
  • Entity Framework Core 🗃️ — ORM for data access.
  • SQL Server / PostgreSQL / SQLite 🗄️ — Relational database for storing links and user data.
  • JWT (JSON Web Tokens) 🔐 — For securing the API with token-based authentication.
  • AutoMapper 🔄 — For object-to-object mapping (Entities to DTOs).
  • Docker 🐳 — For containerizing the application.

• Frontend:

  • Angular 🅰️ — Framework for building the client-side user interface.
  • TypeScript ⌨️ — Main language for the frontend.
  • HTML & SCSS 🎨 — For structuring and styling the application.
  • UI Component Library ✨ (e.g., Angular Material or PrimeNG).

🏛️ Project Architecture

The project is structured following modern software design principles, separating backend and frontend responsibilities.

Backend Architecture (Clean Architecture)

The API follows Clean Architecture principles, separating concerns into distinct layers:

• Domain: Contains the core business logic, entities (User, Link, Category), with no external dependencies.
• Application: Orchestrates the data flow and implements use cases (services for managing links and categories). It depends only on the Domain layer.
• Infrastructure: Handles external concerns like database access (EF Core DbContext, repository implementations), and authentication services.
• API: The entry point of the application, responsible for exposing REST endpoints, handling HTTP requests/responses, and managing user authentication. It connects all other layers through Dependency Injection.

Frontend Architecture

The frontend is built with Angular, following its standard architecture:

• Components: Reusable UI blocks (e.g., login form, link list, category filter).
• Services: Encapsulate business logic, such as API communication (AuthService, LinkService).
• Guards: Protect routes, ensuring that only authenticated users can access the dashboard.
• Interceptors: Automatically attach the JWT authentication token to outgoing HTTP requests.

🚀 How to Run the Project Locally

Backend (.NET API)

1. Prerequisites:

   • .NET 8 SDK.
   • A compatible database (e.g., SQL Server Express).

2. Clone the repository:

   git clone https://github.com/IagoAntunes/LinkOrganizerApp.git

3. Configure the backend:

   • Navigate to the API's source directory.
   • Update appsettings.json with your database connection string and JWT secret key.

4. Apply database migrations:

   • Open a terminal in the API's source directory (where the .csproj file is).
   • Run the command to create or update the database schema:

     dotnet ef database update

5. Run the API:

   dotnet run

   The API will be available at a configured port (e.g., https://localhost:7001).

Frontend (Angular)

1. Prerequisites:

   • Node.js and npm (LTS version recommended).
   • Angular CLI: npm install -g @angular/cli.

2. Navigate to the frontend folder:

   cd path/to/your/frontend-folder

3. Install dependencies:

   npm install

4. Run the application:

   ng serve

   The application will be available at http://localhost:4200.

---

🇧🇷 Português

🎬 Descrição do Projeto

LinkOrganizerApp é uma aplicação web full-stack para organizar e gerenciar links da web. Com backend desenvolvido em .NET e frontend em Angular, o sistema permite que os usuários salvem, categorizem e pesquisem seus links favoritos de forma fácil e intuitiva. É a ferramenta perfeita para manter todas as suas URLs importantes centralizadas e acessíveis.

🛠️ Ferramentas e Tecnologias Utilizadas

• Backend:

  • .NET 8 / C# 💻 — Plataforma principal da API.
  • ASP.NET Core 🌐 — Framework para construção da REST API.
  • Entity Framework Core 🗃️ — ORM para acesso a dados.
  • SQL Server / PostgreSQL / SQLite 🗄️ — Banco de dados relacional para armazenar links e dados de usuários.
  • JWT (JSON Web Tokens) 🔐 — Para proteger a API com autenticação baseada em token.
  • AutoMapper 🔄 — Para mapeamento de objetos (Entidades para DTOs).
  • Docker 🐳 — Para containerização da aplicação.

• Frontend:

  • Angular 🅰️ — Framework para construção da interface do cliente.
  • TypeScript ⌨️ — Linguagem principal do frontend.
  • HTML & SCSS 🎨 — Para estruturação e estilização da aplicação.
  • Biblioteca de Componentes de UI ✨ (ex: Angular Material ou PrimeNG).

🏛️ Descrição da Arquitetura

O projeto é estruturado seguindo princípios modernos de design de software, separando as responsabilidades de backend e frontend.

Arquitetura do Backend (Clean Architecture)

A API segue os princípios da Clean Architecture, dividindo as responsabilidades em camadas distintas:

• Domain: Contém a lógica de negócio principal e as entidades (User, Link, Category), sem dependências externas.
• Application: Orquestra o fluxo de dados e implementa os casos de uso (serviços para gerenciar links e categorias). Depende apenas da camada de Domínio.
• Infrastructure: Lida com preocupações externas, como acesso ao banco de dados (implementação do DbContext do EF Core) e serviços de autenticação.
• API: Ponto de entrada da aplicação, responsável por expor os endpoints REST, lidar com requisições/respostas HTTP e gerenciar a autenticação de usuários. Conecta todas as outras camadas através de Injeção de Dependência.

Arquitetura do Frontend

O frontend é construído com Angular, seguindo sua arquitetura padrão:

• Components: Blocos de UI reutilizáveis (ex: formulário de login, lista de links, filtro por categoria).
• Services: Encapsulam a lógica de negócio, como a comunicação com a API (AuthService, LinkService).
• Guards: Protegem rotas, garantindo que apenas usuários autenticados possam acessar o painel principal.
• Interceptors: Anexam automaticamente o token de autenticação JWT às requisições HTTP de saída.

🚀 Como Rodar o Projeto Localmente

Backend (.NET API)

1. Pré-requisitos:

   • .NET 8 SDK.
   • Um banco de dados compatível (ex: SQL Server Express).

2. Clone o repositório:

   git clone https://github.com/IagoAntunes/LinkOrganizerApp.git

3. Configure o backend:

   • Navegue até o diretório fonte da API.
   • Atualize o arquivo appsettings.json com sua connection string do banco de dados e a chave secreta do JWT.

4. Aplique as migrações do banco de dados:

   • Abra um terminal no diretório fonte da API (onde o arquivo .csproj se encontra).
   • Execute o comando para criar ou atualizar o esquema do banco de dados:

     dotnet ef database update

5. Execute a API:

   dotnet run

   A API estará disponível em uma porta configurada (ex: https://localhost:7001).

Frontend (Angular)

1. Pré-requisitos:

   • Node.js e npm (versão LTS recomendada).
   • Angular CLI: npm install -g @angular/cli.

2. Navegue até a pasta do frontend:

   cd caminho/para/sua/pasta-frontend

3. Instale as dependências:

   npm install

4. Execute a aplicação:

   ng serve

   A aplicação estará disponível em http://localhost:4200.

---

⬆️ Back to top