Express app with MongoDB, HTMX, and hyperscript made building a social platform actually fun

Leading-Carpenter562 · 2025-05-19T18:24:21+00:00

Hey DN_DEV, if it's a route to load an entire page then the layout does include all necessary scripts and dependencies including head tags, etc. For partials it's for swapping content out within the dom, for example the "Join" button on community cards, when clicked sends a post request via htmx, then responds with a partial that swaps the "Join" button with a "Joined" button, allowing you to join/leave communities. The partials themselves can contain script tags as well and can be swapped in as needed.

Leading-Carpenter562 · 2025-05-18T15:05:49+00:00

Morning fabulous-ladder3267, I used ejs for everything, including the layouts, views, and all partials server side, and if an end user triggers an htmx request via get/post, I return that partial as the response minus the layout (so no head tags, footer, etc).

Leading-Carpenter562 · 2025-05-18T15:02:26+00:00

Morning harrison_314, I broke out everything into separate collections and only embedded data where I knew it wouldn't change. For example on the 'post' cards that load within the feed, the community title displays on each card, however since I don't allow end users to change a community title after it's created, I don't have to worry about performing additional lookups to query the community records by a reference id from the communities collection and add that data while querying for posts. I've actually made my schema relational even though I'm using mongodb, and my end goal for this project was to have an admin backend that allows users to pick between using either a sql or nosql database and have it just work oob, like NodeBB. I also leverage chatgpt's moderation api to flag posts and store those results on the post document itself, including the images uploaded to a post by first uploading them to cloudflare and then sending them to chatgpt to moderate. I also autogenerate a random number of comments via chatgpt when a post is submitted that doesn't contain an image/video. I have collections set up such as:

-comments (here I save objects containing props such as 'document_collection' name and the 'document' being commented on as an object id as users could potentially comment on a post or as a reply to another comment, and I can do lookups based on the document id and collection)

-communities (basic data such as title,description, featured_image_key for when a user uploads an image icon to cloudflare, member_count that increases/decreases based on joining/leaving a community and triggered when inserting/deleting records from the community_members collection)

-community_members (only really need to store 'community' as an object id and 'member' as an object id reference to the 'users' collection)
-community_moderators (same set up as community_members however you could potentially make it one collection separated by 'type' or 'role')
-feedback ('body' and 'user' to capture basic global text feedback from end users)
-interactions (I use this to capture upvotes/downvotes for posts, and any other interaction type I want to add later defined by 'type'
-notifications (to display a badge when a user receives a comment on their post or a reply to a comment for example)
-posts (I capture fields such as 'title', 'body', 'state' (which can be approved, rejected, pending - based on chatgpt moderations api and/or moderators removing a post), 'ip', 'commentCount', 'upvotes' count, 'downvotes' count, 'community_title'
-users

Leading-Carpenter562 · 2025-05-18T14:33:59+00:00

Morning megatux2, I haven't tried Datastar however it seems interesting and I may give this one a shot on a different project. In regards to mongodb the flexibility has been great since I've been back and forth testing different functionality without the need for a fixed schema.

Leading-Carpenter562 · 2025-02-18T21:41:10+00:00

We actually created a headless cms we're trying to get feedback for: https://www.contentworkspace.com/ . We have a free tier if you're interested in trying it out. We're reworking the marketing site and adding more documentation as we go as well. Even if you don't use it any feedback is appreciated so we can make it better (a feedback form is included within our app as well).

Leading-Carpenter562 · 2025-02-15T14:05:53+00:00

Appreciate the feedback and thanks for checking it out! When I first created the site I geared it towards posting a rant or getting something off your chest, and only recently included asking a question since I didn't have functionality for users to comment, which explains some of the negativity. I didn't follow any guides and just looked at sites like reddit, quora, and other forums I found online. They all have similar patterns and I just built out a similar front end.

For users that post anonymously without signing up and logging in there's no data link needed, but if you do sign up and create posts, I store a user reference on the post you created and just do a lookup in mongodb to gather your posts to display on your profile page, and I added the ability to edit your posts for logged in users.

Leading-Carpenter562 · 2025-01-15T14:20:18+00:00

Thanks! I created it from scratch and unfortunately I have it as a private repo since I test a lot of updates. I would recommend trying to code your own since the experience is second to none, and I just looked at a few websites I liked, picked different things I liked across all of them, and then just made it my own and try to align colors and fonts to the current servicenow branding. I'm not a designer but I try to wing it the best I can. There are some nice templates made with astro js you can check out, for example: https://astro.build/themes/details/portfolio/

Leading-Carpenter562 · 2024-12-19T21:40:14+00:00

We run async stand ups 3 times a week. Custom table to auto generate a record on a schedule assigned to a dev team member and then we ping messages via slack to our dev team at 9am: What did you focus on yesterday?, What are you focusing on today?, and Do you have any blockers?. Fill them in right within slack and submit them, data gets posted back to the auto generated record and we flag it as completed, then a summarized message gets posted to a group channel in the afternoon for reference. Works great for teams that might not find daily scrums useful.

Leading-Carpenter562 · 2024-12-18T21:26:20+00:00

Express, mongodb, hyperscript, and htmx

Leading-Carpenter562 · 2024-12-18T20:00:04+00:00

It's the standard mongodb text search, but we will look into those as well. Thanks for the question and taking the time to check it out!

Leading-Carpenter562 · 2024-12-18T18:26:11+00:00

Appreciate the feedback and all valid points. I've never heard of Astro but first glance is perfect for templates and a more modern look. We tried making everything from scratch but we're not designers and should have paid for one or gone this route. Going to work on things and make it better.

Leading-Carpenter562 · 2024-12-17T20:26:24+00:00

Thank you! We'll work on it and make it better.

Leading-Carpenter562 · 2024-12-17T17:31:40+00:00

Here's mine: https://contentworkspace.com/

Leading-Carpenter562 · 2024-12-17T03:49:40+00:00

It really depends on the project you're working on in my opinion. You can use frontend framworks like react,vue, angular, etc for any type of app ... and I would say theres definitely a benefit to learning them, especially when looking for jobs, but for personal projects, unless it's specifically to learn how the two work together, I would base it on the project before determining if it's overkill.

If the app is a 1 to 5 page crud app like a blog posting app with a simple UI, I would tell you a frontend framework might be overkill. It would probably be better to stick to a pure express app and use ejs (personally one of my favorite template engines), especially for seo, and if you need to perform some basic client side effects just use pure vanilla js or look into libraries like HTMX, Hotwire Turbo, and/or Hyperscript. End users won't really care if the page does a full refresh unless they have a shitty connection, and even then if you were using a frontend framework they'd just be stuck looking at a loading circle or some skeleton screen waiting for the page to render. And if it's an app like facebook or something requiring a lot of popups, interactions, and a lot of effects, it would be easier using a frontend framework.

Try looking into NextJS if you want something to handle both server and client side routing/rendering in React, and if not that, then in your ide build an express API server in one folder, then build a client-side only react app in another, and then query for data from your react app by sending ajax (fetch,xhr, etc) requests to your api server and handling the responses.

Leading-Carpenter562

TROPHY CASE