THE CNC COMPANY's ecommerce website.
21' - 22'
* Thank you Kerry Li for spending your Sundays coding with me. *
SvelteKit
Svelte
Typescript
Javascript
HTML/CSS
Google Cloud Platform
Node.js
Express
Figma
Illustrator
Photoshop
Project Management
Contribution |
The website was my primary responsibility at THE CNC COMPANY. I figured we needed a platform to sell and market our products and being that we already had 2 CNC engineers, I took it upon myself to learn something new and build the website. I built the first iteration with pure HTML and CSS, hosted on HostGator. This was largely because I was unfamiliar with common tech stacks, but it was also the easiest way to dip my toes in software development. I eventually wanted to host my own backend so I learned Node.js and Express and transitioned to that. However, as the site scaled and I became exposed to frameworks, using a framework seemed a clear option. Being that I wanted the site to have good SEO, I wanted to go with server side rendering. After researching some options, I decided to go with SvelteKit using Typescript. This was the final migration and the website today is written in Svelte with routing by SvelteKit. The rest of the backend involved hosting on Google App Engine Flexible and a MongoDB Atlas database for user and product info. I used Figma for wireframing and designs and Notion for project management. I used Photoshop to edit media and Illustrator was used to create assets. I designed every page and feature of the website with brand consistency and user experience in mind. I adapted the website to fit all desktop and mobile screen sizes. All in all, I created a 17 page site throughout multiple iterations and design refreshes while keeping up to date with product and company updates. |
Improvement |
User experience is incredibly important to me and I think making an application fast and clicky is a big part of that. That's why I'm ashamed to admit the website has a 28 Performace score according to PageSpeed Insights. The reports confirm what I've put time into: writing clean code with fast technology - but highlights a neglect of mine: using fat photos that take a long time to load. A simple oversight, but something that does impact user experience for sure. I've done better with that with my future projects and look to continue to improve. Also, when the company shut down, there was some unoriginal language copied from big websites we used as temporary filler text as we rushed to update our website. If I were to pick the site back up, changing the text would be the first thing I'd do. |
Material |