raminy.dev...

Ramin Yavari

A Scalable Strategy for Migrating Legacy Front-Ends to Next.js

This article offers a practical roadmap for gradually migrating a legacy front-end app to Next.js without disrupting product development. It emphasizes phased adoption using reverse proxies, shared component libraries, and clear ownership models to ensure stability and scalability. A proof of concept is recommended to validate routing, auth, state management, and developer workflows—enabling teams to modernize confidently while maintaining momentum.

updated on 9 August 2025

Designing a Scalable Architecture for Next.js Applications

Front-End Next.js React Typescript Architecture Component Library Docker

Scaling a Next.js application requires more than just writing good code—it demands a modular, future-proof architecture. This article introduces a three-layer monorepo structure that separates applications, shared packages, and self-contained features. The result is a system that supports team autonomy, reduces duplication, simplifies deployments, and stays maintainable as complexity grows. Whether you're starting fresh or evolving an existing codebase, this approach offers a clear path to building scalable, high-performing front-end systems.

updated on 2 August 2025

Introducing @raminy/css-config: Prebuilt Theming for Tailwind CSS v4

Front-End Tailwind CSS

A powerful theming layer for Tailwind CSS v4 that supports multiple themes, dark mode, and semantic color tokens out of the box. Define themes in SCSS or generate them from a single color, apply them via ‘data-’ attributes, and customize or extend them with minimal setup. All tokens map directly to Tailwind utilities—so switching themes or modes updates your UI automatically.

updated on 20 July 2025

Type-Safe i18n in Next.js: A Complete Guide

Next.js React Typescript JavaScript Front-End

This article walks through building a fully type-safe internationalization setup in a Next.js 15 app using next-intl. It covers organizing translations into feature-based namespaces, generating type declarations from the default locale, and enforcing type safety with tools like ICU MessageFormat. The setup includes automatic locale detection, developer-friendly features like inline translation previews via the i18n-ally extension, and a script to keep translation keys sorted. The goal is to reduce human error, enhance the developer experience, and ensure robust multilingual support with minimal friction.

updated on 4 June 2025

How to Add Type-Safety to Your Translations

Typescript JavaScript Front-End Ember.js

The guide shows how to add type safety to internationalization in projects without built-in solutions like next-intl . It covers generating TypeScript types from YAML or JSON translation files, integrating a build script to keep types up to date, and setting up file watchers or bundler plugins for automation. It also includes defining a typed t function to catch translation key errors at compile time.

updated on 4 June 2025

Supercharge Your TypeScript AWS Lambda Functions with @raminy/ajv-ts-schema & @middy

Typescript Lambda AWS API Gateway AppSync GraphQL

This article discusses implementing a middleware-based workflow for AWS Lambda functions using TypeScript to improve maintainability and scalability. It highlights the benefits of TypeScript for AWS Lambda, such as type safety and reduced errors, and emphasizes the importance of schema validation for data integrity. The article explores three approaches: a basic Lambda, a Lambda with @middy, and one enhanced with @raminy/ajv-ts-schema for schema validation. It also addresses the drawbacks of manual validation, like tediousness and error-proneness. By using middleware and schema validation, Lambda functions focus on business logic, offloading validation to reusable components.

updated on 8 July 2025

Simplifying AJV Schema Validation with TypeScript

Typescript Projects

@raminy/ajv-ts-schema is an npm package that enhances AJV, a library for JSON Schema validation, by simplifying schema definitions in TypeScript. It uses decorators to define schemas in a fully typed and developer-friendly way, offering features like code completion, type safety, and reusable schema definitions.

updated on 8 July 2025

🛡️

RSA Encryption for Secure Front-End to Back-End Data Transmission

Back-End Front-End Software Security C#JavaScript Typescript

This article explains how RSA encryption adds an extra layer of security to sensitive data beyond HTTPS. While HTTPS protects data in transit, RSA encryption helps guard against risks like MITM attacks, compliance issues, and replay attacks. The process involves the back-end generating RSA key pairs, sending the public key to the front-end, and the front-end encrypting data before sending it back for decryption. By securely managing keys with cache expiration, RSA ensures sensitive data remains protected throughout communication.

updated on 23 January 2025

Advanced Typescript: Creating a Union Type from a Taxonomy

Typescript Front-End

The article discusses creating a union type in Typescript from a product taxonomy. It outlines a solution to infer unique keys directly from the taxonomy structure, thereby reducing potential errors and simplifying data management. The document includes code examples demonstrating how to traverse the taxonomy and generate a union type using Typescript's advanced features.

updated on 10 November 2024

What’s the Ember equivalent of a React Ref?

Front-End React Ember.js Typescript

In Ember.js, instead of using React's refs, the “did-insert” modifier provides access to native HTML elements. To achieve similar functionality as React 's “useImperativeHandle”, you can pass a “ref” argument to a child component and call it in the constructor, allowing the parent component to access public methods of the child. This approach ensures controlled exposure of methods and properties, maintaining encapsulation.

updated on 25 October 2024

👨🏻‍💻

Equinox Ventures: Editor.js Plugins

Projects Component Library Career Tailwind CSS SASS Modules JavaScript Typescript Front-End

Ramin completed a short-term contract at Equinox Ventures, developing 30 front-end components and Editor.js plugins, averaging nearly one component per day. The framework-agnostic library was built with TypeScript, Vite, TailwindCSS, and SASS Modules, and included complex elements like charts and tables. Feedback from team leaders praised Ramin's quick turnaround, technical expertise, and collaborative nature, highlighting his value as a front-end developer.

updated on 23 January 2025

CliqMind

Projects Full-Stack Back-End Front-End Leadership C#Java Spring Boot JavaScript Node.js Typescript React Next.js

CliqMind is a team productivity tool developed from RaaiVan, designed for small teams and enterprises. It features a cloud-friendly architecture with microservices, including authentication, account management, and a search engine, utilizing technologies like Java Spring Boot, PostgreSQL, and React. The project emphasizes collaboration through templates, a social space, and a wiki, while also employing CI/CD practices with Jenkins and Docker for deployment.

updated on 10 August 2024

Easy HTML to PDF Converter

Java Spring Boot OpenAPI Docker Back-End Projects

The project is a refactor of an HTML to PDF converter using Java and Spring Boot, upgraded from Spring Boot 2 to 3 and Java 11 to 22. Key enhancements include adding an OpenAPI UI, updating security configurations, and implementing a Docker image. The application uses headless Chromium for PDF conversion and incorporates features like cover pages, headers, footers, and password protection.

updated on 1 August 2024

🧑🏻

Build Your Personal Website in Minutes with Raminy.dev's Docker Image

Integration Docker Next.js Front-End OAuth2 REST API Projects

Raminy.dev offers a Docker image that allows users to quickly and easily build their personal websites. The process involves creating a Notion account, setting up a Notion integration, initializing the website using Raminy.dev's magic tool, associating the integration with the created databases, creating a Railway account, and deploying Raminy.dev's Docker image on Railway. Optional steps include associating a personal domain with the Railway deployment. Once deployed, the website is ready to browse.

updated on 11 August 2024

🧑🏻‍💻

My Journey at IE: Front-End Engineering for Toyota

Career Front-End React Angular Component Library Azure DevOps CI/CD JavaScript Typescript Sitecore Next.js GraphQL

During their tenure at IE, the author worked as a Senior Front-End Developer on the Toyota website team. They contributed to the development and maintenance of the ToyotaKit component library, implemented OCR functionality using Azure Cognitive Services, and worked on various features for the Toyota.com.au website. They also provided mentorship to junior and mid-level engineers and received recognition for their technical expertise and collaborative spirit.

updated on 10 August 2024

🌐

raminy.dev - Build a Personal Website in One Day at No Cost!

Projects Next.js Vercel Integration Typescript React SASS Modules Tailwind CSS Front-End Styled Components

This blog post discusses the process of building a personal website at no cost using Next.js, Vercel, and Notion. The author shares their challenges, solution, and technical aspects of the project, including the choice of Next.js over React for better SEO, the routing mechanism, and integration with Notion using the @notionhq/client npm package.

updated on 31 July 2024

RaaiVan: My Greatest Achievement

Projects Front-End Back-End C#T-SQL REST API Database Lucene SignalR Full-Stack Architecture MS SQL

RaaiVan is described as the author's greatest achievement, serving as an Enterprise Knowledge Management and Document/Content Management System. Its flexibility, performance, and extensive features have made it a valuable tool for many enterprise customers. The author played a key role in its design, development, and deployment, and was involved in negotiating with customers and understanding their requirements. The author also shares their journey with RaaiVan, their full-stack software development approach, and highlights key modules and features such as the Form Builder, Workflow Engine, Wiki, Search Engine, and additional modules like Social Network, Core Network, Q&A, and Poll.

updated on 31 July 2024