Autos App

• Aplicación full-stack para gestión de autos por usuario, con autenticación JWT.
• Los usuarios pueden registrarse, iniciar sesión y administrar su lista de autos.

---

Tabla de Contenido

• Características
• Tecnologías Utilizadas
• Requisitos Previos
• Instalación Backend
• Instalación Frontend
• Base de Datos
• Ejecución del Proyecto
• Pruebas con Postman
• Estructura del Proyecto
• Autor

---

Características

• Registro e inicio de sesión de usuarios (JWT)
• CRUD de autos (marca, modelo, año, placa, color)
• Validaciones frontend y backend
• Búsqueda y filtrado de autos por placa y marca
• Protección de rutas con token
• Diseño responsive con Material UI
• Pruebas con Postman

---

Tecnologías Utilizadas

Backend (Spring Boot)

• Java 17+
• Spring Boot 3+
• Spring Security + JWT
• JPA + Hibernate
• SQL Server

Frontend (React)

• React 18.2.0
• Vite 7.0.5
• TypeScript ~5.8.3
• React Hook Form + Zod
• React Router DOM 7.7.0
• Material UI 5.15.18

---

Requisitos Previos

• Node.js 18+
• Java 17+
• Maven
• SQL Server
• Postman

---

Instalación Backend

1. Configura la conexión a la base de datos en application.properties
2. Ejecuta el proyecto con el IDE (IntelliJ).

---

Instalación Frontend

cd Autos-Fronted

1. Instala las dependencias:

npm install

2. Ejecuta el proyecto:

npm run dev

Accede en: http://localhost:5173

---

Base de Datos

1. En SQL Server Management Studio, crea la base de datos con:

-- Crear la base de datos
CREATE DATABASE autos;
GO

-- Usar la base de datos recien creada
USE autos;
GO

-- Crear tabla de usuarios
CREATE TABLE users (
    id BIGINT IDENTITY(1,1) PRIMARY KEY,
    nombre_usuario VARCHAR(150) NOT NULL UNIQUE,
    contrasena VARCHAR(255) NOT NULL
);
GO

-- Crear tabla de autos
CREATE TABLE cars (
    id BIGINT IDENTITY(1,1) PRIMARY KEY,
    marca VARCHAR(100) NOT NULL,
    modelo VARCHAR(100) NOT NULL,
    anio INT NOT NULL,
    placa VARCHAR(20) NOT NULL UNIQUE,
    color VARCHAR(50) NOT NULL,
    user_id BIGINT NOT NULL,
    CONSTRAINT fk_user_car FOREIGN KEY (user_id)
        REFERENCES users(id)
        ON DELETE CASCADE
);
GO

-- Insertar usuario demo
INSERT INTO users (nombre_usuario, contrasena)
VALUES ('demo', '$2a$10$14fbSZrWUooIhJXZqyFPxeJq5Btvf2xStGtjvzUawn5JQ1gzr31V.');
GO

-- Insertar autos asociados al usuario demo
INSERT INTO cars (marca, modelo, anio, placa, color, user_id)
VALUES 
('Toyota', 'Corolla', 2020, 'ABC123', 'Rojo', 1),
('Chevrolet', 'Spark', 2018, 'DEF456', 'Blanco', 1),
('Mazda', '3', 2022, 'XYZ789', 'Gris', 1);
GO

2. El usuario y contraseña que estan precargados son:

• Usuario : demo
• clave : demo123

---

Ejecución del Proyecto

• Asegúrate de que SQL Server esté corriendo.
• Inicia el backend (Spring Boot).
• Luego inicia el frontend (npm run dev).
• Accede a la app en el navegador: http://localhost:5173

---

Pruebas con Postman

• Importa los siguientes archivos a Postman:
  • Autos.postman_environment.json
  • AutosAPI.postman_collection.json

a. Importar el entorno

• Ve a File.
• Haz clic en "Import".
• Selecciona el archivo: Autos.postman_environment.json
• Este entorno define variables como {{baseUrl}} y el {{token}} para que las peticiones funcionen automáticamente.

b. Importar la colección

• Ve a File.
• Haz clic en "Import".
• Selecciona el archivo: AutosAPI.postman_collection.json
• Esta colección contiene todas las rutas de la API organizadas.

Incluyen login, registro, operaciones CRUD con JWT.

---

Estructura del Proyecto

AutosApp/
├── Autos-backend/
├── Autos-Fronted/
├── Autos.postman_environment.json
├── AutosAPI.postman_collection.json
└── CrearBD.sql

---

¡Todo listo!

Autor

Jeison Jossa – 2025

---