Camilo Vargas

Frontend Developer

Welcome to my professional portfolio, I am Multimedia Engineer, I live in Colombia, I'm passionate about challenges and acquire knowledge that allows me to grow both professionally and personally. My goal is to add value to those around me.

Experience

Frontend Developer

CS3 Comercializadora de Software, Servicios y Suministros S.A.S · Full time

nov. 2023 - feb. 2024 · 4 months

Implementation of best practices based on SOLID principles in a Next.js project, resulting in a 30% reduction in the time needed to implement new features.
Implementation of ESLint and Prettier in the project to maintain synchronization among developers, leading to better code readability and easier understanding.
Consumption of services provided by the backend using GraphQL and Codegen.
Refactoring of components to facilitate usability and scalability using Tailwind CSS, Tailwind Merge, and Class Variant Authority.

Fullstack Developer

Big Safe · Freelance

jul. 2023 · 1 month

E - Commerce of sales of printing services in Next 13 with its new functionalities.
Reusable components made with Tailwind, CVA and clsx frameworks.
User management with Clerk framework.
Global state with Redux toolkit for shopping cart.
Implementation of Firebase Database and Firebase Storage.

Frontend Developer

CloudAPPi · Full time

apr. 2022 - jan. 2023 · 10 months

Create web application in charge of selection processes of technology professionals.
User management using the Keycloack framework.
Consumption of REST API with React Query and Axios to the Django backend implementing adapters.
Figma designs converted to code using the pixel perfect concept.
Migration of React project to Next 12 to optimize SEO.
Teleworking using the SCRUM methodology.

Fullstack Developer

Degree project · Full time

jul. 2021 - apr. 2022 · 10 months

DEVELOPMENT OF A WEB APPLICATION FOR THE EVALUATION OF PROPOSALS AND FINAL REPORTS OF DEGREE MODALITIES AT THE SAN BUENAVENTURA CARTAGENA UNIVERSITY.
Identify the functional and non-functional requirements that the Web application must have to manage the evaluation process, applying SCRUM.
Design the application, using Figma and the UX / UI bases to make it intuitive and comfortable for use.
Implement the database using Firebase services.
Develop the frontend with React JS

Frontend Developer

DexFreight · Internship contract

jan. 2021 - jun. 2021 · 6 months

Developed new features in a React Native application.
Optimized state management in React Native by migrating from Redux to native React hooks, reducing unnecessary global states.
Style adjustments and bug fixes in a web application built with Angular, utilizing SASS to enhance and standardize styles.

Projects

Portfolio

Personal web portfolio, where you can find information about me, my skills, my work experience and my projects.

E-Commerce · Copiservys

Online sales platform for printers, accessories, repairs and supplies, also offers technical service at home. Linked to an excel database of products and sold on WhatsApp.

Hackathon frontend · Periferia

A ReactJs and NestJs application that, through HTTP requests to the backend, can detect patterns of more than four identical letters in an NxN matrix in different directions (diagonal, horizontal, or vertical) to receive the response. Additionally, it logs the queried attempts and calculates their average, providing a complete and efficient solution following best practices. On the front end, queried attempts (successful and unsuccessful) and an average are displayed, thanks to the logic implemented in the backend.

E-Commerce · Amar

E-commerce website, where beauty and personal care products can be purchased. A shopping cart is implemented to proceed with payment through WhatsApp, deployed on Vercel.

Backend course with NodeJS

Backend project built in NodeJS, where a REST API is implemented with Express, connected to a MongoDB database using mongoose, implementing Typescript and best practices.

Technical tests

QR Code Manager

La Fábrica LTD Time for the test: 2 days

Take the web page QR Koala and create a copy that aims to develop an MVP of the same, QR Koala consists of an application that generates personalized and trackable QR codes, allows viewing usage statistics, has an administration panel for its management

Wishlistify App

Double V Partners Time for the test: 2 days

The test consisted in developing a wishlist app that allows users to view products consumed from the FakeAPI and add them to the list, filter them and sort them by name, price and date of addition, as well as add or remove from wishlist. The solution was requested to use React and Ionic for the user interface, implement some architecture such as extra, apply good code practices and design patterns. The delivered solution is structured, scalable and well documented.

GitHub user search app

Double V Partners Time for the test: 2 days

Develop a web application using React that consumes the public GitHub API to retrieve a list of users and display information from their profiles, allowing you to propose, ideate, and showcase your work philosophy. Use a CSS framework of your choice to ensure cross-browser compatibility, and integrate an icon library (suggested: Font Awesome or Glyphicons) wherever necessary.

To-Do-List Mobile

Colurs, dinero sin fronteras Time for the test: 2 days

Develop a 'to-do list' application using React Native, where the user can add, mark as completed, or delete items from the list, storing data locally on the device and using React Hooks for state management. The app should include simple animations when adding, marking, or deleting items, and animation libraries like react-native-reanimated are allowed. The design should be minimalist, with an input field for new tasks and a list of items, inspired by the 'Dona mobile composer interactions' design by Jakub Antalik @JakubAntalik .

Authentication and CRUD

Soluciones Americanas S.A.S Time for the test: 2 days

Create a login form, a table to list users, and a form to create new users. For login, use the Reqres API and store the generated token, which must be sent in each subsequent request to the API in a header called 'Authorization'. Organize your code following the proper structure guidelines for React. Additionally, consider performing unit testing and optionally e2e functional testing if relevant to your project.

To-Do list 2

CS3 - Comercializadora de software, servicios y suministros Time for the test: 3 days

The application is a task management tool that helps users organize their daily activities efficiently. It allows you to view by consuming the API Reqres , add, edit, and delete tasks from a list. Users can mark tasks as completed and filter them based on their status (pending or completed) or description. The design is responsive and offers a pleasant user experience to stay organized and productive.

Stepper component

ProMarketing Time for the test: 3 days

Technical test which involves creating a Stepper component using NextJs, Typescript, and TailwindCSS. This component should receive an indefinite number of steps as children and must be fully customizable.

Mockup product page

Maquila Internacional de Confección (MIC) Time for the test: 5 days

Replicate the page Moviesshop , taking into account the dropdown main menu, product photo gallery with a slider, functionality to add products to the cart, and responsiveness for devices. Requirements include HTML5, CSS3, React Js, plain JavaScript without plugins, modularity, interaction with JSON for the image gallery, avoidance of UI frameworks, responsiveness, version control with Git, and delivery on Github or Bitbucket.

Capture personal data

One Consultants SAS Time for the test: 2 days

Create four components in ReactJs, DataPersonal: Contains a form that captures personal data and stores it in a global Redux state. DataAcademic: Captures academic data and stores it in Redux. Summary: Contains a summary of the data captured in the previous components by extracting the info from the global state for later database submission. TableRegister: Contains a list of all records in the database.

List of cryptocurrencies

Cobrando BPO Time for the test: 4 hours

Using the Coinlore API, list cryptocurrencies in a table with their prices in USD, exclusively for registered users who log in with their credentials. Points to evaluate include Architecture, Structure, Documentation, Software Best Practices, Performance, and optionally, Unit Testing

Auctioning properties

Jeduca Time for the test: 4 hours

Create an application for auctioning properties that must include: Registration and login functionality, access restriction to different pages only for registered users, ability to auction properties and place bids on them. The app should have an internal page listing available properties (for auction), another internal page showing properties the current user is auctioning, and yet another internal page listing properties obtained through bids. There should be a separate internal page with a form for listing properties for auction, along with validations. Property owners cannot bid on their own properties. The auction initiator can conclude the auction at will, and the last bidder will automatically obtain the property. Optional features include preventing the last bidder from bidding again until another user places a bid, a logout button redirecting to the login page, ensuring users do not exceed their available funds, and designing the webpage (CSS).

List of posts

Empleamos Temporales Time for the test: 3 days

Develop a website for consuming the REST API at JSONPlaceholder , considering the documentation and best development practices. The homepage should display Posts with their corresponding comments in a paginated table. Each post should have a delete button. You should create the necessary forms for publishing and updating a Post. Additionally, implement a notification window (modal) for any of the operations performed.

Social network

Tita Media Time for the test: 1 day

Create a React web application that features an external authentication and utilizes data from the DummyAPI . On the homepage, list Posts, each of which should display the user's photo and name who created the post, the post's image and text, post tags, number of likes and comments. Clicking on a post should open a modal displaying all comments related to that post. Another modal should show detailed information about the user who created the post. Users should be able to filter posts by tags. The authenticated user's information should be displayed at the header page.

Form register

Intuition Business Time for the test: 2 days

Development test using React and Express where a registration form is created with the fields and design shown in the PDF at Test Weplot PDF . The goal is to store all these fields, along with an image, and provide an option for users to log in with the username and password they assigned. They should be able to view the information they entered in the form. Additionally, an admin role should exist to view registered data, questions, and uploaded images. The admin should have the ability to change questions such as: Favorite Food, Favorite Artist, Favorite Place, and Favorite Color, without affecting the data already stored in the database.

To-Do list 1

LA Electronic Time for the test: 1 day

Create a To-Do list in React, which is a series of organized items corresponding to the user's pending tasks. It should include the following features: Allow users to view a list of pending activities, let users add a new activity to the list, allow users to mark an activity as done, let users delete an activity from the list, allow users to edit the description of an activity, enable filtering the activity list by description text, and allow users to populate the activity list with random cat phrases from Cat Facts , indicating how many they want to add.

Education

Multimedia Engineering

San Buenaventura University | Cartagena - Colombia 2015 - 2021 · 6 years

During my training, I gained solid knowledge in key areas such as graphic design, web development, animation, audiovisual production, and programming. My academic focus was oriented to web development and design of solutions combining different media and technologies, in order to offer attractive and high-impact digital experiences.

Courses

Backend course with NestJS

Platzi

Basic English Course A1: Short and Habitual Conversations

Platzi

NestJS Course: Modular Programming, Documentation with Swagger and Deploy

Platzi

NextJS with GraphQL and Apollo course

Platzi

Complete Web Development with HTML5, CSS3, JS AJAX PHP and MySQL

Udemy

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

Udemy

Skills

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

Looking for a new addition to your team?

I am currently available to join a team or company.
If you want to know more about me or my work, or just want to say hello, contact me by any of the following options.

Resume