Camilo Vargas

Desarrollador Frontend

Bienvenid@ a mi portafolio profesional, soy Ingeniero Multimedia, vivo en Colombia, me apasionan los desafíos y adquirir conocimientos que me permitan crecer tanto a nivel profesional como personal. Mi objetivo es aportar valor a los que me rodean.

Experiencia

Frontend Developer

CS3 Comercializadora de Software, Servicios y Suministros S.A.S · Jornada completa

nov. 2023 - feb. 2024 · 4 meses
  • Implementación de buenas prácticas basado en los principios SOLID en proyecto de Next.js donde se redujo el tiempo de implementar nuevas funcionalidades en un 30%.
  • Implementación en el proyecto de ESLint y Prettier, para mantener sincronía entre los desarrolladores que conlleva a una mejor legibilidad de código y fácil entendimiento.
  • Consumo de servicios brindados por backend mediante GraphQL y Codegen.
  • Refactorización de componentes para facilitar el uso y la escalabilidad. Utilizando Tailwind CSS, Tailwind Merge y Class Variant Authority.
TypeScript
Next.js
Tailwind CSS
Zustand
Git
GraphQL
Atlassian

Fullstack Developer

Big Safe · Profesional independiente

jul. 2023 · 1 mes
  • E - Commerce de ventas de servicios de impresión en Next 13 con sus nuevas funcionalidades.
  • Componentes reutilizable hechos con Tailwind, CVA y clsx frameworks.
  • Manejo de usuarios con Clerk framework.
  • Estado global con Redux toolkit para carrito de compra.
  • Implementación de Firebase Database y Firebase Storage.
TypeScript
Next.js
Tailwind CSS
Radix
Redux
Firebase
Git
GitHub
Clerk

Frontend Developer

CloudAPPi · Jornada completa

abr. 2022 - ene. 2023 · 10 meses
  • Crear aplicación web encargada de procesos de selección de profesionales de la tecnología.
  • Manejo de usuario utilizando la tecnología de Keycloack framework.
  • Consumo de REST API con React Query y Axios al backend de Django implementando adapters.
  • Diseños de Figma convertidos a código mediante el concepto pixel perfect.
  • Migración de proyecto de React a Next 12 para optimizar el SEO.
  • Teletrabajo mediante la metodología SCRUM.
TypeScript
React.js
Next.js
Chakra UI
Redux
Git
GitLab
Keycloak
SCRUM

Fullstack Developer

Proyecto de grado · Jornada completa

jul. 2021 - abr. 2022 · 10 meses
  • DESARROLLO DE UN APLICATIVO WEB PARA LA EVALUACIÓN DE PROPUESTAS E INFORMES FINALES DE MODALIDADES DE GRADO EN LA UNIVERSIDAD SAN BUENAVENTURA CARTAGENA.
  • Identificar los requerimientos funcionales y no funcionales con los que debe contar la aplicación Web para gestionar el proceso de evaluación, aplicando SCRUM.
  • Diseñar la aplicación, utilizando Figma y las bases de UX / UI para hacerla intuitiva y cómoda para su uso.
  • Implementar la base de datos haciendo uso de los servicios de Firebase.
  • Desarrollar el frontend con React JS
JavaScript
React.js
Redux
Firebase
Git
GitHub
SCRUM

Frontend Developer

DexFreight · Contrato de prácticas

ene. 2021 - jun. 2021 · 6 meses
  • Desarrollo de nuevas funcionalidades en una aplicación React Native.
  • Optimización de gestión de estado en React Native mediante la migración de Redux a hooks nativos de React, reduciendo el uso de estados globales innecesarios.
  • Ajustes de estilos y corrección de bugs en una aplicación web desarrollada con Angular, utilizando SASS para optimizar y estandarizar los estilos.
TypeScript
React Native
Angular
Redux
SASS
Git
Jira Software
SCRUM

Proyectos

Portafolio

Portafolio

Portafolio web personal, donde puedes encontrar información sobre mí, mis habilidades, mi experiencia laboral y mis proyectos.

TypeScript
Next.js
Astro
Tailwind CSS
Radix
Jest
Hexagonal Architecture
Clean Code
ESLint
Prettier
Husky
lint-staged
clsx
Class Validator
GitHub
E-Commerce · Copiservys

E-Commerce · Copiservys

Plataforma online de venta de impresoras, accesorios, respuestos y suministros, además ofrece servicio técnico a domicilio. Enlazado con una base de datos de productos en excel y vendido en WhatsApp.

TypeScript
Next.js
Tailwind CSS
Shadcn/ui
Redux
Hexagonal Architecture
Git
GitHub
Hackathon · Periferia

Hackathon · Periferia

Aplicación de ReactJs y NestJs, mediante solicitudes HTTP al backend se puede detectar patrones de más de cuatro letras iguales en una matriz de NxN en diferentes direcciones (oblicua, horizontal o vertical) para recibir la respuesta, Además, registra los intentos consultados y calcula su promedio, brindando una solución completa y eficiente con las mejores practicas. En El front se muestran los intentos consultados (satisfactorios y fallido) y un promedio, gracias a la lógica implementada en backend.

TypeScript
React.js
Chakra UI
Axios
Class Validator
Nest.js
MySQL
Git
GitHub
Type ORM
Comercio electrónico · Amar

Comercio electrónico · Amar

Sitio web de comercio electrónico, donde se pueden comprar productos de belleza y cuidado personal. Se implementa un carrito de compras para proceder a pagar por WhatsApp desplegado en Vercel.

TypeScript
Next.js
Chakra UI
Axios
Redux
Git
GitHub

Curso de backend con NodeJS

Proyecto backend construido en NodeJS, donde se implementa una API REST con Express, se conecta a una base de datos MongoDB con mongoose, implementando Typescript y buenas practicas

TypeScript
ESLint
Node.js
Express.js
Git
GitHub

Pruebas técnicas

QR Code Manager

La Fábrica LTD Tiempo para la prueba: 2 días
Tomar la pagina web QR Koala y crear una copia la cual tenga como objetivo desarrollar un MVP de la misma, QR Koala consta de una aplicación que genera códigos QR personalizados y rastreables, permite visualizar estadísticas de uso, tiene un panel de administración para su gestión
TypeScript
Next.js
Tailwind CSS
Shadcn/ui
Hexagonal Architecture
Clean Code
Firebase
Clerk

Lista de deseados de productos

Double V Partners Tiempo para la prueba: 2 días
La prueba consistió en desarrollar una aplicación de lista de deseos que permite a los usuarios visualizar productos consumidos de la FakeAPI y añadirlos a la lista, filtrarlos y ordenarlos por nombre, precio y fecha de adición, además de añadir o eliminar de deseados. Se solicitó utilizar React e Ionic para la interfaz de usuario, implementar alguna arquitectura como extra, aplicar buenas prácticas de código y patrones de diseño. La solución entregada es estructurada, escalable y bien documentada.
TypeScript
React.js
Ionic
Tailwind CSS
Axios
Hexagonal Architecture
Clean Code

GitHub user search app

Double V Partners Tiempo para la prueba: 2 días
Desarrolla una aplicación web utilizando React que consuma la API pública de GitHub para obtener una lista de usuarios y mostrar información de sus perfiles, permitiéndote proponer, idear y plasmar tu filosofía de trabajo. Usa un framework CSS de tu elección para asegurar compatibilidad entre navegadores, e integra una librería de iconos (se sugiere Font Awesome o Glyphicons) donde consideres necesario.
TypeScript
React.js
Tailwind CSS
Shadcn/ui
Axios
Hexagonal Architecture
Clean Code
ESLint
Prettier
Husky
lint-staged

To-Do-List Mobile

Colurs, dinero sin fronteras Tiempo para la prueba: 2 días
Desarrollar una aplicación de "to-do list" inspirado en el diseño "Dona mobile composer interactions" de @JakubAntalik , usando React Native, donde el usuario pueda agregar, marcar como realizado o eliminar elementos de la lista, almacenando los datos localmente en el dispositivo y utilizando React Hooks para la gestión de estado. La app debe incluir animaciones simples al agregar, marcar o eliminar elementos, y se permite el uso de librerías de animación como react-native-reanimated. La apariencia debe ser minimalista, con un campo de entrada para nuevas tareas y una lista de ítems.
TypeScript
React Native
CSS
Git
GitHub

Autenticación y CRUD

Soluciones Americanas S.A.S Tiempo para la prueba: 2 días
Crear un formulario de inicio de sesión, una tabla para listar usuarios y un formulario para crear nuevos usuarios. Para el inicio de sesión, utiliza el API Reqres y almacena el token generado, que se debe enviar en cada solicitud subsiguiente al API en un encabezado llamado 'Authorization'. Organiza tu código siguiendo las pautas de estructura adecuadas para React. Además, considera realizar pruebas de unidad y, opcionalmente, pruebas funcionales e2e si es relevante para tu proyecto.
TypeScript
React.js
Tailwind CSS
Radix
Axios
Cypress
Tailwind-merge
clsx
React Hook Form
Zod
Git
GitHub
React Router Dom

lista To-Do 2

CS3 - Comercializadora de software, servicios y suministros Tiempo para la prueba: 3 días
La aplicación es una herramienta de gestión de tareas que ayuda a los usuarios a organizar sus actividades diarias de manera eficiente. Permite a traves del consumo de la API Reqres , agregar, editar y eliminar actividades de una lista. Los usuarios pueden marcar las actividades como realizadas y filtrarlas según su estado (pendientes o completadas) o descripción. El diseño es responsive y ofrece una experiencia de usuario agradable para mantenerse organizado y productivo.
TypeScript
React.js
Tailwind CSS
Radix
Axios
React Query
Redux
Jest
Tailwind-merge
clsx
React Hook Form
Zod
Git
GitHub

Componente de pasos a paso

ProMarketing Tiempo para la prueba: 3 días
Prueba técnica que consta en realizar un componente de pasos a paso utilizando NextJs, Typescript y TailwindCSS que reciba por hijos un numero indefinido de pasos, dicho componente debe ser totalmente customizable. Basado en Stepper componente de Material Tailwind
TypeScript
Next.js
Tailwind CSS
Tailwind-merge
clsx
Git
GitHub

Maquetación pagina de producto

Maquila Internacional de Confección (MIC) Tiempo para la prueba: 5 días
Replicar la pagina Moviesshop , donde se debe tener en cuenta Menú principal desplegable, Galería de fotos de producto con slider, Funcionalidad / Adicionar producto al carrito y ser responsive para dispositivos. Requisitos HTML5, CSS3, React Js, Javascript sin plugins y modular, Interacción con JSON para la galería de imágenes, no use componentes de interfaz, responsivo, git y entregar en Github o Bitbucket
TypeScript
React.js
Styled Components
Chakra UI
Redux
Git
GitHub

Capturar información personal

One Consultants SAS Tiempo para la prueba: 2 días
Crear en ReactJs cuatro componentes, DataPersonal: Contiene un formulario que captura los datos personales y los guarda en un estado global de Redux. DataAcademic: Captura los datos académicos y los guarda en Redux. Summary: Contiene el resumen de los datos capturados en los componentes anteriores extrayendo del estado global la info, para su posterior envío a base de datos. TableRegister: Contiene el listado de todos los registros en la base de datos.
TypeScript
React.js
Chakra UI
Axios
Redux
Git
GitHub

Listado de criptomonedas

Cobrando BPO Tiempo para la prueba: 4 horas
Mediante el uso de la API Coinlore , listar en una tabla las criptomonedas con el precio en USD solo para usuarios que se registren y accedan con su usuario. Puntos a evaluar Arquitectura, Estructura, Documentación, Buenas prácticas de software, Rendimiento, Pruebas unitarias (opcional)
TypeScript
React.js
Material UI
Chakra UI
Axios
React Query
Redux
SASS
Git
GitHub

Subasta de propiedades

Jeduca Tiempo para la prueba: 4 horas
Crear una aplicación para subastar propiedades, debe contar con: Registro e inicio de sesión, restricción de acceso a las diferentes páginas solo a usuarios, subastar propiedades y pujar por propiedades, una página interna donde se listen las propiedades disponibles (por subastar), una página interna donde se listen las propiedades que el usuario actual está subastando, una página interna donde se listen las propiedades obtenidas (Por medio de pujas), Una página interna con un formulario para subastar propiedades, validaciones, el dueño de una propiedad no podrá pujar por su propiedad, quien realiza la subasta de una propiedad podrá finalizar la subasta cuando desee y automáticamente el último pujador tendrá la propiedad en el inventario. Opcional: El último pujador de una propiedad no puede pujar de nuevo hasta que otro usuario puje por la propiedad, Debe de existir un botón para cerrar sesión y llevarlo a la página de Inicio de Sesión, Los usuarios no excedan el dinero actual que tienen, Diseño de la página web (Css).
TypeScript
React.js
Chakra UI
Redux
React Hook Form
Git
GitHub

Listado de post

Empleamos Temporales Tiempo para la prueba: 3 días
Realizar una web para el consumo de la API JSONPlaceholder , tener en cuenta la documentación y buenas practicas de desarrollo. Se debe mostrar en el inicio los Post con sus respectivos comentarios paginados en una tabla, cada post debe tener el botón de eliminar, se debe crear los formularios respectivos para publicar y actualizar un Post y mostrar una ventana (modal) de notificación para cualquiera de las operaciones realizadas.
TypeScript
React.js
Styled Components
Material UI
Axios
Redux
React Hook Form
Git
GitHub

Red social

Tita Media Tiempo para la prueba: 1 día
Realizar en React una web que incluya un inicio de sesión utilizando autenticado externo y datos de la DummyAPI , en el inicio de la pagina listar los Post y cada uno debe contener foto y nombre del usuario que hizo el post, imagen y texto del post, tags del post, cantidad de likes y comentarios, se debe mostrar un modal con todos los comentarios, Se debe mostrar un modal con toda la información del usuario que hizo el post, Se deben poder filtrar los posts por tag, La información del usuario autenticado debe ser mostrada la parte superior.
TypeScript
React.js
Styled Components
Axios
Redux
React Hook Form
Git
GitHub
Auth0

Formulario de registro

Intuition Business Tiempo para la prueba: 2 días
Prueba de desarrollo con React y Express en donde se realiza un formulario de registro con los campos y el diseño que está en el Test Weplot PDF . La idea es guardar todos estos campos al igual que una imagen y generar una opción para que el usuario pueda entrar con el usuario y contraseña que asignó y pueda ver los registró que colocó en el formulario. Además debe existir un rol de administrador donde pueda ver los datos registrados, las preguntas y las imágenes subidas. Además debe tener la posibilidad de cambiar las preguntas como: Comida Favorita, Artista favorito, Lugar favorito y Color favorito sin afectar los datos ya registrados en la base de datos.
JavaScript
React.js
SASS
React Hook Form
Node.js
Express.js
MongoDB
Git
GitHub

lista To-Do 1

LA Electronic Tiempo para la prueba: 1 día
Realizar en React una lista To-Do, la cual es una serie de ítems, organizados, que corresponden a las tareas pendientes del usuario. debe contener las siguientes características: Permitir al usuario ver una lista con las actividades pendientes, permitir al usuario agregar una nueva actividad a la lista, permitir al usuario marcar una actividad como realizada, permitir al usuario eliminar una actividad de la lista, permitir editar la descripción de una actividad, permitir filtrar lista de actividades por texto de descripción, permitir al usuario llenar la lista de actividades con frases aleatorias de Cat Facts indicando cuantas quiere agregar.
JavaScript
React.js
Ant Design
SASS
Git
GitHub

Educación

Ingeniería Multimedia

Universidad de San Buenaventura | Cartagena - Colombia 2015 - 2021 · 6 años

Durante mi formación, adquirí un sólido conocimiento en áreas clave como diseño gráfico, desarrollo web, animación, producción audiovisual y programación. Mi enfoque académico estuvo orientado al desarrollo web y diseño de soluciones combinando diferentes medios y tecnologías, con el fin de ofrecer experiencias digitales atractivas y de alto impacto.

Cursos

Curso de backend con NestJS

Platzi

Curso de Inglés Básico A1: Conversaciones Cortas y Habituales

Platzi

Curso de NestJS: Programación Modular, Documentación con Swagger y Deploy

Platzi

Curso de NextJS con GraphQL y Apollo

Platzi

Desarrollo Web Completo con HTML5, CSS3, JS AJAX PHP y MySQL

Udemy

Web Personal MERN Full Stack: MongoDB, Express, React y Node

Udemy

Habilidades

Languages

JavaScript

TypeScript

HTML

CSS

Frontend

Next.js

React.js

Astro

Ionic

Angular

Tailwind CSS

SASS

Styled Components

Material UI

Chakra UI

Radix

Ant Design

Backend

Node.js

Express.js

Nest.js

ORM

tRPC

Drizzle ORM

Prisma

Database & Cache

Firebase

MongoDB

MySQL

React Query

Redux

Axios

GraphQL

Version Control

Git

GitHub

GitLab

Testing

Vitest

Jest

React Testing Library

Cypress

Others

Clerk

Zod

React Hook Form

ESLint

Auth0

Prettier

Postman

Visual Studio Code

Jira Software

Atlassian

Slack

Figma

¿Buscando una nueva incorporación a tu equipo?

Actualmente estoy disponible para unirme a un equipo o empresa.
Si quieres saber más sobre mí o mi trabajo, o simplemente quieres saludar, contácteme por cualquiera de las siguientes opciones.

Curriculum