Hello everyone! In anticipation of the new 2025, I have collected 10 super useful projects that will help you in developing your programs. Moreover, they are useful not only for JavaScript, but also for other languages and development areas in general. I hope you will find it interesting!
1. HMPL - Server-oriented customizable templating for JavaScript
HMPL is a small template language for displaying UI from server to client. It is based on customizable requests sent to the server via fetch and processed into ready-made HTML. The language is syntactically object-based and integrated with JSON5. Reduce the size of your javascript files and display the same UI as if it was written in a modern framework.
This module can be useful to you in:
Reducing size: Creating web applications with the same interface as if they were written on modern frameworks, but with a significantly smaller bundle size, which will allow you to load sites faster.
Building server: Building a server-oriented application structure that is almost independent of the client. This will allow you to share components across multiple sites without using the Microfrontend methodology and generally not depend on files on the server (in repositories, for example).
Easy to integrate:Unlike similar ones, this module is easily integrated into other web applications, and also has extensive customization, which will allow you to send requests to the server not pre-prepared by the module, but completely custom, with the use of fetch!
An example of how the module works is this code, where we create a clicker that displays data from the server:
import hmpl from "hmpl-js";
const templateFn = hmpl.compile(
`<div>
<button data-action="increment" id="btn">Click!</button>
<div>Clicks: {{ src: "/api/clicks", after: "click:#btn" }}</div>
</div>`
);
const clicker = templateFn(({ request: { event } }) => ({
body: JSON.stringify({ action: event.target.getAttribute("data-action") }),
})).response;
document.querySelector("#app").append(clicker);
Here, we compile the extended html markup into a ready-made object that will store the DOM node containing our clicker. By clicking on the button, we send a POST request, which stores an action such as increment in the body. Depending on this, it will just give you a number in response.
2. Deno - A Secure Runtime for JavaScript and TypeScript
Deno is a secure runtime for JavaScript and TypeScript, offering a modern take on server-side JavaScript. Built by the creator of Node.js, Deno prioritizes security, simplicity, and developer experience.
Use Cases:
- Secure scripting: Built-in permissions to control file, network, and environment access.
- Simplified development: Includes TypeScript out of the box.
- Enhanced tooling: Integrated utilities like a formatter, linter, and bundler.
An example of how the module works is this code, where we create a basic HTTP server that responds with a JSON message:
const handler = async (req) => {
const body = { message: "Hello, Deno!" };
return new Response(JSON.stringify(body), { headers: { "Content-Type": "application/json" } });
};
addEventListener("fetch", (event) => event.respondWith(handler(event.request)));
Here, the handler function processes incoming HTTP requests, generating a JSON response. The global fetch event listener ensures that all incoming requests are directed to this handler, enabling a simple server in Deno.
3. Autoprefixer - Automatic CSS Vendor Prefixing
Autoprefixer automatically adds vendor prefixes to your CSS, ensuring compatibility with various browsers without manual effort.
Use Cases:
- Cross-browser compatibility: Add prefixes for legacy browsers.
- Streamlined CSS management: Integrate with PostCSS or other build tools.
An example of how the module works is this code, where we transform CSS into browser-compatible prefixed CSS:
const postcss = require("postcss");
const autoprefixer = require("autoprefixer");
const css = "a { display: flex; }";
postcss([autoprefixer])
.process(css, { from: undefined })
.then((result) => {
console.log(result.css);
});
Here, the code uses PostCSS with Autoprefixer to transform a { display: flex; } into a CSS rule with browser-specific prefixes (like -webkit-). The processed CSS is then printed to the console.
4. Appwrite - Backend as a Service for Modern Apps
Appwrite is a self-hosted backend-as-a-service (BaaS) platform designed for mobile, web, and server-side applications. It provides APIs for authentication, databases, cloud functions, and more.
Use Cases:
- Backend management: Quickly set up authentication and databases.
- Cross-platform apps: Build apps for web and mobile with ease.
An example of how the module works is this code, where we initialize an Appwrite client and interact with its database:
const { Client, Databases } = require("appwrite");
const client = new Client()
.setEndpoint("https://[HOSTNAME_OR_IP]/v1")
.setProject("projectID");
const databases = new Databases(client);
databases.listDocuments("collectionID").then(
(response) => console.log(response),
(error) => console.error(error)
);
Here, the Client is initialized with the Appwrite server’s endpoint and project ID. Then, the listDocuments method retrieves documents from a specific collection and logs the results.
5. Postiz - The ultimate social media scheduling tool, with a bunch of AI
Postiz is an open-source social media scheduling tool designed to streamline content management across various platforms.
Use Cases
AI-Powered Scheduling: Utilizes artificial intelligence to optimize post timing for maximum engagement.
Multi-Platform Support: Manage and schedule posts across multiple social media channels from a single dashboard.
Analytics and Insights: Provides performance metrics to help refine social media strategies.
Collaborative Tools: Allows team members to collaborate, comment, and schedule posts together.
An example of how the module works is this code, where we configure a docker-compose.yml file to self-host a Postiz instance. It defines the services required, such as Postiz, PostgreSQL, and Redis, for a fully functional deployment:
services:
postiz:
image: ghcr.io/gitroomhq/postiz-app:latest
container_name: postiz
restart: always
environment:
MAIN_URL: "https://postiz.your-server.com"
FRONTEND_URL: "https://postiz.your-server.com"
NEXT_PUBLIC_BACKEND_URL: "https://postiz.your-server.com/api"
JWT_SECRET: "random string that is unique to every install - just type random characters here!"
DATABASE_URL: "postgresql://postiz-user:postiz-password@postiz-postgres:5432/postiz-db-local"
REDIS_URL: "redis://postiz-redis:6379"
BACKEND_INTERNAL_URL: "http://localhost:3000"
IS_GENERAL: "true"
STORAGE_PROVIDER: "local"
UPLOAD_DIRECTORY: "/uploads"
NEXT_PUBLIC_UPLOAD_DIRECTORY: "/uploads"
volumes:
- postiz-config:/config/
- postiz-uploads:/uploads/
ports:
- 5000:5000
networks:
- postiz-network
depends_on:
postiz-postgres:
condition: service_healthy
postiz-redis:
condition: service_healthy
postiz-postgres:
image: postgres:17-alpine
container_name: postiz-postgres
restart: always
environment:
POSTGRES_PASSWORD: postiz-password
POSTGRES_USER: postiz-user
POSTGRES_DB: postiz-db-local
volumes:
- postgres-volume:/var/lib/postgresql/data
networks:
- postiz-network
healthcheck:
test: pg_isready -U postiz-user -d postiz-db-local
interval: 10s
timeout: 3s
retries: 3
postiz-redis:
image: redis:7.2
container_name: postiz-redis
restart: always
healthcheck:
test: redis-cli ping
interval: 10s
timeout: 3s
retries: 3
volumes:
- postiz-redis-data:/data
networks:
- postiz-network
volumes:
postgres-volume:
external: false
postiz-redis-data:
external: false
postiz-config:
external: false
postiz-uploads:
external: false
networks:
postiz-network:
external: false
An example of how the module works is this configuration file, which sets up a self-hosted Postiz environment using Docker. The docker-compose.yml file defines services like PostgreSQL and Redis for storage and caching, along with the Postiz application, ensuring a seamless deployment process.
6. Godot - Open-Source Game Engine
Godot is a powerful and versatile open-source game engine that allows developers to create 2D and 3D games with ease. Its lightweight design, built-in scripting language (GDScript), and cross-platform capabilities make it a favorite among indie developers and studios alike.
Use Cases
Creating 2D and 3D Games: Provides dedicated tools and workflows for both 2D and 3D game development, allowing developers to focus on creative aspects rather than technical overhead.
Cross-Platform Game Deployment: Easily export games to multiple platforms, including PC, mobile, and consoles, with minimal configuration.
Customizing with Open Source: Modify the engine to suit specific project requirements, thanks to its permissive MIT license and open-source nature.
Rapid Prototyping: Use GDScript or C# for quick iteration and testing of game mechanics, reducing development time.
An example of how the engine works is this code, where we create a simple character movement script in GDScript:
# Player.gd - A simple script to control player movement
extends KinematicBody2D
var speed = 200 # Movement speed
func _physics_process(delta):
var velocity = Vector2.ZERO
if Input.is_action_pressed("ui_right"):
velocity.x += 1
if Input.is_action_pressed("ui_left"):
velocity.x -= 1
if Input.is_action_pressed("ui_down"):
velocity.y += 1
if Input.is_action_pressed("ui_up"):
velocity.y -= 1
velocity = velocity.normalized() * speed
move_and_slide(velocity)
An example of how the module works is this code, where we define a simple movement system for a 2D character. This script handles keyboard input to move the character in four directions using Godot's built-in physics engine.
7. Turborepo - High-performance Build System for Monorepos
Turborepo is a build system optimized for managing monorepos. It ensures efficient builds and caching across projects.
Use Cases:
- Monorepo builds: Manage large codebases with optimized builds.
- Scalable workflows: Accelerate build processes in CI/CD pipelines.
An example of how the module works is this code, where we define a basic pipeline configuration for a monorepo:
{
"pipeline": {
"build": {
"dependsOn": ["^build"],
"outputs": ["dist/**"]
}
}
}
Here, the pipeline configuration defines how the build task depends on other projects’ builds and specifies its output files, ensuring efficient dependency management in a monorepo setup.
8. Medusa - Open-source Headless Commerce Platform
Medusa is an open-source headless commerce platform designed for developers. It provides a customizable and scalable foundation for building e-commerce solutions.
Use Cases:
- E-commerce solutions: Quickly develop headless commerce platforms.
- Modular architecture: Extend and customize core features.
An example of how the module works is this code, where we set up a product in Medusa using its API:
const axios = require("axios");
axios.post(
"http://localhost:9000/admin/products",
{
title: "Sample Product",
description: "This is a sample product.",
price: 1000,
},
{
headers: { Authorization: "Bearer your_token" },
}
).then(
(response) => console.log(response.data),
(error) => console.error(error)
);
Here, the script uses Axios to send a POST request to the Medusa API, adding a new product with a title, description, and price.
9. Nx - Extensible Build Framework for Monorepos
Nx is a smart, extensible build framework designed to manage monorepos with ease. It supports multiple front-end and back-end frameworks.
Use Cases:
- Large projects: Manage and build multiple apps and libraries within a single monorepo.
- Optimized builds: Speed up builds with advanced caching.
An example of how the module works is this code, where we create a new Nx workspace and generate a React application:
npx create-nx-workspace@latest myworkspace
cd myworkspace
nx generate @nrwl/react:application myapp
Here, the command initializes a new Nx workspace, and the generate command scaffolds a React application within it.
10. Storybook - UI Component Explorer
Storybook is an open-source tool that allows developers to build, test, and showcase UI components in isolation. This makes it easier to focus on individual elements of the UI without the need for a complete application context. Storybook supports most modern front-end frameworks, including React, Angular, and Vue, and integrates seamlessly with design systems and CI/CD pipelines.
Use Cases
- Component Isolation: Develop and test UI components without dependency on the app’s context.
- Live Documentation: Automatically generate a living style guide for your project.
- Custom Add-ons: Leverage a wide range of plugins to enhance your workflow.
- Collaboration: Share component libraries with your team for feedback and faster iteration.
An example of how the module works is this code, where we create a simple story for a button component:
// Button.stories.js
import React from 'react';
import { Button } from './Button';
// This is a default export for Storybook to identify the component.
export default {
title: 'Example/Button',
component: Button,
};
// Define a template for rendering the button in different states.
const Template = (args) => <Button {...args} />;
// Export specific stories with different props.
export const Primary = Template.bind({});
Primary.args = {
primary: true,
label: 'Primary Button',
};
export const Secondary = Template.bind({});
Secondary.args = {
label: 'Secondary Button',
};
In this example, we define a story for a Button component. Each story (e.g., Primary, Secondary) represents a different state or variation of the button, allowing developers to preview how it looks and behaves in isolation.
If you liked the list, don't forget to put an emotion and add it to the reading list! 🔥
Thanks for reading!
Top comments (1)
Happy holidays and a happy new year to all!