Skip to main content
Sistema Venta is a full-stack point of sale system built with .NET 7.0 and Angular 14. This guide will help you set up both the backend API and frontend application.

​
Prerequisites

Before you begin, ensure you have the following installed:

.NET 7.0 SDK

Download from dotnet.microsoft.com

Node.js 16+

Download from nodejs.org

SQL Server

SQL Server 2019+ or SQL Server Express

Angular CLI

Install globally: npm install -g @angular/cli

​
Installation

1

Clone the Repository

Clone the Sistema Venta repository to your local machine:
git clone <repository-url>
cd sistema-venta
2

Set Up the Database

Create a new SQL Server database for the application. You’ll need to execute the database schema script to create the required tables:
-- Core tables
CREATE TABLE Rol (...)
CREATE TABLE Usuario (...)
CREATE TABLE Menu (...)
CREATE TABLE MenuRol (...)
CREATE TABLE Categoria (...)
CREATE TABLE Producto (...)
CREATE TABLE Venta (...)
CREATE TABLE DetalleVenta (...)
CREATE TABLE NumeroDocumento (...)
The database includes the following main entities:
  • Rol: User roles and permissions
  • Usuario: System users with authentication
  • Categoria: Product categories
  • Producto: Product catalog with stock management
  • Venta: Sales transactions
  • DetalleVenta: Line items for each sale
  • Menu: Dynamic menu based on user roles
3

Configure the Backend API

Navigate to the API project and update the connection string:
cd APISistemaVenta/SistemaVenta.API
Edit appsettings.json and set your SQL Server connection string:
appsettings.json
{
  "ConnectionStrings": {
    "cadenaSQL": "Server=localhost;Database=DBVenta;Trusted_Connection=True;TrustServerCertificate=True"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}
Make sure the database name matches the one you created in Step 2. Adjust the Server value to match your SQL Server instance.
4

Restore Backend Dependencies

Restore NuGet packages for all projects in the solution:
dotnet restore
The solution includes 7 projects:
  • SistemaVenta.API: REST API controllers and configuration
  • SistemaVenta.BLL: Business Logic Layer with services
  • SistemaVenta.DAL: Data Access Layer with repositories
  • SistemaVenta.DTO: Data Transfer Objects
  • SistemaVenta.Model: Entity Framework models
  • SistemaVenta.IOC: Dependency injection configuration
  • SistemaVenta.Utility: Shared utilities and AutoMapper profiles
5

Run the Backend API

Start the .NET API server:
dotnet run --project SistemaVenta.API
The API will start on https://localhost:7XXX (the exact port will be displayed in the console).
Swagger documentation is automatically enabled in development mode. Access it at https://localhost:7XXX/swagger
You should see output similar to:
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: https://localhost:7290
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
6

Configure the Frontend

In a new terminal, navigate to the Angular application:
cd AppSistemaVenta
Install the required npm packages:
npm install
This will install all dependencies including:
  • Angular 14.2 with Material Design
  • Chart.js for dashboard visualizations
  • Moment.js for date handling
  • SweetAlert2 for user-friendly alerts
  • XLSX for Excel export functionality
7

Update API Endpoint

Configure the frontend to connect to your backend API. Edit the environment configuration file to point to your API URL:
src/environments/environment.ts
export const environment = {
  production: false,
  apiUrl: 'https://localhost:7290/api'  // Update with your API port
};
8

Run the Frontend Application

Start the Angular development server:
npm start
The application will be available at http://localhost:4200
The Angular CLI will automatically open your default browser. The app will reload automatically when you make changes to the source code.

​
Verify the Installation

To verify that everything is working correctly:
1

Access the Application

Open your browser and navigate to http://localhost:4200
2

Test the Login

If you have seeded the database with initial data, try logging in with a test user account.
3

Check the API

Visit https://localhost:7XXX/swagger to view the API documentation and test endpoints.Key API endpoints available:
  • POST /api/Usuario/Login - User authentication
  • GET /api/Producto/Lista - Get product list
  • POST /api/Venta/Registrar - Register a new sale
  • GET /api/DashBoard - Get dashboard statistics

​
Development Workflow

Once your environment is set up, here’s a typical development workflow: 
# Navigate to API project
cd APISistemaVenta/SistemaVenta.API

# Run with hot reload
dotnet watch run

​
Common Issues

Error: SqlException: A network-related or instance-specific error occurredSolution:
  1. Verify SQL Server is running
  2. Check the connection string in appsettings.json
  3. Ensure the database exists
  4. If using Windows Authentication, add Integrated Security=true to the connection string
Error: Access to XMLHttpRequest has been blocked by CORS policySolution: The API already includes CORS configuration in Program.cs:14-21. Ensure the Angular app URL matches the allowed origins. The current configuration allows all origins in development.
Error: Module not found or Cannot find moduleSolution:
# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install
Error: Address already in useSolution:
# For .NET API (Windows)
netstat -ano | findstr :7290
taskkill /PID <PID> /F

# For Angular (use different port)
ng serve --port 4201

​
Next Steps

Architecture Overview

Learn about the layered architecture and project structure

API Reference

Explore the complete API documentation

Frontend Setup

Understand the Angular application structure

Database Schema

Review the complete database schema and relationships
Need help? Visit the GitHub repository or open an issue.

Build docs developers (and LLMs) love

Get started for freeTalk to us