DEV Community: Nicolas

Script Correct AI Text Corrector

Nicolas — Mon, 20 Jan 2025 13:55:38 +0000

ScriptCorrect: A Smart Local Text Editor with AI-Powered Style Adaptation

In today’s digital world, writing effectively isn’t just about correct grammar and spelling — it’s about adapting your tone and style to different contexts. Whether you’re crafting a formal business proposal, writing an academic paper, or composing a casual email, each context demands a different writing style.

Introducing ScriptCorrect

ScriptCorrect is an open-source desktop application that goes beyond traditional spell-checking. Built with privacy in mind, it leverages the power of local AI through Ollama to provide intelligent text correction and style adaptation, all while keeping your data on your machine.

Key Features

Style Adaptation

What sets ScriptCorrect apart is its ability to adapt text to different writing styles. With just one click, you can transform your text to match several preset styles:

Academic: Perfect for scholarly papers and research
Business: Crisp and professional
Journalistic: Clear and engaging
Technical: Precise and detailed
Casual: Friendly and approachable

Privacy-First Approach

Unlike cloud-based alternatives, ScriptCorrect runs entirely on your local machine using Ollama. This means your sensitive documents never leave your computer, providing complete privacy and security.

Modern Technical Stack

The application is built with modern technologies:

Tauri for a lightweight, secure desktop application
Vue.js 3 for a reactive and efficient user interface
Tailwind CSS for a clean, responsive design

Smart Feedback

Beyond simple corrections, ScriptCorrect provides:

Quality scores for your text
Specific improvement suggestions
Detailed correction explanations
Style enhancement recommendations

The Development Story

ScriptCorrect was born from a simple observation: existing text editors either focus solely on corrections or require sending sensitive data to cloud services. We wanted to create a tool that respects privacy while providing advanced writing assistance.

Looking Forward

While ScriptCorrect is already a powerful tool, we’re continuously working on improvements:

Additional writing styles

Custom style definitions
Enhanced correction algorithms
Expanded language support
Try It Yourself
ScriptCorrect is open-source and available for Windows, macOS, and Linux. You can find the project on GitHub and contribute to its development.

https://github.com/Tagada216/ScriptCorrect

Conclusion

In an era where effective written communication is crucial, tools like ScriptCorrect help bridge the gap between correct writing and appropriate styling. By combining local AI processing with intuitive design, it offers a unique solution for modern writing needs.

This project represents a step forward in making advanced text processing accessible while respecting user privacy. Whether you’re a student, professional, or writer, ScriptCorrect aims to be your intelligent writing companion.

Vue JS 3 Boilerplate

Nicolas — Mon, 20 Jan 2025 13:49:59 +0000

Every Vue.js developer knows the drill: starting a new project means spending hours configuring the build system, setting up routing, state management, and styling solutions. What if you could skip all that and jump straight into building your application? That’s exactly what our Vue 3 Boilerplate offers.

The Challenge of Modern Web Development

In today’s fast-paced development environment, getting a project off the ground quickly while maintaining best practices and incorporating essential tools is crucial. Many developers face the challenge of balancing rapid development with proper architecture and tooling setup.

Enter Vue 3 Boilerplate

Our Vue 3 Boilerplate is designed to eliminate these initial hurdles by providing a carefully curated, production-ready foundation for your next Vue.js project. Built with modern development workflows in mind, it combines the latest tools and practices in the Vue.js ecosystem.

Core Features That Matter

The boilerplate comes packed with essential features that modern web applications demand:

1. Vue 3 at Its Core

Leveraging the latest version of Vue.js, you get access to the Composition API, better TypeScript support, and improved performance out of the box. The setup is optimized for development with Vue 3’s new features while maintaining compatibility with traditional development patterns.

2. Lightning-Fast Development with Vite

Built on top of Vite, the boilerplate offers an incredibly fast development experience. Hot module replacement (HMR) works seamlessly, and the build times are significantly reduced compared to traditional bundlers.

3. State Management Made Simple

Pinia, the official state management solution for Vue 3, comes pre-configured. Its intuitive API and excellent TypeScript support make managing application state a breeze, whether you’re building a small application or a large-scale system.

4. Robust Routing Solution

Vue Router is integrated and configured, allowing you to start building multi-page applications immediately. The routing setup includes examples of basic configurations while remaining flexible enough for complex routing scenarios.

5. Modern Styling with Tailwind CSS

Tailwind CSS integration provides a utility-first CSS framework that makes designing responsive and maintainable user interfaces straightforward. The configuration is optimized for production, ensuring minimal CSS bundle sizes.

6. Security First

Integration with Vue ReCaptcha 3 demonstrates our commitment to security, helping you protect your forms and sensitive actions from the start.

Getting Started

The beauty of this boilerplate lies in its simplicity. Getting started is as easy as:

# Clone the repository
git clone [your-repository-url]

# Install dependencies
npm install

# Start development server
npm run dev

Development Experience

We’ve paid special attention to the development experience, recommending VSCode with Volar for the best possible TypeScript integration. The boilerplate includes:

Proper TypeScript configuration for .vue files
Unit testing setup with Vitest
Hot module replacement for rapid development
Production build optimization

Looking Forward

This isn’t just a static template. The boilerplate is actively maintained and regularly updated with new features and improvements. We’re committed to keeping it aligned with the latest best practices and tools in the Vue.js ecosystem.

Customization and Flexibility

While the boilerplate provides a solid foundation, it’s designed to be flexible. Every aspect can be customized according to your project’s needs:

Build configuration through Vite
Tailwind CSS theming
Routing structure
State management patterns
Testing methodologies

Conclusion

Starting a new Vue 3 project shouldn’t mean reinventing the wheel. Our boilerplate provides a solid foundation that lets you focus on what matters most: building your application. Whether you’re creating a small prototype or launching a large-scale application, this boilerplate gives you the tools and structure needed for success.

The combination of Vue 3, Vite, Pinia, and other modern tools creates a development environment that’s both powerful and enjoyable to work with. We invite you to try it out and experience the difference a well-structured boilerplate can make in your development workflow.

Remember, this is just the beginning. As the Vue ecosystem evolves, so will this boilerplate. Stay tuned for regular updates and new features that will continue to enhance your development experience.

— -

Ready to get started? Check out the repository and give it a star if you find it useful. Your feedback and contributions are always welcome!
https://github.com/Tagada216/vue_3_boilerplate

Clean Architecture for the Front-End

Nicolas — Fri, 05 Apr 2024 13:50:26 +0000

🧽 Clean Architecture: Revolutionizing the Front-End

Description: Discover how Clean Architecture can transform and optimize front-end development.

Introduction:

In an increasingly complex computing world, structuring your code effectively is crucial. It relies on the clear separation of an application's components, facilitating testing and reducing dependence on external tools. In this article, we will explore how Clean Architecture can transform your projects by examining its principles, structure, benefits, and its application to a front-end project.

What is Clean Architecture?

Conceived by Robert C. Martin, this software design philosophy places the business concerns of the application at the center of attention. It organizes the code into concentric layers, each with a specific and independent role.

Source : https://miro.medium.com/

Clean Architecture - Divide and Conquer

The primary goal of Clean Architecture is the separation of code into different layers, each with its own responsibility.

Here are the elements that make up this methodical structure:

Entities: Also called the Domain, these are the central elements representing the business logic and rules of the application, independent and can be used by all layers of the application.

Use Cases: They encapsulate all the specific business logic of the application and orchestrate the flow of data between the entities and the outer layers.

Interface Adapters: Also called controllers, presenters, or gateways, they convert data between the formats appropriate for the use cases and entities.

User Interfaces (UIs) and Frameworks & Drivers: They manage interactions with external elements like user interfaces, databases, and external systems.

Adapting to the Front-End

By adapting Clean Architecture to front-end development, we clarify the structure of the code. Entities define data models and business rules, use cases manage user interactions, interface adapters take care of the connection between the UI and the data, and the outer layer interacts with frameworks and external services. This well-defined organization facilitates the maintenance and evolution of front-end applications. Next, let's discover how this approach brings significant benefits to front-end development.

Clean Architecture on the Front-End

The Benefits

The benefits of Clean Architecture for the front-end are similar or identical to those for a back-end application.

Framework Independence: Frameworks are then used as tools rather than the other way around.
UI Independence: The architecture does not depend on the user interface.
Database Independence: It remains unattached to any specific database.
Granularity of Tests: It is easy to precisely target a layer/component for testing.

Thanks to this flexibility and increased maintainability, Clean Architecture is a very good choice for large-scale front-end applications.

Implementing this type of architecture indeed incurs a higher cost at the beginning of the project, but the advantages of the method allow for quickly saving time in the future.

Preparation for Implementation

On the back-end side, business rules are fairly straightforward and often intuitive, representing the product's functionalities (creating an account, booking a book, making a payment, etc.). On the front-end side, it's not as evident because the domain (Entities) consists of display rules and the rendering behavior by a browser. Moreover, nothing is defined or conventionalized for the application of Clean Architecture on the Frontend: everything is modular and adaptable according to needs. A small application can very well use only two layers, such as the entities and the outermost layer.

Let's take an example with a task management app. A user has expressed a need, which is translated by our Product Owner into a set of rules that define the steps when the user uses the application.

1. Task Selection: When a user clicks on a task to select it:

If the task is already selected, it should be deselected.
Otherwise, it is marked as selected.

2. Task Categorization:

If a task is categorized as "to do immediately," it moves to the top of the list.
If the task is marked "to do later," it is placed in a separate section.

3. Sub-task Management:

If a main task is selected, all its associated sub-tasks appear.
The user can select or deselect individual sub-tasks.
If a main task is deselected, all its sub-tasks are also deselected.

If you're observant, you can already discern a simple description of an algorithm taking shape. That is the domain.

In Practice

Let's revisit a simple task management application.

Here is the structure of our application:

If we apply the Clean Architecture model, here is what it would look like:

Let's proceed step by step, starting from the center of our architecture by defining our entity Task.ts



interface TaskData {
  id: string;
  title: string;
  description: string;
  completed?: boolean;
}

class Task {
  id: string;
  title: string;
  description: string;
  completed: boolean;

  constructor({ id, title, description, completed = false }: TaskData) {
    this.id = id;
    this.title = title;
    this.description = description;
    this.completed = completed;
  }
}

Next, let's add an adapter that allows us to use our entity. This adapter is very similar to services in a more conventional architecture.



import axios from "axios";
import Task from "../entities/Task";

const TaskService = {
  async fetchTasks() {
    try {
      const response = await axios.get("https://your-api-endpoint.com/tasks");
      return response.data.map((taskData: Task) => new Task(taskData));
    } catch (error) {
      console.error("Error fetching tasks:", error);
      throw error;
    }
  },
  async addTask(taskData) {
    try {
      const response = await axios.post('https://your-api-endpoint.com/tasks', taskData);
      return new Task(response.data);
    } catch (error) {
      console.error('Error adding task:', error);
      throw error;
    }
  },
};

export default TaskService;

Between these two elements, we also need a use case that establishes the link between the entity and the adapter.



// ManageTasks.ts
import Task from '../entities/Task';
import TaskService from '../adapters/TaskService';

class ManageTasks {
  async addTask(taskData: Task): Promise<Task> {
    try {
      return await TaskService.addTask(taskData);
    } catch (error) {
      console.error('Error adding task:', error);
      throw error;
    }
  }

  async fetchAllTasks(): Promise<Task[]> {
    try {
      return await TaskService.fetchAllTasks();
    } catch (error) {
      console.error('Error fetching tasks:', error);
      throw error;
    }
  }
}

export default new ManageTasks();

This allows us, finally, to add this logic into the Task List component, which acts as an adapter facilitating the connection between our internal layers and the Vue framework.



<template>
  <div>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        {{ task.title }}
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import ManageTasks from "@/use_cases/ManageTasks";
import Task from "@/entities/Task";

onMounted(() => {
  loadTasks();
});

const tasks = ref<Task[]>([]);

async function loadTasks() {
  try {
    tasks.value = await ManageTasks.fetchAllTasks();
  } catch (error) {
    console.error("Failed to load tasks:", error);
  }
}
</script>

Conclusion

The use of Clean Architecture in the front-end, as demonstrated in this example, highlights its numerous advantages.

Framework-Independent Layers:

Entities: This core layer of the architecture contains business logic and data models. It is completely independent of Vue.js or any other framework, meaning the code here can be reused regardless of the front-end framework.
Use Cases: This layer manages application-specific logic and is also independent of Vue.js. It processes data and interactions without concern for how data is presented or how user inputs are received.

Interface Adapters:

This layer acts as a bridge between the framework-independent layers and Vue.js-specific layers. Here, we find components that link the external and internal layers. By isolating Vue.js-specific interactions in this layer, the rest of the application remains independent of the framework.
Frameworks & Drivers:

The outermost layer interacts directly with Vue.js. This includes Vue components and views, directives, filters, and other framework specifics. By concentrating all Vue.js-specific interactions in this outer layer, you reduce your business logic and use cases' dependency on the framework. This makes your application more flexible and easier to test, maintain, or even migrate to another framework if necessary.

By following this structure, Clean Architecture enables the construction of front-end applications where the choice of framework (in this case, Vue.js) does not influence the business logic or the application's rules, offering greater flexibility and improved testability.

🚀So, are you convinced, ready to take the step in your next front-end projects?

Adonis JS V6 — API REST Boilerplate

Nicolas — Fri, 05 Apr 2024 07:40:05 +0000

Using an AdonisJS 6+ REST API boilerplate

👋 Hello,

After wanting to create a Boilerplate REST API for all my projects, I discovered Adonis JS via Benjamin Code, who had used it for the back-end of his SAAS.

So I decided to create a boilerplate for AdonisJS V6, as there are some very good ones for NestJS.

What is Adonis ?

AdonisJS is a TypeScript-first web framework for building web apps and API servers. It comes with support for testing, modern tooling, an ecosystem of official packages, and more.
More information on this official presentation

Why Adonis ?

The abstraction offered by Adonis means you can quickly create and add new functionality.
For example :

Lucid ORM
Auth
Ally for Social Auth
Mailer for email management
etc…

Adonis also lets you use commands to quickly create files (controllers, services, etc.) or launch migrations.

📋 Features

For the moment, the project contains these functionalities:

Basic authentification email and password
Database configuration (PostgreSQL)
Social authentification (Facebook and Google)
Secure access via JWT Token
Mail service (Active account, reset password)

💻Usage and Installation

You can use the template directly from my repository.

After the installation

All you need to do is add your environment variables to the .env file.
_
I'll be writing more articles later on to talk about what's new and to go into more detail about the features._

DEV Community: Nicolas

Script Correct AI Text Corrector

ScriptCorrect: A Smart Local Text Editor with AI-Powered Style Adaptation

Introducing ScriptCorrect

Key Features

Style Adaptation

Privacy-First Approach

Modern Technical Stack

Smart Feedback

The Development Story

Looking Forward

Additional writing styles

Conclusion

Vue JS 3 Boilerplate

The Challenge of Modern Web Development

Enter Vue 3 Boilerplate

Core Features That Matter

1. Vue 3 at Its Core

2. Lightning-Fast Development with Vite

3. State Management Made Simple

4. Robust Routing Solution

5. Modern Styling with Tailwind CSS

6. Security First

Getting Started

Development Experience

Looking Forward

Customization and Flexibility

Conclusion

Clean Architecture for the Front-End

🧽 Clean Architecture: Revolutionizing the Front-End

What is Clean Architecture?

Clean Architecture - Divide and Conquer

Adapting to the Front-End

Clean Architecture on the Front-End

The Benefits

Preparation for Implementation

In Practice

Conclusion

Adonis JS V6 — API REST Boilerplate

Using an AdonisJS 6+ REST API boilerplate

👋 Hello,

What is Adonis ?

Why Adonis ?

📋 Features

💻Usage and Installation

🎉 Enjoy !