OverScore Nexus

Here at OverScore, we like to keep ourselves informed about the latest developments in the software and web industries. Although we understand that the best tool for the job isn’t always the newest one, we also love to experiment with brand-new tech, and push it to its limits. We believe that every project we create for our clients should represent the best we could do for them at the time, so that’s a major incentive for us to keep learning and honing our craft.

Another thing we do here at OverScore, when we feel it’s necessary, is to make our own tools. OverScore Nexus is the result of the combination of these passions.

Nexus is the culmination of several months of research, experimentation, testing, and incremental improvements upon a solid foundation. And it is currenly still in active development, so expect to see changes to this page as we drop new features. This page will serve as a showcase of the current state of Nexus, and of the many lessons we learned while constructing it. We hope you enjoy this part-retrospective, part-exhibition on a web application we’ve poured our hearts and souls into!

OverScore Nexus is a custom-built content management system. It is primarily used to update the content of this very website, our company homepage. At its core is our very own blogging engine, a content editor chock full of the features we need to bring our content to life. While there are numerous blogging and content management systems out there, we found that - for our specific use-case - most of them either did not try to do enough, or tried to do too much.

The initial internal pitch for Nexus was to make a blogging engine that would be natural and comfortable to write with, and one that could support many types of content, in addition to plain text and images. We wanted a proper web application that supported multiple users, and had a distinction between admins and editors - with each user able to edit their own profile page. We also wanted a system that allowed blog posts and company projects to be given many different types of metadata, including categories, hashtags, and tech stack items. And to top it all off, it needed to provide excellent SEO, and connect up to our current company site. While a casual examination of these requirements might make such a system seem rather easy to develop, we knew that there were going to be some serious challenges to overcome. But, with a proper architectural foundation, and through the use of powerful tools to aid in development, we decided it would be worth it.

Now, the fundamental building block of content in Nexus is the widget (similar to the concept of a “Block” in the WordPress editor). Widgets can come in a number of types. Currently Nexus 1.1 supports the following widget types:

• Text (including rich text editing, powered by the Tiptap editing framework)

• Image (supporting alternative text and captions)

• YouTube Video

• 3D Model (Supporting GLTF models visualized by Google’s <model-viewer />)

And there are more on the way. Widgets were an excellent idea, because new types of widgets can be developed and incrementally added, without having to rip apart the whole blogging engine and start over. And since each widget type can manage its own data, the challenges of handling things like 3D models can be separated into different functions, so as not to overcomplicate the handling of all other widget types. In the software world, this concept is known as separation of concerns, and is quite powerful.

While you can see all of the different widget types in use elsewhere on our site, we will provide a brief demonstration of each type of widget below. Enjoy!

Here is an example of a text widget. It can do plain text, bold text, italic text, underlined text, striked-out text, ^{superscript text}, _{subscript text}, code snippets , and links.

• It can do bulleted lists,

1. It can do numbered lists,

And it can do blockquotes.

Text widgets can also do different sizes of headings, to help delineate long blocks of content:

^ and horizontal lines, like the one above.

And if that wasn’t enough, text widgets also support tables. Yes, tables!

Pretty cool, huh?

Now here’s what text widgets look like from Nexus’s interface:

(Note that the table editing buttons aren’t there by default. Text widgets don’t normally look this cluttered.)

Now, here’s an example of an image widget:

And this is what image widgets look like from Nexus’s editor:

(Also note that the “Image Metadata” section isn’t open by default, either.)

YouTube widget time:

(Fireship is an awesome channel that covers a wealth of software and web topics, btw.)

YouTube widgets look like this on Nexus:

(The “Change YouTube Video” button opens a prompt to type in a new YouTube URL.)

And last (for now) but certainly not least, the 3D widget!

On Nexus, 3D widgets are pretty simple, but there’s a button to take a new screenshot of the model (that will appear before you click on it to view the model in 3D).

Pretty cool, huh? We had a lot of fun coming up with these different types of widgets. And they make it easy to add lots of different types of content to our blog posts and company projects.

By the way, here’s a 3D-printable model of Chippy, on Thingiverse.

The editing workflow on Nexus itself is very natural, and kind of relaxing, really. It doesn’t get in your way, allowing a smooth flow of ideas, from your mind to the virtual page. And those ideas then get rendered beautifully on this website, thanks to Tailwind Typography.

Widgets themselves can be moved up or down the page, and you can add a new widget (of your desired type) anywhere you wish. And if you want to get rid of a widget, simply click on the little garbage can icon in the bottom-right corner of the widget.

So, widgets are pretty cool and all. And granted, they make up the core of Nexus’s functionality. But as proud as we are of the way widgets have turned out, there’s more to Nexus than just widgets.

For one, there’s the different types of metadata we can add to blog posts and company projects.

Check it out! We can add categories, hashtags, and tech stack items to blog posts and company projects, as well as customizing attributes like the title, slug (which goes in the URL), link (for any company projects with a live URL), and collaborators (for displaying the list of people who worked on a given company project).

And every blog post and company project can have a header image, to make it really pop!

But let’s take a step back from the blogging engine, and see some other parts of Nexus, shall we?

We had a lot of fun using Stable Diffusion for generating the background images seen on Nexus. But that’s a story for another time.

From the dashboard, a non-admin user will see their own blog posts, as well as having the ability to edit their own user profile. By the way, a user’s profile editor looks a lot like the editor for a blog post or company project, with a place for metadata and a place for widgets.

An admin user will see all of that, plus company projects, the editorial page for the administration of blog posts, a page to create and manage blog series, a page to manage Nexus’s users, and a page to edit the settings of this very website.

Blog series were something we especially wanted to implement, but they turned out to be quite tricky. Nevertheless, by sticking to a reasonable scope, and reusing and repurposing code and concepts we had built thus far, we added support for series to Nexus.

This is something we found to be lacking with a lot of the potential blogging solutions we looked into, but it was a useful feature for organizing blog posts in different ways. The breakthrough with series was being able to treat the individual blog posts on a series like widgets on a blog post.

So, we’ve covered most of the exciting stuff, but there’s one last thing about Nexus that’s worth covering here.

Like any good content management system, Nexus has an area for editing the various settings of our website. Behold!

The homepage services button takes you to a page to edit the services that appear on our homepage. The tech stack button takes you to a page to manage the categories and items on our homepage’s tech stack slider. This is the same list of tech stack items that can be selected from the blog post, series, or company project editor. Project categories are for company projects, and post categories are for blog posts and blog post series. Hashtags are shared between company projects and blog posts. And finally, social link types determine the types of links that Nexus users can put on their user profile page.

Here are some images of these pages in action:

And that about concludes our tour, folks. Hope you enjoyed!

Now that you’ve seen Nexus itself, check out the rest of our site to see what it’s enabled us to build! Nexus may not be perfect, but it’s very powerful, easy to use, and built exactly to our own requirements. And there is still room for Nexus to grow and be improved, as its codebase is still easy to manage and work with.

And now that we’ve made this, our team has the confidence and ability to take on more of these types of projects for our clients. So whether you’re in need of a simple site or online store for your business or project, or a completely-custom web application like Nexus here - we’re up for the challenge.

And you can rest assured that we here at OverScore will continue to expand our capabilities, keep up to date with the latest and greatest tools, research new ways to develop websites and web applications, and build custom tools when necessary - for ourselves and our clients.