OverScore Nexus

OverScore Media's next-gen blogging engine and content management system

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)

  • Gallery (for multiple images at a time)

  • YouTube Video

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

  • Code Block (for displaying a block of beautiful syntax-highlighted code)

  • Audio (for the playback of sound files)

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!

Heading 1

Heading 2

Heading 3

Merged cells

Single Cell

A big cell

that spans

multiple lines

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.)

A screenshot from OverScore Nexus, showing a text widget component with a number of buttons for the manipulation of rich text content

Now that's what I call rich text!

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

An AI-generated picture of a rocket launch site

Image widgets support, well, an image. With a rich text caption!

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.)

A screenshot of an image widget on Nexus. The image itself is displayed at the top, then some metadata including its file size, upload date, and dimensions, then alt text and caption editors, than some other buttons, and a way to replace the widget's imag

Image Widgetception

Image widgets are great and all, but sometimes it makes more sense to display multiple images in a slideshow. Enter, the gallery widget!

A purple and black futuristic scene, of an endless hallway
Many different designs of robots, based on retro technology like CRT monitors and vintage stereo equipment
A goblin scribe sits at a desk and writes, with papers covering the desk and wall behind him

Gallery widgets can have multiple images inside them. Click on this image to view the full-screen slider!

Gallery widgets are pretty cool. We’re really satisfied with how they turned out. Being able to slide left or right to view all the images, even if you’re in the fullscreen slideshow, is a very nice feature. Here’s what a gallery widget looks like from Nexus. It’s basically like an image widget, with mini image widgets inside it.

You can add, edit, rearrange, or delete the images within a gallery widget as you see fit.

A screenshot of a gallery widget from Nexus. An image is displayed, along with controls to edit its metadata, and controls to add/rearrange/delete other images in the gallery

There's an "accordian" style interface, that lets you edit the properties of one image at a time. Very convenient.

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.)

A screenshot of a YouTube widget. The video is shown inside the widget's body, with a 'Change YouTube Video' button below it. The video itself is by Fireship, an introduction to Next.js version 13, showing Morpheus from the Matrix (1999) holding pills

This is your last chance. After this, there is no turning back.

And now, here’s a 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).

A screenshot of a 3D widget on Nexus, showing a model of a character that's a robot made from a computer monitor. Underneath the 3D model is a button that says 'Retake Screenshot'

That 3D model, by the way, is Chippy the Robot. This little guy has been places. We’ve turned him into pixel art, a vector logo, and even a 3D-printed figurine!

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

Next up, code block widgets!

export default function CodeBlockWidget({ initialContent, onChange }) {
  // ...
  return (
    <div className='w-full mb-4 mt-1 p-4'>
        className='w-full md:w-1/2 max-w-screen-sm mt-2 mb-6 flex-grow'
        onChange={(newLanguage) => changeLanguage(newLanguage)}
        nothingFound='No languages found'
      <CodeBlockEditor />

Woah, now, let’s not get too meta. That’s a code block widget displaying the code for code block widgets!

Anyway, sometimes the best way to describe something is to show me the code! So, we developed code block widgets, to do just that, in style! Look at all those pretty colours.

Code block widgets look like this from our end:

Screenshot of a code block widget on Nexus - a black rectangle with multi-coloured text inside (code in the JavaScript programming language)

Admittedly not as pretty as the version you see, but it does the job. We can set the programming language in the top-left corner, to ensure the syntax highlighting works just right

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

Audio widgets are a lot of fun. It’s like leaving a voice memo. Sometimes you just want to get your thoughts out there, in audible form. Well luckily, our custom player makes it easy to listen along!

Audio widgets look pretty similar on Nexus to how they look here on our site:

A screenshot of an audio widget on Nexus - an audio player with navigation buttons, a slider for seeking/scrubbing, a slider for volume, and a file input

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. We’re constantly looking for ways to improve Nexus, so we might end up adding some more types of widgets in the future.

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.

A screenshot from Nexus, showing the top of the company project editor. Title, slug, synopsis, link, category, hashtags, tech stack, collaborators, and the header image can be customized

Maximum metadata. Gotta get that sweet Search Engine Optimization!

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?

Nexus's dashboard, displaying a grid of buttons - company projects, blog administration, blog series, website settings, user management, and my blog posts. A home button is in the top-left corner, and a user avatar is in the top-right corner

Here's the dashboard

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.

A grid of nine company projects is displayed, with buttons to edit or delete each, and an 'Add Project' button to the bottom of the page

The Company Projects page

Two blog posts are displayed on the blog posts page, with a button to add a new post below

My Blog Posts page

The blog series page, displaying one published series and a button to create a new one

The Blog Series page

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.

The top of the series editor, where various metadata can be added to the series, much like a blog post or company project

The top of the series editor

Two blog posts are arranged one after the other at the bottom of the series page, much like widgets on a blog post. The blog posts on a series can be re-arranged, added, or removed easily

The bottom of the series editor. Note the similarities between these blog post cards and widgets

The series Matthew's Machinations, with two blog posts, as it is displayed here at overscore.media

This is what series look like here on our site. But this you can see for yourself by visiting our blog!

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 website settings page, with buttons for homepage services, tech stack, project categories, post categories, hashtags, and social link types

More AI-generated images here, to spruce things up

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:

The homepage services page has a table with the different services that will be displayed on OverScore's homepage. Each service has a name, an image, a description, and buttons to edit or delete it. There is a button to add a new service at the bottom

Homepage Services editor

This page displays tech stack categories (languages, frameworks, tools, software, and services). The categories themselves can be edited here, but it is also possible to manage the items of each individual category

Tech Stack Categories editor

Managing the items of the 'Languages' tech stack category. Each item has a name, whether it has an image or not, and edit/delete buttons. There is a button to add a new item to the category at the bottom

Tech Stack Items editor

An AI-generated image of a cool-looking old wizard in a black trenchcoat and sunglasses. A powerful green orb hovers above his hand, and the background looks like a visualization of cyberspace or the inside of a microchip

Can we just take a minute to appreciate the quality of these background images? Stable Diffusion is awesome!

The project categories page displays company project categories, with a name and a slug each. There are edit/delete buttons beside each category, and a 'New Project Category' button at the bottom

Project Categories editor

The post categories page is very similar to the project categories page, but with different categories to manage

Post Categories editor

The hashtags page shows different hashtags, which have values, background colours, slugs, and edit/delete buttons. There is a 'New Hashtag' button at the bottom

Hashtags editor

Each social link in the table has a name, template for such URLs to conform to (like 'https://instagram.com/'), an icon, and edit/delete buttons. There is a long list, which is cut-off, but there is a button to add a new social link at the bottom

Social Link Types editor

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.

What we used to make it:
The Project Team:

Liked what you saw up there? We can make it happen for you, too. and let's get started on that project of yours!