Justin Salcedo Web Developer

Projects

• 

  Job Gatherer App 📱

  A minimal keyword tracker and resume editor

  • Web App
  • Next.js
  • TypeScript
  • Web App
  • Next.js
  • TypeScript

  ❌

  • The Job Gatherer app is a minimal resume editing tool and job application manager to tailor curriculum submissions efficiently. JG stores job openings, employers' contact information, and application status. The editor features keyword-capturing from job descriptions and term-matching for resumes, which are saved and processed using the resume.JSON open standard. JG offers resume tailoring analysis, formatting, and proofreading, besides document template support.

  • I developed the Job Gatherer using Next.js, a ReactJS framework for server-side rendering. Every UI element is a reusable styled component sharing concise styling guidelines. The service logic uses string pattern processing to generate resumes according to schemes and validate user input. The web app saves job applications and CVs through a RESTful API powered by a MERN server. The stack is written in TypeScript and compiled using Webpack + Babel technologies.

  • Before the Job Gatherer, no free tool offered keyword capture features or proper document formats readable to Applicant Tracking Software (ATS). Its optimal UI & UX design makes JG highly accessible and intuitive while producing more accurate resumes in less time. I used the Job Gatherer app to submit 40+ real job applications, from which one got my current employment (as written in January 2023).

  Check it out: https://github.com/JustinSalcedo/jg-ui

• 

  Tiny-Timezones App 📱

  Handle time notion with teams around the world

  • Web App
  • ReactJS
  • PostgreSQL
  • Web App
  • ReactJS
  • PostgreSQL

  ❌

  • TTZ is a single-page web application to handle time notions around the world. As a user or a guest, everyone can create synchronized clocks with timezones from anywhere worldwide (yes, like a train station lobby). On one side panel, users can add contacts along with timezone-adjusted watches; on the other one, they have an event list that triggers an alarm besides displaying the offset time and a list of members. Each clock supports timezone changes everywhere, including summer and winter time.

  • Tiny-Timezones components work with ReactJS, with loads in the DOM in its minified version followed by Moment.js (for timezones data and functions), qs.js, and UUID. For the server, I used PostgreSQL and Sequelize ORM (Object-Relational Mapping) as database and dependency, respectively. TTZ loads its views with Pug.js and allows instant OAuth-based access through Google.

  • After problem identification, I researched and resolved common problems among remote teams: time zone coordination, applying reactive programming, and browser testing made TTZ a cross-mobile, cross-browser solution with adaptability.

  Check it out: https://tiny-timezones.herokuapp.com/

• 

  Hitzii App 📱

  Remote storage and file manager for real-time collaboration

  • Web App
  • MERN
  • Web Architecture
  • Web App
  • MERN
  • Web Architecture

  ❌

  • Hitzii was an approach for remote team collaboration and data sharing plus a customizable set of tools and cloud applications. The app offered instant chat and privilege-managed file storage shared within an organization; the group had access to a virtual workspace with task boards and storage folders to comment and modify in real-time. Additionally, Hitzii offered troubleshooting for technical needs regarding the app.

  • Reapplying some of the learned principles from previous back-end projects, as Hitzii's CEO and Web Architect, I built a robust, clean code Node.js infrastructure with powerful features. We implemented job scheduling, event-driven pipelines, and dependency injection again, plus error logging to strengthen system performance with bug fixes. I wrote the technical product specification and led the documentation, so devs and designers fed on a single source of truth. I taught the team to write and interpret Class Diagrams, OMTs (Object-Modeling Technique), and flowcharts to visualize static and dynamic components; product management ensured cross-functional collaboration.

  • We used dozen of tools, programs, libraries, dependencies, and frameworks to bring Hitzii's first MVP alive. Some of them were Typora (for diagrams), Figma, Trello + Slack (for team collaboration), Node.js + Express, MongoDB + Redis (as NoSQL databases), REST and WebSockets (for data transmission). For DevOps, we used AWS products.

  Check it out: https://www.linkedin.com/company/hitzii

• 

  AMLApp 🔗

  Import products from Amazon and republish them on Mercado Libre

  • RESTful API
  • TypeScript
  • GraphQL
  • RESTful API
  • TypeScript
  • GraphQL

  ❌

  • Based on previous solutions, I debuted as a back-end developer with a bulk E-commerce processor with Node.js to grab products from Amazon and republish them in Mercado Libre, a Latin American marketplace. By interchanging tokens and keys, I used existing APIs from web scrappers for data gathering and integration.

  • The web API development lacked UI but, in turn, used GraphQL to interact with data. I did API integration on top of a layer/microservices architecture organized by routes, middleware, independent services, and Database I/O models. Additionally, each service could schedule jobs and trigger events to communicate with other services; that's how I managed to scan the Amazon store x times per day and update a product's information according to stock (scheduled data collection).

  • I built the server with TypeScript and used Agenda (job scheduling), Axios, Celebrate.js (request validation), and JSONWebToken (for user authentication and authorization). The core services consumed most of these resources using Typedi for Dependency Injection (a recommended programming practice in OOP). I did an issue investigation by using Mercado Libre's SDK. PS I also have video tutorials for AMLApp.

  Check it out: https://github.com/JustinSalcedo/amlapp

• 

  Rodriguez-Nursery.com 🌐

  The Rodriguez Nursery's website by Lifether

  • Landing page
  • UX & UI
  • Sass
  • Landing page
  • UX & UI
  • Sass

  ❌

  • The Rodriguez family has owned a local nursery for decades, giving their customers quality products and service; Lifether reflected that in their first online store to appeal to that entrepreneurial thinking. The site served as a landing page and a sales channel so customers could browse, share, and purchase their favorite sprouts. Growing the customer base became an important milestone, so the Lifether team connected the Rodriguez and valley communities by running social media campaigns.

  • The site included a hero banner, Lightbox galleries, clever statistics, social media engagement, testimonials from frequent customers, contact information and location widgets with Google Maps, and strategic CTAs along with the site. The CTAs led to a Shopify store where customers could order plants instantly. In Shopify, we maintained e-commerce dashboards and reporting tools to enhance financial control and customer experience through data visualization.

  • We used multiple CSS Modules (like keyframes for animations, Flexbox, positioning, and Media Queries for responsiveness) and JavaScript to make a vivid UX artwork. Technologies involved in design and development were Figma (UI mockup), Sass (CSS pre-processor), and multiple JS front-end libraries (Bootstrap, Lightbox, jQuery, Owl Carousel, Popper, and Slick).

  Check it out: https://justinsalcedo.github.io/RodriguezNurseryWeb/

• 

  Lifether Digital Agency 💼

  A digital marketing agency for nurseries and garden centers

  • Landing page
  • Bootstrap
  • Node.js
  • Landing page
  • Bootstrap
  • Node.js

  ❌

  • Lifether was a digital web marketing agency that served plant nurseries and garden centers. We offered web design, domain registrations, hosting, CMSs, and professional SEO. Our goal was to support local businesses with cheap but effective landing pages, social media management, content creation for blogs and posts, paid campaigns, and modern e-commerce platforms following industry guidelines.

  • Learning from my mistakes, I wanted to give Lifether's website a minimalist, eloquent style. Again, I separated styling concerns by CSS files but the sections; now, with comments and clever class names, we had less complex, maintainable style sheets. For layout purposes, I only used Normalize CSS and Bootstrap's Grid to adjust every component's size and position for each Media Query. To display our HD mockups, I used Lightbox again within a slideshow. On the other hand, contact forms sent our prospects' inquiries to a Node.js/Express.js/MongoDB server; this time, we received messages in our e-mail thanks to nodemail and our paid mailing service.

  • We outsourced projects to talented UX designers and coders I supervised with technical design, development, and testing. And after delivering platforms to owners, the Lifether team provided training for smooth business operation; therefore, we ensured long-term relationships with our customer base.

  Check it out: https://justinsalcedo.github.io/lifether

• 

  TUNA 📱

  A template generator and processor

  • Web App
  • ReactJS
  • Node.js
  • Web App
  • ReactJS
  • Node.js

  ❌

  • After several layouts and layouts for multiple web projects, I thought about a more efficient way to reusable code, components, and sections to generate new pages. I decomposed my templates into these HTML elements: "models" (the general order of the primary areas in a page), sections, and components; additionally, I could upload CSS files containing layout designs, color palettes, and font pairings. For each element, I could choose the HTML tag and categorize them. Every "model" worked as a template and allowed me to populate with content later.

  • TUNA was my first biggest React.js project for a while; its development involved two Node.js server instances and npm scripting commands. The first server loaded React and rendered the source components into an event-reactive UI; meanwhile, the second one served the API, established the routes, and put the controllers to execute operations on the MongoDB database. With the multer middleware, the back-end server stored and associated my CSS files with HTML elements. Finally, I could browse my templates and render them in different tabs. Would I change a piece of TUNA? All of it.

  Check it out: https://lifether.com/

• 

  Libellus 📱

  Your time management assistant

  • Prototype
  • UI & UX
  • Adobe XD
  • Prototype
  • UI & UX
  • Adobe XD

  ❌

  • Have you ever thought of an effective productivity app to push you through those procrastination episodes? I thought of Libellus. My prototype meant the app to manage and time your daily routines from short-term event synchronization to long-term scheduling. That sense of urgency could make us run against time, followed by the satisfaction of accomplishment.

  • After logging in, the home screen calendar allows you to watch your history from previous days and add routines for today and the future. On the schedules panel, you could design and manage your habits almost atomically; by looking up a day, you could program even more than one timeline while they didn't collapse. Furthermore, the floating player made the main feature: whenever you'd ready, the routine would start running and time every activity until completion.

  • I used Adobe XD as my UI Design tool and the Google Material Design UI Kit for Android standardization. The color palette comes pleasant to users while holding my favorite colors. I looked for light shades and borders for an uncluttered layout but avoided a generic, minimalist style; defining solid design systems will ease future implementation. PD An iOS-compatible version is coming soon.

  Check it out: https://xd.adobe.com/view/da3e8b8b-465c-4f71-b03a-82c3e79b06b0-8f6d/screen/e5c04593-6460-4e89-a21e-9cb4f5973722?fullscreen

• 

  Zach-Carwash.com 🌐

  A landing page and gallery for a carwash

  • Landing page
  • CSS Animations
  • JavaScript
  • Landing page
  • CSS Animations
  • JavaScript

  ❌

  • Zach wanted a landing page to promote his mobile carwash services. A hero banner with a slideshow background, thrilling animations listing his services, and a Google Maps widget to locate his service areas composed the perfect website. Also, visitors could see a gallery displaying Zach's proud work detailing luxury cars.

  • I improved Responsive Web Design and Media Queries using Single-Responsibility principles. I split CSS Animations, color palettes, fonts, and each section into different files. Lightbox JS helped me overlay images using modals and CSS Positioning for the gallery. The most challenging feature was the banner slideshow since I used keyframes and overlays to compose an astonishing after trial and error.

  • My client saw himself getting more quotes, service appointments, and a higher conversion rate through calls and e-mails. The psychology behind CTAs (Call To Action) buttons consists in grabbing the viewers' attention at first sight and pointing an obvious next step (making a call!)

  Check it out: https://justinsalcedo.github.io/Zach-Carwash/

• 

  AnthonyLandscape.com 🌐

  A simple landing page for a landscaping business

  • Landing page
  • CSS Animations
  • JavaScript
  • Landing page
  • CSS Animations
  • JavaScript

  ❌

  • Anthony reached out looking to boost his DBA landscaping company, which specializes in yard and tree services. I brought to life his fliers with an austere, elegant landing page featuring his 24/7, toll-free phone number.

  • After Somnia, I desired to take my CSS Animation skills to the next level. The hero banner displays a slideshow with beautiful sample landscape works—and the service listing results in attention-grabbing for the creative layout using a custom grid. The Responsive Design with CSS Media Queries makes the site a mobile marketing channel again. Finally, the serif font matches the conservative, cozy aesthetics while being accessibly readable on any screen.

  • Anthony was my first customer, so it was my chance to cement a history of attentive Customer Service, Technical Support, and Team Cooperation with my clients; I wanted them to be co-creators of their brand.

  Check it out: https://justinsalcedo.github.io/Zach-Carwash/

• 

  Somnia Boardgame Store 🌐

  A store for a fictitious boardgame

  • E-Store
  • HTML5
  • CSS3
  • E-Store
  • HTML5
  • CSS3

  ❌

  • My first formal website. I applied Semantic HTML and CSS Flexbox for my newborn layout style, which I used for future projects.

  • The product page's items have instant checkout, where a form allows users to pay for that product through PayPal. I wouldn't recommend purchasing dummy products.

  • I followed Responsive Web Design patterns and used CSS Animations to compose a minimalist, friendly aesthetic; I pushed page by page and hotfixes using Git to organize my workflow.

  Check it out: https://justinsalcedo.github.io/somnia/

• 

  JustinSalcedo.com (v1) 🌐

  My website's first version

  • Landing page
  • Semantic HTML
  • CSS Flexbox
  • Landing page
  • Semantic HTML
  • CSS Flexbox

  ❌

  • I offered my web design services to small, local businesses; with little experience, I built landing pages and brochure sites to maximize my customer's profit. The first section showcased a couple of my projects, and below the gallery, viewers found precise needs covered and the technologies involved.

  • This site's layout uses CSS Positioning, Display, Box Model, and Flex Box; the contact form used to store user messages and quotes with AJAX straight in my database where I could look at and reach out to prospects (not the best approach, so far). The logic behind the form-to-database flow worked thanks to a Node.js server and a MongoDB cluster; this site's source code version doesn't receive messages anymore.

  • Through my first two years of freelance services, I made tens of budget quotes and timeframes--only a couple of them led a project, though. Besides sales funnels, mockups, and CMSs, I began implementing back-end services like APIs, web scrappers, and e-commerce platforms. With Web Security as a priority, I professionally handled user credentials and payment processors.

  Check it out: https://justinsalcedo.github.io/JS/

• 

  JustinSalcedo.com (v2 and current) 🌐

  THIS

  • Website
  • MVC
  • PHP
  • Website
  • MVC
  • PHP

  ❌

  • My new website welcomes high-volume traffic.

  • This site's layout uses CSS Positioning, Display, Box Model, and Flex Box; the contact form used to store user messages and quotes straight in my database where I could look at and reach out to prospects (not the best approach so far). The logic behind the form-to-database flow worked thanks to a Node.js server and a MongoDB cluster; this site's source code version doesn't receive messages anymore.

  • Through my first two years of freelance services, I made tens of budget quotes and timeframes--only a couple of them led a project, though. Besides sales funnels, mockups, and CMSs, I began implementing back-end services like APIs, web scrappers, and e-commerce platforms. With Web Security as a priority, I professionally handled user credentials and payment processors.

  Check it out: https://justinsalcedo.github.io/JS/