Senior Full Stack JavaScript Engineer at 1Brand

Achievements

I built 1brand.co which can complete brand guidelines in four simple steps. Automated the process by pulling in colors, logos, and fonts from the brand's website provided by the user. also are easy to customize, share, and update.

1Brand Prelaunch Website

For the pre-launch phase of the 1Brand SaaS application, the client needed a fast, SEO-optimized static site with a pre-registration form that would let them develop a better product by gathering input about their users' needs. The site needed to feature a pre-registration form that would generate and track unique referral codes so the client could incentivize users to spread the word about the product. Several animations on the home page would make users feel already immersed in the product even while they were learning about its features. And the whole site needed to be completed in 14 days to be ready for pre-launch.

I recommended Gatsby as the static site generator and built the entire site from scratch, deploying on time via GitHub integration to Render.com. Starting with flat HTML and CSS files to make sure my code matched the UX team's design, I then converted that code into React components. To process the pre-registration form and contact form, I also wrote two Node.js applications and deployed them to AWS Lambda via API Gateway proxy integration. With a combination of JavaScript and CSS, I implemented animations that trigger when the user scrolls to certain points on the home page, making the site feel alive and responsive.

The site was completed in time for the pre-launch, and sign-ups immediately began to roll in. The client is already receiving great feedback from users who are excited about the launch of the 1Brand product. I had a blast building this site, and I can't wait to see where 1Brand goes next!

I used the particles.js library and CSS animations to make these multi-colored dots drift around on the site.

I wrote a Node.js function and deployed it using AWS Lambda and API Gateway to accept API calls, write data to an Airtable base, and return data to the user.

The Airtable API call returns a referral code unique to the user. I made it easy for them to share the referral URL with a "Copy" button that copies the URL to their clipboard. The contact form makes an API call with Axios to another AWS Lambda function that sends the message via the Mailgun API.

I used a JavaScript-triggered CSS animation to create this animated form field simulates the user typing their company's web address into the 1Brand app. I used JavaScript-triggered animations to create these animated sliders that simulate the user editing their corporate brand colors in the 1Brand app.

Automated Brand Guidelines

1Brand's goal is to make it easy for designers and brand managers to publish brand guidelines in under 10 minutes. We automate the process by pulling in colors, logos, and fonts from the brand's website provided by the user.

As the first engineering hire, I worked on the front end of the application from day one, using the React/TypeScript/Apollo/NextJS stack and extending the Ant Design library. One of my first major features was the logo clearance editor, which uses live controls to display guides the user sets to show other designers how the logo may be used in design scenarios. Since no existing UI library offered this functionality, the core of the logo clearance feature was written mostly from scratch.

Brand guidelines also need to show typefaces used by the brand. I leveraged the Google Fonts API to pull in font information for a typeahead search that used CSS-in-JSS to inject stylesheets in real time as the user searches for fonts. This allows 1Brand to display live previews in both the search interface and the brand guidelines, so a brand's audience can see exactly how their fonts should look.

After the team decided to move to a full-stack model instead of keeping the frontend and backend teams separate, I worked on many updates to the NestJS/GraphQL/PostgreSQL API. The app tracks feature entitlements based on the user's subscription plan, and I overhauled this service in NestJS to allow the app to create "locked" colors, logos, and fonts for the brand. I also implemented a "friendly" color name feature that uses the hex value of an added color to look up its nearest match in a list of 1000+ color names, so that whenever a user adds a color, the app can automatically assign it a name.

The features I developed are:

• Build Infrastructure 1Brand
• Develop all of UIs of this project using AntD
• Using Jest to Create Unit Tests
• Integrate Headless CMS for the Blog
• User Management by the user role
• Payment Gateway Integration
• Custom logo clearance editor to show how the logo may be used
• Rendering of user's logo clearance in the published guideline document
• Typeahead search with live previews of Google Fonts
• Card-based live preview of Google Fonts selected by user
• Custom modal color selector for user to add official brand colors
• UI to let user trade a "locked" item for an "unlocked" one
• A Style Guide Generator

1Brand was and is a fantastic app and team to work with.