Let's create something awesome

i'm a full stack developer and multimedia engineer from colombia. Im looking for new challenges and opportunities to learn and create awesome projects that improve people's experiences and lives. I have knowledge and experience in complex projets using React and node js.

large_Logo (1).png

medium_Logo (1).png

small_Logo (1).png

thumbnail_Logo (1).png

Logo (1).png

Full Stack

Frontend development of a guitar ecommerce, using static site generation technology, to obtain the best performance, including blog, products, home, courses and about section, also with shopping cart function. All of this data is called from a headless CMS, where the admin can edit the content, without losing the benefits of the JAM Stack.

large_imagen_2022-05-09_120815331.png

medium_imagen_2022-05-09_120815331.png

small_imagen_2022-05-09_120815331.png

thumbnail_imagen_2022-05-09_120815331.png

imagen_2022-05-09_120815331.png

The Guitar LA store is a practice project to implement JAMStack using Next js and Strapi. The website contains the basic sections for an ecommerce, using a standard design.


Also the JAMStack approach let's manage any kind of data the admin wants to show, and with the help of webhooks, it can regenerate the static optimized site when any change is made in the headless CMS. 

large_imagen_2022-05-14_205351366.png

medium_imagen_2022-05-14_205351366.png

small_imagen_2022-05-14_205351366.png

thumbnail_imagen_2022-05-14_205351366.png

imagen_2022-05-14_205351366.png

Dynamic store

The store section lets the clients see every product, open a page dedicated to each of them, and add it to the shopping cart. Also, the URL of each section, product, or blog is SEO friendly, so the search engines will be able to browse our site correctly.

About the shopping cart, the site will save info about the current cart in local storage. This will let the client leave or refresh the website, and keep its data, so they dont need to add the products again. The page, will just store the Id's of each product with its quantity.

thumbnail_imagen_2022-05-15_132658949.png

imagen_2022-05-15_132658949.png

small_imagen_2022-05-15_132726419.png

thumbnail_imagen_2022-05-15_132726419.png

imagen_2022-05-15_132726419.png

small_imagen_2022-05-15_132758808.png

thumbnail_imagen_2022-05-15_132758808.png

imagen_2022-05-15_132758808.png

shopping cart

With the help of the headless CMS Strapi, all the data of the website can be edited, with a friendly interface for the client, even allowing the generation of relationships between the different data tables.

medium_imagen_2022-05-15_130947775.png

small_imagen_2022-05-15_130947775.png

thumbnail_imagen_2022-05-15_130947775.png

imagen_2022-05-15_130947775.png

large_Sin título-1_Mesa de trabajo 1.png

medium_Sin título-1_Mesa de trabajo 1.png

small_Sin título-1_Mesa de trabajo 1.png

thumbnail_Sin título-1_Mesa de trabajo 1.png

Sin título-1_Mesa de trabajo 1.png

Control the content

Strapi

HTML

Next.js

JavaScript

React js

Sass

Rest API

Guitar LA EN

Web platform that allows managing customers, invoices and other related data, in addition to allowing customers to access benefits and meet them using a single profile

large_imagen_2022-05-20_092711246.png

medium_imagen_2022-05-20_092711246.png

small_imagen_2022-05-20_092711246.png

thumbnail_imagen_2022-05-20_092711246.png

imagen_2022-05-20_092711246.png

This platform allows the company and customers to access levels of loyalty according to the products and services they consume. Additionally, the company can manage invoices, maintenance, customers, referred customers and data of interest to customers. The platform automatically calculates the levels to which each client belongs, the benefits and experiences to which they have access. In addition, it informs via email of changes in the account such as the creation, expiration of invoices, reaching new levels or future scheduled maintenance.

large_imagen_2022-05-20_093116592.png

medium_imagen_2022-05-20_093116592.png

small_imagen_2022-05-20_093116592.png

thumbnail_imagen_2022-05-20_093116592.png

imagen_2022-05-20_093116592.png

Platform overview

The coldomotica worker can manage invoices, referrals, levels, clients, frequently asked questions and maintenance from one place.

Manage customers and data

You can access customer information, your benefits, invoices or vouchers.

small_imagen_2022-05-20_094200741.png

thumbnail_imagen_2022-05-20_094200741.png

imagen_2022-05-20_094200741.png

medium_imagen_2022-05-20_094225657.png

small_imagen_2022-05-20_094225657.png

thumbnail_imagen_2022-05-20_094225657.png

imagen_2022-05-20_094225657.png

Customers

You can manage the status of each customer's invoices, their payment status or even the payment date.

medium_imagen_2022-05-20_094404916.png

small_imagen_2022-05-20_094404916.png

thumbnail_imagen_2022-05-20_094404916.png

imagen_2022-05-20_094404916.png

medium_imagen_2022-05-20_094419244.png

small_imagen_2022-05-20_094419244.png

thumbnail_imagen_2022-05-20_094419244.png

imagen_2022-05-20_094419244.png

medium_imagen_2022-05-20_094439745.png

small_imagen_2022-05-20_094439745.png

thumbnail_imagen_2022-05-20_094439745.png

imagen_2022-05-20_094439745.png

Billing

Via email, customers and the company will receive emails with information regarding new levels, new invoices or upcoming due dates.

medium_imagen_2022-05-20_094629338.png

small_imagen_2022-05-20_094629338.png

thumbnail_imagen_2022-05-20_094629338.png

imagen_2022-05-20_094629338.png

medium_imagen_2022-05-20_094643992.png

small_imagen_2022-05-20_094643992.png

thumbnail_imagen_2022-05-20_094643992.png

imagen_2022-05-20_094643992.png

Email notification

The client will be able to see all their information, levels, benefits, invoices and maintenance acquired with the company.

large_imagen_2022-05-20_095258879.png

medium_imagen_2022-05-20_095258879.png

small_imagen_2022-05-20_095258879.png

thumbnail_imagen_2022-05-20_095258879.png

imagen_2022-05-20_095258879.png

Client profile

The snows of each client are calculated automatically, when creating paid invoices, indicating their benefits and informing them by email.

Customer level auto update

The data stored in a MySQL database and with the support of the headless CMS strapi, can be acquired via the rest API, always with required authentication and Cors, to prevent security leaks in the platform.

You can try it yourself, using the user admin, and the password admin123. None of the data shown is real data, they are only for sample purposes

large_imagen_2022-05-20_100119589.png

medium_imagen_2022-05-20_100119589.png

small_imagen_2022-05-20_100119589.png

thumbnail_imagen_2022-05-20_100119589.png

imagen_2022-05-20_100119589.png

Data management

Tailwind

MySQL

Redux

Coldomotica Loyality

A real state website developed that shows the advantages of SSG allowing great speed navigation. Managin all its data in headless CMS Strapi.

large_imagen_2022-05-01_120730751.png

medium_imagen_2022-05-01_120730751.png

small_imagen_2022-05-01_120730751.png

thumbnail_imagen_2022-05-01_120730751.png

imagen_2022-05-01_120730751.png

The site has a page for each property, with SEO-friendly URL, high-speed dynamic content, brought from Strapi

Also, you can filter the properties by their category. These categories can be managed by the client directly from strapi, and relate them to any property.

medium_imagen_2022-05-19_195822108.png

small_imagen_2022-05-19_195822108.png

thumbnail_imagen_2022-05-19_195822108.png

imagen_2022-05-19_195822108.png

medium_imagen_2022-05-19_195834860.png

small_imagen_2022-05-19_195834860.png

thumbnail_imagen_2022-05-19_195834860.png

imagen_2022-05-19_195834860.png

Properties

Thanks to the development environment provided by the Gatsby framework, optimized images are generated to guarantee high performance on the website. Additionally, it allows you to edit each image independently at the time of generating the static website, changing their color adjustment, cropping them or even applying complex filters.

large_imagen_2022-05-19_201123114.png

medium_imagen_2022-05-19_201123114.png

small_imagen_2022-05-19_201123114.png

thumbnail_imagen_2022-05-19_201123114.png

imagen_2022-05-19_201123114.png

Automated Image Optimization

Graphql

Gatsby

Styled components

Gatsby Real estate

This platform was custom developed for the coldomotica company to improve the experience and interactivity of the company's customers and workers. The platform is divided into three sections, presentations, which allow the company to make itself known on the platform, showing its clients, experience, services and benefits it offers. Quotes, which allows you to create customizable quotes for each client, in addition to generating them in PDF format, and allowing clients to access them through a single access link. Finally, the base data section allows the company to manage the products, prices, salaries, product and service combos, in addition to the default data that is shown in each quote.

large_imagen_2022-05-20_100742573.png

medium_imagen_2022-05-20_100742573.png

small_imagen_2022-05-20_100742573.png

thumbnail_imagen_2022-05-20_100742573.png

imagen_2022-05-20_100742573.png

The platform allows the company to display its services, customers and benefits in a more pleasant way through the web, as well as allowing you to edit this data directly from the platform. All this data is managed using a rest API and stored in a MySQL database.

large_imagen_2022-05-20_101507605.png

medium_imagen_2022-05-20_101507605.png

small_imagen_2022-05-20_101507605.png

thumbnail_imagen_2022-05-20_101507605.png

imagen_2022-05-20_101507605.png

large_imagen_2022-05-20_101522640.png

medium_imagen_2022-05-20_101522640.png

small_imagen_2022-05-20_101522640.png

thumbnail_imagen_2022-05-20_101522640.png

imagen_2022-05-20_101522640.png

large_imagen_2022-05-20_101535647.png

medium_imagen_2022-05-20_101535647.png

small_imagen_2022-05-20_101535647.png

thumbnail_imagen_2022-05-20_101535647.png

imagen_2022-05-20_101535647.png

Company introduction

The platform has a guide section, which gives the user information regarding the functions and steps to use the platform.

Walkthrough

When creating a quote, the platform uses the base data to fill out the quote, but allowing it to be customized, from each text to each product description.

large_imagen_2022-05-20_102527715.png

medium_imagen_2022-05-20_102527715.png

small_imagen_2022-05-20_102527715.png

thumbnail_imagen_2022-05-20_102527715.png

imagen_2022-05-20_102527715.png

Default data in quote creation

The platform calculates the values of each product, editing its base value, profit or required hours. All calculated instantly.

Quote values customization 

The client can view their quote easily from desktop or mobile devices.

large_imagen_2022-05-20_103303515.png

medium_imagen_2022-05-20_103303515.png

small_imagen_2022-05-20_103303515.png

thumbnail_imagen_2022-05-20_103303515.png

imagen_2022-05-20_103303515.png

Quote visualization

The client can interact with the quote to obtain more information on each product or service line, or if he prefers to download it in PDF format

Interactive quote

The coldomotica worker can manage the quotes or generate a unique access link for each client, where they will also store the data of the clients who entered the quote.

medium_imagen_2022-05-20_104234599.png

small_imagen_2022-05-20_104234599.png

thumbnail_imagen_2022-05-20_104234599.png

imagen_2022-05-20_104234599.png

medium_imagen_2022-05-20_104259452.png

small_imagen_2022-05-20_104259452.png

thumbnail_imagen_2022-05-20_104259452.png

imagen_2022-05-20_104259452.png

Quotes management

Coldomotica quotes

HI, I'm Diego Garnica, full-stack developer.

About me

Work