The OverForge
A custom e-commerce platform for the distribution and sale of digital assets and 3D printable models
Check it out yourself:
https://forge.overscore.mediaBuilding the OverForge was our chance to develop a custom e-commerce platform from scratch, using modern tools and technologies.
The site was primarily developed with Next.js, and we integrated Stripe for seamless payment handling.
The goal with building this site was to create a viable “tech demo” of the latest available tools for developing an e-commerce site from scratch. However, we wanted it to not only be a demonstration, but a fully-functional site complete with products, checkout flows, order management, user login, a content management system, and administrative features. The goal was to build something with the user experience of a Shopify site, without using Shopify, WooCommerce, or another pre-built e-commerce tool.
To that end, we focused on digital assets, specifically 3D models and game development assets, since that has so far been our speciality. While selling physical items comes with its own challenges (namely inventory management, shipping, address handling, and fulfilment, among others) many of those are necessarily mitigated by various third-party services. Still, this would be a “real-world” project with real payment processing and real (albeit digital) order management functionality. This would prove a rather daunting mission, but the results speak for themselves
The OverForge is live and open for business! It hosts a number of free and paid digital products, including 3D printables, electronics projects, and game development assets. Feel free to check it out for yourself, or continue to read on for more details.
The OverForge site has many features we are proud to highlight. Take a look below to see them in action!
Dynamic homepage content (including featured products and categories)
A product can be featured on the "hero" section of the homepage
Rich product filtering (including sorting, keyword searching, price range, and category/tag selection)
Products can be sorted or filtered by a keyword search, a price range, whether they are featured or not, and by tags and/or categories
Product page, with images, description, and other product details
Top of the product page, with an image gallery, product details, and an add to cart button
Responsive design, so the site looks great on desktop, mobile, and many other screen sizes
The homepage on mobile portrait
Administration features underpinning our custom content management system
Tag Management
FAQs Page to answer common visitor questions
FAQs page, where clicking on a question will give you the answer in an "accordion layout"
User login and registration
Sign-in is enforced when you go to checkout, or you can click the link in the navigation bar
My Orders Page, displaying a logged-in user’s past orders
My Orders Page
Order Details Page displaying the specifics of a given order
Order Details Page
Add to Cart functionality
Each product has an "Add to Cart" button
Secure Checkout via Stripe
The shopping cart page
3D Preview for certain products, powered by <model-viewer>
Some products have a "Preview in 3D" button
Building this site was a very practical learning experience. There were ups and downs, no doubt, but many of the lessons learned during this project will be extremely applicable to our future endeavours.
As usual, Stripe was surprisingly easy to work with. It’s clear they prioritize “developer experience”, which is rare to see from large financial or B2B services companies. Having a trusted third-party vendor handle “the hard part” of financial transactions is pretty much a must these days, and Stripe has served us well.
A standout highlight of the development process was getting to work with Drizzle ORM for the first time. It’s an excellent tool for working with databases. Traditionally, doing anything with a database involved writing a lot of SQL. As “SQL injection attack” has more or less entered the common vernacular at this point as the cause of many a data breach, it should come as no suprise that raw SQL code is difficult to deal with directly. Thankfully, we now have powerful tools like Drizzle that provide a handy abstraction over raw SQL (in the majority of cases) that is much easier and safer to deal with. It used to be that such tools were good for making a prototype, but they often came with performance drawbacks in a production setting. However, Drizzle is a “thin abstraction” that gives the aforementioned developer experience benefits without significant drawbacks. Long story short, we definitely look forward to a chance to use Drizzle in future projects.
Another highlight was our introduction to Resend, another very developer-friendly service for working with emails. We used it to hook up our contact form, so we will be notified by email when someone makes a submission. Resend was a joy to work with. The form is also protected by hCaptcha, a privacy-focused alternative to Google ReCAPTCHA, offering a “challenge” before a user can submit the contact form. We believe hCaptcha is truly on the cutting edge of human verification/bot detection, which is getting more and more complicated by the day it seems. Gone are the days when a blurry or poorly handwritten set of letters is enough to stop an automated bot from being able to hijack a form to send spam.
We also used Keycloak to manage user login and registration. It is an open-source, industry standard software for handling all things “identity management”. As much as we wanted to build this site “from scratch”, just like with payment processing, email handling, and spam protection, login and authentication/authorization is an area of app development where you should resist the temptation to reinvent the wheel. In such cases it’s better to stick with a battle-tested solution, and Keycloak fits that bill quite well.
Additionally, this was our first time using Zustand in a project. It was very easy to work with, and made setting up the shopping cart almost trivial. It’s an easy recommendation from us.
On the other hand, Next.js is admittedly more of a mixed bag. The last few years it seems like Next basically reinvents itself each major version (especially since around version 11 or 12). This sounds promising on the surface, but in practice you’re often left with just that - promises. Workflows that should exist, features that should work, and optimizations waiting just over the horizon (or perhaps, the rainbow). It’s apparent the team leading Next.js development wishes to prioritize innovation over stability. Which is fair enough; especially in the last decade or so of rapid progress in the web space. Still, it feels more “move fast and break stuff” than anything else, which can be frustrating when you just want something that works.
Still, if you take a couple steps back from the “bleeding edge” and focus on building something that will stand the test of time (at least as much as any website or application can claim to) it’s still possible to build something good with Next, even something very good.
We would be remiss to not mention the help we got to make the OverForge a reality. We at OverScore are super grateful to Durham College for giving us the opportunity to host a placement internship as a part of their Computer Programming and Analysis (CPGA) program in the spring of 2025.
While we had been throwing around formative ideas for something like this for a while, this project only began to crystallize after this opportunity came to us. We knew it would take a significant amount of work and expertise, especially in the realms of user experience and systems design. Thankfully, we were able to connect with three incredible, professional, hard-working, and bright students who were able to hit the ground running with us.
It was a pleasure getting to work with these students. We wish them the best in their future endeavours, and would easily recommend each of them for any web or software development position.
Truly, the main challenge was keeping up with these three, and making sure they had enough to do for each day of the placement. This experience taught us a lot about responsible project management, and we saw first-hand how effective, resourceful, and productive this group of up-and-coming developers can be. In a sector currently haunted by the prospect of artificial intelligence being leveraged to “replace” developers, it was refreshing to see genuine human creativity at work.