DEV Community: IDURAR AI , Inc | Where Ai Build Software

Easy way to Deploy Node.js MongoDb Backend App for free

Salah Eddine Lalami — Wed, 19 Nov 2025 15:57:42 +0000

Hello,

Today I want to share with you very quick tutorial. If you are developer like me, you know that the deployment can be a headache. We always search for the easiest way to put our code online.

Usually, I use Heroku or Vercel, but last years I moved to DigitalOcean App Platform and it is amazing. It is very fast and professional. Many people think DigitalOcean it expensive, but if you want , you can host your Node.js and MongoDB application for free (using the free credits).

Here is how to make it in just 5 minutes.

What you need before we starting
Before we jump into the console, make sure you have this things ready:

A GitHub account: Your code must be push to a repository for example we will use this open source erp crm based on nodejs react : https://github.com/idurar/idurar-erp-crm

DigitalOcean Account: If you don't have one, you can get $200 free credit for 60 days with this referral link to . This is how you can host it nodejs for free!

Prepare your Node.js code

First, you must ensure your package.json is correct. DigitalOcean App Platform search for the start script to know how to run your server.

Make sure it has engines and scripts like this:

JSON

.... "engines": { "npm": "10.2.4", "node": "20.9.0" }, "scripts": { "start": "node src/server.js", "dev": "nodemon src/server.js --ignore public/", ... }, ...

Also, don't hardcode your port. You should use process.env.PORT in your code so DigitalOcean can assign the port automatically.

Create the App in DigitalOcean

In the left menu, click on App Platform.

Click on the big blue button that say Create App.

Choose GitHub as your source.

You need to give permission to DigitalOcean to access your repositories.

Select the repository which you want to deploy.

Configuration (Important!)

DigitalOcean is smart. It will detect that you use Node.js automatically. However, you need to check few things on the configuration screen:

Environment Variables: This is the most important part!

Because we are not committing our .env file to GitHub (never do that!), you must add your secrets here. Click on Edit next to Environment Variables.

Add your env variables here. Copy connection string from your MongoDB Atlas dashboard and paste it.

Note: Make sure to allowed access from anywhere (0.0.0.0/0) in your MongoDB Atlas network settings, otherwise DigitalOcean cannot connect to database.

Build and Deploy

After you put the variables, click Next.

DigitalOcean will ask about the plan. Since we use the free credits (or if you have static site), you can select the Basic or Starter plan. For Node.js backend, the Basic plan is around $5/month, but with the $200 credit, it is effectively free for long time for testing.

Click Create Resources.

It usually take 2 or 3 minutes to build the container and deploy it.

At the top of screen, there is "Live App" link. This is your public URL. Copy it and test it on Postman or your browser.

I hope this article help you to save time and money. If you have any problem with the connection, let me know in comment section!

IDURAR Open Source React.js Node.js Project to learn from

Salah Eddine Lalami — Wed, 28 Feb 2024 00:03:19 +0000

IDURAR, an open-source ERP/CRM solution that combines robust features with a modern tech stack. Buckle up as we explore the key aspects of this remarkable platform.

GitHub Repo : https://github.com/idurar/idurar-erp-crm

IDURAR: The Fair-Code ERP/CRM

What Is IDURAR?

IDURAR is an innovative Enterprise Resource Planning (ERP) and Customer Relationship Management (CRM) system designed to streamline business processes. It caters to various aspects, including invoice management, inventory control, accounting, and human resources. But what sets it apart? Let's break it down:

Open Source and Fair-Code: IDURAR follows the "fair-code" philosophy, which means it's open source but with certain restrictions. You can use it freely, but modifications must be shared back with the community.
Tech Stack: IDURAR leverages the MERN stack:
- Node.js: For server-side development.
- Express.js: As the web application framework.
- MongoDB: As the NoSQL database.
- React.js: For building dynamic user interfaces.
Ant Design (AntD): The UI/UX is powered by Ant Design, a popular design system that ensures a consistent and visually appealing experience.
Redux: State management becomes seamless with Redux, allowing efficient data flow across components.

Key Features

Let's dive into the core functionalities of IDURAR:

Invoice Management: Create, track, and manage invoices effortlessly. Whether you're billing clients or handling internal transactions, IDURAR has you covered.
Inventory Control: Keep tabs on your inventory items, monitor stock levels, and optimize supply chain operations. From raw materials to finished products, IDURAR helps you stay organized.
Accounting: Handle financial transactions, generate reports, and maintain accurate records. IDURAR simplifies accounting tasks, ensuring compliance and transparency.
Human Resources (HR): Manage employee data, track leaves, handle payroll, and streamline HR processes. IDURAR supports your workforce management needs.

Licensing and Usage

License: IDURAR is distributed under the IDURAR License 1.0, which allows free use for both personal and commercial purposes.
Customization: While you can customize IDURAR for your specific needs, providing it as a SaaS (Software as a Service) to others is restricted.

Getting Started

Ready to explore IDURAR? Here's how:

Clone the Repository: Start by cloning the IDURAR ERP/CRM repository from GitHub.
Set Up MongoDB: Create a MongoDB account and set up your database cluster.
Environment Configuration: Edit the environment file to configure your settings.
Deploy: Update the MongoDB URI and deploy IDURAR.

Join the IDURAR Community

Live App Demo: Check out the live demo to experience IDURAR in action.
Webinar: Interested in deploying IDURAR on the cloud? Attend the weekly free IDURAR Webinar (Node.js React.js course) and learn how to set it up. Fill out the form to participate.

Remember, IDURAR isn't just software; it's a community-driven project. So give it a star on GitHub, fork it, and contribute to its growth. Happy coding! 🚀

Add Localization Translate to React App with redux (without i18next)

Salah Eddine Lalami — Tue, 19 Dec 2023 18:20:39 +0000

How to Add Localization to a React App with Redux and Ant Design (without react-i18next)

GitHub Repo : https://github.com/idurar/idurar-erp-crm

Localization is the process of translating your application into different languages. In this article, we will learn how to add localization support to a React app using Redux and Ant Design, without using react-i18next.

Check Video on youtube :

Step 1: Setup Redux

First, let's set up Redux in our React app. If you haven't already, install the necessary dependencies:

npm install redux react-redux

Next, create a new file called store.js and import the required Redux modules:

import { createStore } from 'redux';
import { Provider } from 'react-redux';

Create a Action function to handle the localization state:

import * as actionTypes from './types';

import languages from '@/locale/languages';

async function fetchTranslation() {
  try {
    let translation = await import('@/locale/translation/translation');
    return translation.default;
  } catch (error) {
    console.error(
      'Error fetching translation file :~ file: actions.js:7 ~ fetchTranslation ~ fetchTranslation:',
      error
    );
  }
}

export const translateAction = {
  resetState: () => (dispatch) => {
    dispatch({
      type: actionTypes.RESET_STATE,
    });
  },
  translate: (value) => async (dispatch) => {
    dispatch({
      type: actionTypes.REQUEST_LOADING,
    });
    const translation = await fetchTranslation();
    let data = await translation[value];

    const isRtl = languages.find((l) => l.value === value).isRtl || false;
    const LANG_STATE = {
      result: data,
      isRtl: isRtl,
      langDirection: isRtl ? 'rtl' : 'ltr',
      langCode: value,
      isLoading: false,
      isSuccess: false,
    };
    window.localStorage.setItem('translate', JSON.stringify(LANG_STATE));
    if (data) {
      dispatch({
        type: actionTypes.REQUEST_SUCCESS,
        payload: data,
        langCode: value,
        isRtl: isRtl,
      });
    } else {
      dispatch({
        type: actionTypes.REQUEST_FAILED,
      });
    }
  },
};

Create the Redux store using the reducer:

const store = createStore(localizationReducer);

Wrap your root component with the Provider component from react-redux, passing the Redux store as a prop:

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Step 2: Install Ant Design

Install Ant Design by running the following command:

npm install antd

Import the necessary components from Ant Design in your desired component:

import { ConfigProvider, Button } from 'antd';
import { useSelector, useDispatch } from 'react-redux';

Configure Ant Design to use the correct locale by adding the following code at the top of your component:

const { locale } = useSelector((state) => state.localization);
const dispatch = useDispatch();

Step 3: Create Language Files

Create language files for each supported language in a directory called locales. For example, create an en.js file with the following content:

export default {
edit: "Modifier",
save: "Sauvegarder",
cancel: "Annuler",
delete: "Supprimer",
create: "Créer",
update: "Mettre à jour",
search: "Rechercher",
select: "Sélectionner",
view: "Voir",
submit: "Soumettre",
add: "Ajouter",
...
}

Create a similar file for other languages. Make sure to export the translations as an object.

Step 4: Implement Translation Component

Create a new hooks called useLanguage:

import { useSelector } from 'react-redux';

import { selectCurrentLang } from '@/redux/translate/selectors';

const getLabel = (lang, key) => {
  try {
    const lowerCaseKey = key
      .toLowerCase()
      .replace(/[^a-zA-Z0-9]/g, '_')
      .replace(/ /g, '_');

    if (lang[lowerCaseKey]) return lang[lowerCaseKey];
    else {
      // convert no found language label key to label

      const remove_underscore_fromKey = lowerCaseKey.replace(/_/g, ' ').split(' ');

      const conversionOfAllFirstCharacterofEachWord = remove_underscore_fromKey.map(
        (word) => word[0].toUpperCase() + word.substring(1)
      );

      const label = conversionOfAllFirstCharacterofEachWord.join(' ');

      const result = window.localStorage.getItem('lang');
      if (!result) {
        let list = {};
        list[lowerCaseKey] = label;
        window.localStorage.setItem('lang', JSON.stringify(list));
      } else {
        let list = { ...JSON.parse(result) };
        list[lowerCaseKey] = label;
        window.localStorage.removeItem('lang');
        window.localStorage.setItem('lang', JSON.stringify(list));
      }

      return label;
    }
  } catch (error) {
      return 'No translate';
  }
};

const useLanguage = () => {
  const lang = useSelector(selectCurrentLang);

  const translate = (value) => getLabel(lang, value);

  return translate;
};

export default useLanguage;

Step 5: Connect Redux and Ant Design

In your main App component, import the Translation component and render it within the ConfigProvider component from Ant Design:

import { useDispatch, useSelector } from 'react-redux';

import languages from '@/locale/languages';
import { selectLangCode } from '@/redux/translate/selectors';

import { translateAction } from '@/redux/translate/actions';

import useLanguage from '@/locale/useLanguage';

import { Select } from 'antd';

const SelectLanguage = () => {
  const translate = useLanguage();
  const dispatch = useDispatch();

  const langCode = useSelector(selectLangCode);

  return (
    <>
      <label
        htmlFor="rc_select_1"
        className="hiddenLabel"
        style={{
          width: '0px',
          marginRight: '-20px',
          position: 'relative',
        }}
      >
        _
      </label>
      <Select
        showSearch
        placeholder={translate('select language')}
        value={langCode}
        defaultOpen={false}
        style={{
          width: '120px',
          float: 'right',
          marginTop: '5px',
          cursor: 'pointer',
        }}
        optionFilterProp="children"
        filterOption={(input, option) => (option?.label ?? '').includes(input.toLowerCase())}
        filterSort={(optionA, optionB) =>
          (optionA?.label ?? '').toLowerCase().startsWith((optionB?.label ?? '').toLowerCase())
        }
        onSelect={(value) => {
          dispatch(translateAction.translate(value));
        }}
      >
        {languages.map((language) => (
          <Select.Option
            key={language.value}
            value={language.value}
            label={language.label.toLowerCase()}
            disabled={language.disabled}
          >
            <div className="demo-option-label-item">
              <span role="img" aria-label={language.label}>
                {language.icon}
              </span>
              {language.label}
            </div>
          </Select.Option>
        ))}
      </Select>
    </>
  );
};

export default SelectLanguage;

Now, when you click on the "English" or "French" button, the localization of your app will change accordingly.

That's it! You have successfully added localization support to your React app using Redux and Ant Design without using react-i18next. You can now expand on this by adding more languages and translations as needed.

I hope this article helps you achieve your goal. Let me know if you need any further assistance!

Using ChatGPT To Translate React App into Over 40 Languages in Just 100 Seconds

Salah Eddine Lalami — Thu, 14 Dec 2023 03:00:00 +0000

Utilizing Chat GPT to Translate a React Application into Over 40 Languages in Just 100 Seconds

GitHub Repo : https://github.com/idurar/idurar-erp-crm

In this article, we will explore how Chat GPT, an AI-powered language model, can be utilized to effortlessly translate a React application into more than 40 languages within a mere 100 seconds. This powerful approach not only expedites the translation process but also eliminates the need for maintaining multiple translation issues.

Watch Video on Youtube : click here

require('dotenv').config({ path: '.env' });
require('dotenv').config({ path: '.env.local' });
const OPENAI_API_KEY = process.env.OPENAI_API_KEY;

const OpenAI = require('openai');
const fs = require('fs');

const openai = new OpenAI({
  apiKey: OPENAI_API_KEY,
});

function objectToText(obj) {
  let text = '{\n';
  Object.entries(obj).forEach(([key, value]) => {
    text += `${key}: "${value}",\n`;
  });
  text += '}';
  return text;
}

const generateBackendFile = ({ language, newLanguageContent }) => {
  const txt = objectToText(newLanguageContent);
  const fileContent = `module.exports = ${txt}`;

  const filePath = '../backend/src/locale/translation/' + language + '.js';

  fs.writeFile(filePath, fileContent, (err) => {
    if (err) {
      console.error(err);
      return;
    }
  });
};

const generateFrontendFile = ({ language, newLanguageContent }) => {
  const txt = objectToText(newLanguageContent);
  const fileContent = `const lang = ${txt}\n export default lang`;

  const filePath = '../frontend/src/locale/translation/' + language + '.js';

  fs.writeFile(filePath, fileContent, (err) => {
    if (err) {
      console.error(err);
      return;
    }
  });
};
// Creating an instance of OpenAIApi with API key from the environment variables

async function translate(language, langObject) {
  const objText = objectToText(langObject);
  const response = await openai.chat.completions.create({
    model: 'gpt-3.5-turbo-16k',
    messages: [
      {
        role: 'system',
        content:
          'You will be provided with text as js object, and your task is to translate all text into requested language , and return result as valid json',
      },
      {
        role: 'user',
        content: `translate this into ${language} language : ${objText}`,
      },
    ],
    temperature: 0.5,
    max_tokens: 12000,
    top_p: 1,
    frequency_penalty: 0,
    presence_penalty: 0,
  });
  const list = response.choices[0].message.content;
  return list;
}

const languages = require('../locale/languages');

const missedWords = require(`./missedWords`);

async function generateTranslation(language) {
  const filePath = `../locale/translation/${language.value}`;
  const currentLang = require(filePath);

  const result = await translate(language.label, missedWords);
  const translatedFile = JSON.parse(result);

  const newLanguageContent = { ...currentLang, ...translatedFile };

  generateBackendFile({ language: language.value, newLanguageContent });
  generateFrontendFile({ language: language.value, newLanguageContent });
}

languages.forEach(({ label, value }) => {
  generateTranslation({ label, value });
});

The project at hand is housed in a repository called idurar erp crm. By visiting this repository and showing your support with a star, you can gain access to the code and delve deeper into the implementation details.

One of the key highlights of the showcased application is its extensive multilingual support. With over 40 languages available, users from various linguistic backgrounds can benefit from this React application. Achieving such comprehensive language integration was made possible by harnessing the capabilities of Chat GPT.

Initially, the development team requested contributions from fellow developers by creating specific translation issues within the repository. This approach proved successful in collecting valuable translations from enthusiastic contributors. However, as the project evolved and grew in scope, managing individual translation issues became cumbersome.

To address this challenge, a custom script was devised. This script leverages the power of OpenAI's Chat GPT and streamlines the translation process. The first step involves establishing a connection with OpenAI by utilizing the provided OpenAI key stored in the environment variables.

Once connected, the script proceeds to loop over the language files within the React application. For each language file, the script interacts with Chat GPT and initiates the translation process. By sending the language file to Chat GPT along with the desired target language, the script receives the translated version as output.

To further simplify the translation workflow, an NPM package manager integration was implemented. By executing the command npm run translate, developers can trigger the translation process for all the files specified as arguments in the message world. This seamless integration significantly enhances the efficiency and convenience of translating multiple files at once.

The project presented in the video not only showcases the immense potential of Chat GPT in accelerating the localization efforts of React applications but also serves as an excellent educational resource. By studying this project, developers can gain valuable insights into leveraging AI-powered solutions to optimize their own development processes.

In conclusion, the implementation of Chat GPT for translating a React application into numerous languages opens up new avenues for global accessibility and user reach. The idler.com project stands as a testament to the dedication and hard work put forth by its creator. We highly recommend exploring this project and leveraging its learnings to propel your development endeavors forward.

As part of the engaging online community surrounding this project, we encourage you to support the speaker's YouTube channel by liking, subscribing, and posting your questions. Rest assured, they have committed to responding to every comment, ensuring a fruitful exchange of ideas and knowledge.

How to Open Visual Studio Code (Vs Code) Online in Browser

Salah Eddine Lalami — Fri, 24 Nov 2023 11:44:57 +0000

How to Open Visual Studio Code in Your Browser

Are you tired of switching between your GitHub repository and your local development environment? Well, we have good news for you! In this article, we will show you how to open Visual Studio Code (VSC) in your browser online. This means that you can access VSC from any GitHub repository with just a click of a button.

So, let's get started!

Step 1: Navigate to Your GitHub Repository

First, open your preferred web browser and navigate to the GitHub repository you wish to work on. Once you're there, make sure you are logged in to your GitHub account.

Step 2: Click the "Shift" Key + "." key

Now comes the exciting part. Simply click on the "Shift" key, and voila! Visual Studio Code will open right there in your browser. It's as easy as that!

Step 3: Enjoy the Full Online Experience

Once you have opened VSC in your browser, you will notice that it offers the same functionalities as the version installed on your MacBook or Windows system. You have all the familiar tools and features at your disposal.

You can select any term, utilize plugins, and customize your workspace according to your preferences. It's like having your local development environment available online.

Bonus Tip: Explore the Mern-stack Open-Source

In addition to VSC, we also want to introduce you to our open-source project called PCLM. This project is based on the powerful Merstag technology. We encourage you to take a look at PCLM and see if it resonates with your needs.

Here Github Repo : https://github.com/idurar/idurar-erp-crm

We hope you find this guide helpful in leveraging the power of VSC in your browser. Give it a try and don't forget to share your feedback with us! Happy coding!

Advanced Node.js React.js Auth JWT Json Web Token httpOnly in cookies

Salah Eddine Lalami — Fri, 24 Nov 2023 11:37:29 +0000

Securing Your Node.js React.js Application with JSON Web Token (JWT) Authentication

Here Github Repo : https://github.com/idurar/idurar-erp-crm

Hello, today we're going to discuss how to secure your Node.js React.js application using JSON Web Tokens (JWT) and GWT authentication. This advanced approach utilizes cookies and includes a comprehensive example.

check the Video on youtube

To access the full example code for this project, you can find it on the MERN stack-based GitHub repository called "IDURAR ERP CRM". It offers several advanced features that you may find valuable.

Let's start by examining the backend code for creating a Node.js API for notifications. Inside the source folder of the backend directory, you will find the controller and middleware controller folders. Take a look at the "create notification" controller to understand how the login functionality is implemented.

In the first step of the validation process, we ensure that the email and password inputs are sanitized. Once validated, we proceed to query the MongoDB database to find the user associated with the provided credentials. We compare the user's password from the database with the entered password, which is stored securely using salting techniques.

By employing salt, we enhance the strength of the password and protect against rainbow attacks. Each user's salt is automatically generated when they create their initial password.

The application stores various user details such as photo, name, surname, and email. These fields are generally safe to include in notifications. However, we keep the password confidential. Additionally, each user has a unique user ID, which is used for further verification during the login process.

We use bcrypt, a hashing function, to compare the password provided by the user with the hashed password stored in our database. This ensures the authenticity of the user's credentials.

Once the user is authenticated, we generate a JSON Web Token (JWT) as part of the tokenization process. The token is then sent to the client as a cookie. If the user chooses to "remember" their login, the cookie will be set to expire after one year. Otherwise, the cookie's maximum age is limited to the user's session.

To maintain security, we include various attributes in the cookie such as "secure" (set to true), "domain" (set to the request hostname), and "path". This ensures that the cookie is only accessible on secure connections, limited to the domain of the application, and restricted to specific paths. We recommend sending only necessary user profile information in the cookie payload.

Additionally, in our model, we create two tables: one for admins and another for admin passwords. The "generateHash" method in the model generates a hashed password, which is used when creating new users.

To create a new user, we check if the provided email already exists in the database. If not, we proceed with processing the password. After generating a unique user ID, we hash the provided password and save it securely in our database.

Now, let's shift our focus to the frontend implementation. Within the project, you'll find code related to login notifications, a notification service, and login data management. To prevent caching issues, we append a timestamp to each request made to the server. Alternatively, you can utilize Axios to handle caching prevention.

In this project, we utilize Redux for state management. You can explore the integration of notifications and user-related functionality within the application using Redux.

To ensure a seamless user experience, even after closing the application, we store relevant data, such as authentication details, in local storage. This approach allows users to resume their sessions without needing to log in again. However, if the authentication token has expired, the user will be automatically logged out.

Consider a scenario where multiple windows are open in the application. When a user logs out in one window, they should also be logged out in other windows. We acknowledge that this feature may not be functioning correctly at the moment, but we assure you that it will be resolved in future updates.

In conclusion, we've covered a range of concepts related to securing your Node.js React.js application using JSON Web Tokens (JWT) and GWT authentication. By following the provided code examples and guidelines, you can learn how to implement secure authentication in your own projects. This project is based on the MERN stack, which includes MongoDB, Express, React, and Node.js. It also incorporates Ant Design for UI components and Vite for fast development.

Feel free to explore the code base, learn from it, and contribute to its improvement. Don't forget to give it a star and share it with friends who may find it helpful. Additionally, consider subscribing to our channel for more valuable content and leave your comments below. Thank you for watching, and stay tuned for future updates!

Open Source Alternative to SalesForce

Salah Eddine Lalami — Mon, 06 Nov 2023 04:00:00 +0000

We are thrilled to announce that idurar-erp-crm, our open code source ERP CRM system built on the MERN stack (Node.js React.js MongoDB) , has surpassed the remarkable milestone of 2,000 stars on GitHub! 🎉🌟

Thank You!

First and foremost, we want to express our heartfelt gratitude to the amazing developers, contributors, and users in the community who have supported us along this journey. Your star ratings, feedback, and contributions have been instrumental in making idurar-erp-crm a success.

What Makes idurar-erp-crm Unique?

The popularity of idurar-erp-crm can be attributed to several key factors:

Robust Functionality:

With its comprehensive ERP and CRM capabilities, idurar-erp-crm provides businesses with a powerful toolset to efficiently manage resources and maintain strong customer relationships.

MERN Stack:

By leveraging the strengths of MongoDB, Express.js, React, and Node.js, idurar-erp-crm benefits from a modern and widely-supported technology stack, ensuring a solid foundation and ease of development.

Community-driven Development:

The involvement of a vibrant and dedicated community of developers has resulted in continuous improvements, bug fixes, and feature enhancements. We value and appreciate each and every contribution made by the community.

Multilingual Support:

idurar-erp-crm goes beyond language barriers by offering support for over 30 languages. This inclusivity enables businesses around the world to utilize the system effectively.

Join Our Community

We invite all developers and enthusiasts to join our growing community and be part of something amazing. Whether you're an experienced developer or just starting your coding journey, there are many ways to contribute:

Star and Share:

If you haven't already, please star the idurar-erp-crm repository on GitHub and help spread the word about our project.

Github Repo : https://github.com/idurar/idurar-erp-crm

Contribute Code:

Dive into the codebase, explore open issues, and contribute your skills by fixing bugs or adding new features. Your contributions will make a significant impact on the continued success of idurar-erp-crm.

Provide Feedback:

Share your experiences with idurar-erp-crm, suggest improvements, report bugs, or request new features in the GitHub issue tracker. Your feedback plays a vital role in shaping the future of the project.

Spread the Word:

Tell your colleagues, friends, and fellow developers about idurar-erp-crm. Let them know how it can benefit their businesses and how they can get involved.

Github Repo : https://github.com/idurar/idurar-erp-crm

🎁 Want React.js Tips :

I would like to recommend this youtube Channel: https://www.youtube.com/@cosdensolutions

Stay tuned for more updates, let's keep building great things together 🚀✨

Best React.js Frontend Bootcamp 🧑‍💻

Salah Eddine Lalami — Fri, 06 Oct 2023 00:34:37 +0000

Mastering React.js is becoming increasingly valuable. This powerful JavaScript library has gained popularity for building interactive and scalable user interfaces. If you're looking to master React.js and take your frontend skills to the next level, enrolling in a specialized frontend bootcamp can provide you with the comprehensive training you need.

In this article, we'll explore the best frontend bootcamp for mastering React.js :

IDURAR React.js & Redux Online Bootcamp

Join us for an exciting online React.js & Redux Bootcamp in 4 weekend (12 hours x 4)
in 4 weekends Learn on Real Open Source React.js based project (IDURAR ERP CRM): https://github.com/idurar/idurar-erp-crm
🚀 Level up your Frontend development skills with our React.js Online Bootcamp! 🚀
🔥 Learn by Creating Pull Request on Real Open Source Project
🐛 Learn by Solve Bugs on Real Open Source Project
✨ Learn by Adding new Features on Real Open Source Project
🧑‍💻 Learn by Collaborate with other Engineers on Real Open Source Project
📅 Event Date: 4 Weekends (starting from 4th November)

💰 Price : $149

le wagon

Flex part-time

Have commitments? Learn in your free time when it’s most convenient for you.

Graduate in 6 months
Live sessions on days & times that suit you
All day & evening teaching support
Learn collaboratively with peers online
16 hours of study in total, per week

💰 Price : 8500 €

nucamp

In this bootcamp, you will learn the following technologies and their applications:

JavaScript Fundamentals
Web Development with React
Mobile Development with React Native
Google Cloud & Firebase
Visual Studio Code
Git & GitHub

💰 Price : $4800

Springboard

By the end of Foundations you will:

Develop introductory software engineering basics in CSS, HTML, and Javascript
Develop a software engineering mindset and foundation
Work through small, hands-on exercises
Confidently tackle Springboard’s Software Engineering Career Track Technical Skills Survey — what you’ll need to pass to start the Core curriculum

💰 Price : $9900

app academy

16 Week Online Coding Bootcamp
Official Program Name: Full-Time Software Engineering Program
Complete your coding education at the fastest pace possible and land your dream job as a software engineer that much sooner! As a student in our 16 Week Online Full-Time Program, you'll learn today's top coding languages like JavaScript and Ruby on Rails, while building a project portfolio that will not only impress you, but employers as well.

💰 Price : $17000

🚀 how to Create a Modal Component without Javascript Framework

Salah Eddine Lalami — Mon, 18 Sep 2023 12:04:44 +0000

create a Modal component with plain vanilla JavaScript (Without React or Vue Framework), you can follow these steps:

Create an HTML file and include the following HTML structure for the modal:

<div class="vanilla-modal">
  <div class="modal">
    <div class="modal-inner">
      <div id="modal-content"></div>
    </div>
  </div>
</div>

Create a CSS file and add the provided styles for the modal.

.modal{
    display: block;
    position: fixed;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.2s, z-index 0s 0.2s;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

 .modal > * {
    display: inline-block;
    white-space: normal;
    vertical-align: middle;
    text-align: left;
}

 .modal:before {
    display: inline-block;
    overflow: hidden;
    width: 0;
    height: 100%;
    vertical-align: middle;
    content: "";
}

.modal-visible .modal {
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.2s;
}

.modal-inner {
    position: relative;
    overflow: hidden;
    max-width: 90%;
    max-height: 90%;
    background: #fff;
    z-index: -1;
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.2s, transform 0.2s, z-index 0s 0.2s;
    min-width: 500px;
    border-radius: 6px;
}
.modal-visible .modal-inner {
    z-index: 100;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.2s, transform 0.2s;
}

#modal-content{
    padding: 50px 70px;
}

Create Vanilla Plain JavaScript Component

This code allows you to initialize the modal, open it, and close it. The modal will listen for clicks outside the modal, clicks on the close button, pressing the Escape key, and handling tab navigation inside the modal.

function outsideClick(e) {
  if (e.target.closest(".modal-inner")) {
    return;
  }
  const modalVisible = document.querySelector(".modal-visible");
  if (modalVisible) {
    closeModal();
  }
}
function escKey(e) {
  if (e.keyCode == 27) {
    closeModal();
  }
}

function closeClick(e) {
  if (e.target.classList.contains("closeModal")) {
    closeModal();
  }
}
function trapTabKey(e) {
  const vanillaModal = document.querySelector(".vanilla-modal");
  const FOCUSABLE_ELEMENTS = [
    "a[href]",
    "area[href]",
    'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
    "select:not([disabled]):not([aria-hidden])",
    "textarea:not([disabled]):not([aria-hidden])",
    "button:not([disabled]):not([aria-hidden])",
    "iframe",
    "object",
    "embed",
    "[contenteditable]",
    '[tabindex]:not([tabindex^="-"])',
  ];

  const nodes = vanillaModal.querySelectorAll(FOCUSABLE_ELEMENTS);
  let focusableNodes = Array(...nodes);

  if (focusableNodes.length === 0) return;

  focusableNodes = focusableNodes.filter((node) => {
    return node.offsetParent !== null;
  });

  // if disableFocus is true
  if (!vanillaModal.contains(document.activeElement)) {
    focusableNodes[0].focus();
  } else {
    const focusedItemIndex = focusableNodes.indexOf(document.activeElement);

    if (e.shiftKey && focusedItemIndex === 0) {
      focusableNodes[focusableNodes.length - 1].focus();
      e.preventDefault();
    }

    if (
      !e.shiftKey &&
      focusableNodes.length > 0 &&
      focusedItemIndex === focusableNodes.length - 1
    ) {
      focusableNodes[0].focus();
      e.preventDefault();
    }
  }
}

function closeModal() {
  const vanillaModal = document.querySelector(".vanilla-modal");
  if (vanillaModal) {
    vanillaModal.classList.remove("modal-visible");
    document.getElementById("modal-content").innerHTML = "";
    document.getElementById("modal-content").style = "";
  }

  document.removeEventListener("keydown", escKey);
  document.removeEventListener("click", outsideClick, true);
  document.removeEventListener("click", closeClick);
  document.removeEventListener("keydown", trapTabKey);
}

const modal = {
  init: function () {
    const prerendredModal = document.createElement("div");
    prerendredModal.classList.add("vanilla-modal");
    const htmlModal = `         
       <div class="modal">
       <div class="modal-inner"
       ><div id="modal-content"></div></div></div>`;
    prerendredModal.innerHTML = htmlModal;
    document.body.appendChild(prerendredModal);
  },
  open: function (idContent, option = { default: null }) {
    let vanillaModal = document.querySelector(".vanilla-modal");
    if (!vanillaModal) {
      console.log("there is no vanilla modal class");
      modal.init();
      vanillaModal = document.querySelector(".vanilla-modal");
    }

    const content = document.getElementById(idContent);
    let currentModalContent = content.cloneNode(true);
    currentModalContent.classList.add("current-modal");
    currentModalContent.style = "";
    document.getElementById("modal-content").appendChild(currentModalContent);

    if (!option.default) {
      if (option.width && option.height) {
        document.getElementById("modal-content").style.width = option.width;
        document.getElementById("modal-content").style.height = option.height;
      }
    }
    vanillaModal.classList.add("modal-visible");
    document.addEventListener("click", outsideClick, true);
    document.addEventListener("keydown", escKey);
    document.addEventListener("keydown", trapTabKey);
    document
      .getElementById("modal-content")
      .addEventListener("click", closeClick);
  },

  close: function () {
    closeModal();
  },
};

// for webpack es6 use uncomment the next line
// export default modal;

The outsideClick function is responsible for handling clicks outside the modal. If the click target is not inside the modal, it triggers the closeModal function to close the modal.
The escKey function checks if the Escape key was pressed (keyCode 27), and if so, it calls the closeModal function.
The closeClick function listens for a click event on the close button within the modal. If the click target has the class "closeModal", it triggers the closeModal function.
The trapTabKey function is used to trap keyboard focus within the modal. It first retrieves all the focusable elements inside the modal based on the provided array FOCUSABLE_ELEMENTS. Then it filters out any elements that are not currently visible.

If there are no focusable elements, it simply returns.
If the modal does not currently contain focus (meaning no element inside the modal is currently focused), it sets the focus on the first focusable element.
If the modal currently contains focus, it handles the tab navigation logic:
- If the Shift key is pressed along with Tab, it moves focus to the last focusable element and prevents the default tab behavior.
- If only the Tab key is pressed, and the currently focused element is the last focusable element, it moves focus back to the first element and prevents the default tab behavior.

The closeModal function is responsible for closing the modal. It finds the modal element and removes the classes and content related to the visibility of the modal. It also removes the event listeners for keydown, clicks outside the modal, and clicks on the close button.
The modal object has three methods:
- init(): This method is responsible for initializing the modal. It creates the HTML structure of the modal and appends it to the document body.
- open(idContent, option): This method is used to open the modal. It takes two parameters:
  - idContent (required): The ID of the element that contains the content to be shown in the modal.
  - option (optional): An object that allows specifying additional options. Currently, it supports setting the width and height of the modal by providing the width and height properties in the option object.
- close(): This method simply calls the closeModal function to close the modal.

To use the modal object, you can call the open method with the ID of the content you want to show in the modal. For example:

modal.open("your-modal-content-id");

You can also provide optional options to adjust the width and height of the modal:

modal.open("your-modal-content-id", { width: "500px", height: "300px" });

To close the modal, simply call the close method:

modal.close();

With these steps in place, you can now use the modal object to open and close the modal:

// Opening the modal
modal.open("your-modal-content-id");

// Closing the modal
modal.close();

Make sure to replace "your-modal-content-id" with the actual ID of your modal content.

You can modify the provided code as per your requirement or style the modal further based on your design preferences.

Github Repository Link :
https://github.com/idurar/vanilla-js-modal

And don't forget to star our  Open Source ERP / CRM  🤩 repo in github 🚀 ?  !

Github Repo : https://github.com/idurar/erp-crm

Idurar is a modern and open-source ERP/CRM system based on Node.js React.js that offers features such as sales management, customer management, and invoicing.

React Js Developers : Create a Email Editor with React-Quill ⭐ Weekly Issue to Solve

Salah Eddine Lalami — Mon, 18 Sep 2023 00:41:43 +0000

This is Weekly React.js Issue to Solve

Issue to Solve

Need to create a new email template settings page that allows users to edit email templates using the react-quill library. This library provides a rich text editor component for React applications. The goal is to use react-quill to allow users to modify the message content of an email template.

The email template settings page should provide a user interface where users can see and edit the email template. The react-quill (https://github.com/zenoamaro/react-quill) component will be used as the editor for the email template message.

The email template message should be saved in the settings so that it can be retrieved and used later when sending emails. It is important to ensure that the updated template message is properly saved and associated with the correct email template.

GitHub Issue link :

https://github.com/idurar/erp-crm/issues/548

Additional context

Additionally, this page should support editing multiple templates. This means there should be a way to switch between different email templates and update their respective message content using the react-quill editor.

By following these guidelines, you can create a fully functional email template settings page that allows users to customize and save email templates using the react-quill library.

Settings Api


router.route('/setting/listAll').get(catchErrors(settingController.listAll));
router.route('/setting/filter').get(catchErrors(settingController.filter));
router
  .route('/setting/readBySettingKey/:settingKey')
  .get(catchErrors(settingController.readBySettingKey));
router.route('/setting/listBySettingKey').get(catchErrors(settingController.listBySettingKey));
router
  .route('/setting/updateBySettingKey/:settingKey?')
  .patch(catchErrors(settingController.updateBySettingKey));
router.route('/setting/updateManySetting').patch(catchErrors(settingController.updateManySetting));

Settings Key

[
  {
    "settingKey": "email_invoice_default",
    "settingValue": "<p>email_invoice_default</p>",
    "valueType": "string",
    "isCoreSetting": true
  },
  {
    "settingKey": "email_quote_default",
    "settingValue": "<p>email_quote_default</p>",
    "valueType": "string",
    "isCoreSetting": true
  },
  {
    "settingKey": "email_offer_default",
    "settingValue": "<p>email_offer_default</p>",
    "valueType": "string",
    "isCoreSetting": true
  },
  {
    "settingKey": "email_payment_receipt_default",
    "settingValue": "<p>email_offer_default</p>",
    "valueType": "string",
    "isCoreSetting": true
  },
  {
    "settingKey": "email_signup_email_confirm_default",
    "settingValue": "<p>email_signup_email_confirm</p>",
    "valueType": "string",
    "isCoreSetting": true
  },
  {
    "settingKey": "email_reset_password_default",
    "settingValue": "<p>email_reset_password</p>",
    "valueType": "string",
    "isCoreSetting": true
  },
  {
    "settingKey": "welcome_email_default",
    "settingValue": "<p>welcome_email</p>",
    "valueType": "string",
    "isCoreSetting": true
  }
]

How You Can Help

To get started, simply follow these steps:

Visit our GitHub repository and familiarize yourself with the project structure, codebase, and existing features.
Locate the relevant issue titled "feat : Create New Generic Upload Controller #412"
Fork the repository to your own GitHub account. Implement the required changes in your forked repository. Once you're satisfied with your changes, submit a pull request to our main repository.

Why Contribute?

By contributing to the idurar-erp-crm project, you will:

Gain valuable experience working on a real-world open source ERP CRM system.
Showcase your React.js skills to potential employers and the wider developer community.
Collaborate with a team of passionate developers from around the world.
Make a meaningful impact by enhancing the functionality and usability of our project.

About the Project

idurar-erp-crm is a powerful and feature-rich ERP CRM system built using React.js. It aims to revolutionize businesses by seamlessly integrating essential business processes, customer relationship management, and sales automation into one robust platform.

Join Our Community

We believe in the power of collaboration and welcome developers of all skill levels to join our community. Whether you're a seasoned React.js expert or just starting out, we value your unique perspective and contributions.

Ready to dive in and make a difference? Head over to our GitHub repository, find the issue, and let's get started. Together, we can build something extraordinary!

If you have any questions or need any assistance, please don't hesitate to comment below. We're here to help.

Happy coding!

Best regards,
The idurar-erp-crm Team

Exploring the Differences Between C++ and C: Why C++ Prevails

Fernando — Thu, 14 Sep 2023 14:18:57 +0000

When it comes to programming languages, C and C++ stand out as two stalwarts that have shaped the world of software development for decades. Both languages are known for their efficiency, versatility, and raw power. However, C++ has steadily gained the upper hand in many areas, making it a more favourable choice for modern software development. In today's article, we'll delve into the differences between C++ and C and explore why C++ is often considered the superior choice.

Spotify

Here we can knowledge that some famous apps use C++ for it efficiency and faster processing power.

Object-Oriented Programming (OOP) Support

C++ was developed as an extension of C, primarily to add support for Object-Oriented Programming (OOP). OOP is a paradigm that facilitates modular, maintainable, and organized code through the use of classes, objects, and inheritance. C, on the other hand, lacks native support for OOP. While you can implement some OOP concepts in C, it's far more cumbersome and error-prone compared to C++.

With C++, developers can create complex systems with ease, taking advantage of OOP principles like encapsulation, inheritance, and polymorphism. This makes codebases more modular and easier to understand, leading to better software design and maintenance.

Standard Template Library (STL)

The Standard Template Library (STL) in C++ is a powerful collection of templated classes and functions that provide ready-made data structures and algorithms. These include containers like vectors, lists, and maps, as well as algorithms for searching, sorting, and manipulating data. In contrast, C lacks a standardized library for these purposes, forcing developers to reinvent the wheel or rely on external libraries.

The STL significantly boosts productivity by simplifying common programming tasks and promoting code reuse. It has become an indispensable asset for C++ programmers, reducing the likelihood of errors and speeding up development.

Stronger Type Checking

C++ offers stronger type checking compared to C. This means that C++ compilers catch more type-related errors during compilation, preventing many runtime issues that can plague C programs. C++ achieves this through features like function overloading, which allows multiple functions with the same name but different parameter lists, and operator overloading, which enables custom behavior for operators.

Stronger type checking leads to more robust and reliable code, making C++ a safer choice for critical applications and large codebases.

Exception Handling

Exception handling is a crucial aspect of writing robust and reliable software. C++ introduces native support for exception handling through the try, catch, and throw keywords. This enables developers to write code that gracefully handles errors and failures, improving the overall resilience of their applications. In C, error handling often relies on return codes, making error detection and handling less elegant and more error-prone.

Abstraction

C++ promotes higher levels of abstraction through features like operator overloading, function templates, and user-defined types. This allows developers to create more expressive and readable code, abstracting away low-level implementation details and focusing on the problem at hand. C, while capable of abstraction to some extent, lacks the syntactic constructs to achieve the same level of expressiveness.

Compatibility with C

One of the notable advantages of C++ is its compatibility with C. C++ compilers can typically compile C code without modification, making it easy to integrate existing C libraries into C++ projects. This allows developers to leverage the vast ecosystem of C libraries while enjoying the benefits of C++ in their own code.

Thank you

While both C and C++ have their merits, C++ emerges as the superior choice for modern software development. Its native support for Object-Oriented Programming, the Standard Template Library, stronger type checking, exception handling, and abstraction capabilities make it a more powerful and expressive language. Furthermore, C++ maintains compatibility with C, providing developers with the flexibility to use both languages as needed.

In today's software landscape, where maintainability, robustness, and productivity are paramount, C++ shines as a versatile and reliable tool. It combines the performance and low-level control of C with the high-level features that modern software development demands, making it the preferred choice for many developers and organizations.

Make sure to leave your opinion on the comments and let's share to the world!

Github Repository: https://github.com/idurar/idurar-erp-crm

Best regards,
The idurar-erp-crm Team

Programming Languages as Super Heroes Comics!!

Fernando — Tue, 12 Sep 2023 13:00:00 +0000

Hello Everyone, Today we Might Bring something a little Different for you!

We on the team had a very creative idea and thought about giving some programming languages to AI and ask them how would they be if they were Superheros in a comic book, Can you imagine reading a super history about Python & Java helping the city? Haha!

The Python Power

I honestly didn't see python as strong, I thought it would look more lie Reed Richards on the comics, but no, We got ourself Captain America!

So For those Python users, you're as Strong as Captain America!

Flash? Or JavaScript

Okay, I really like his look like reverse flash, that's why JavaScript is trying to run and beat C++ haha!

Maybe you guys are that fast, uh!

Java!

This is my favourite so far because java is always there trying to sneaky on us but remember that if you write your code in java it will be read anywhere

Write once, run anywhere

The super Power of R

Okay, this is giving vibes more like Journalist, so who it is? it can't be anyone in the office that you work at or anyone in the streets but he's always on the look out.

C++ and his powers

Okay, this is very strange but he kinda looks like Super man and batman at the same time?

⭐️IDURAR⭐️

IDURAR is Open Source ERP / CRM (Invoice / Inventory / Accounting / HR).

Ant design framework
Build with Mern stack Node.js / Express.js / MongoDb / React.js
Redux state manager✨
ERP/CRM
Inventory & Accounting

Github Repository: https://github.com/idurar/idurar-erp-crm

Thank You everyone

Don't forget to Leave a Star on our project!!

I hope you liked to see our Super Heroes and if you have any other idea for programming languages, why don't you share with us in the comments, so we can do more heroes!

Best regards,
The idurar-erp-crm Team

DEV Community: IDURAR AI , Inc | Where Ai Build Software

Easy way to Deploy Node.js MongoDb Backend App for free

Prepare your Node.js code

Create the App in DigitalOcean

Configuration (Important!)

Build and Deploy

IDURAR Open Source React.js Node.js Project to learn from

IDURAR: The Fair-Code ERP/CRM

What Is IDURAR?

Key Features

Licensing and Usage

Getting Started

Join the IDURAR Community

Add Localization Translate to React App with redux (without i18next)

How to Add Localization to a React App with Redux and Ant Design (without react-i18next)

Check Video on youtube :

Step 1: Setup Redux

Step 2: Install Ant Design

Step 3: Create Language Files

Step 4: Implement Translation Component

Step 5: Connect Redux and Ant Design

Using ChatGPT To Translate React App into Over 40 Languages in Just 100 Seconds

Utilizing Chat GPT to Translate a React Application into Over 40 Languages in Just 100 Seconds

Watch Video on Youtube : click here

How to Open Visual Studio Code (Vs Code) Online in Browser

How to Open Visual Studio Code in Your Browser

Step 1: Navigate to Your GitHub Repository

Step 2: Click the "Shift" Key + "." key

Step 3: Enjoy the Full Online Experience

Bonus Tip: Explore the Mern-stack Open-Source

Advanced Node.js React.js Auth JWT Json Web Token httpOnly in cookies

Securing Your Node.js React.js Application with JSON Web Token (JWT) Authentication

check the Video on youtube

Open Source Alternative to SalesForce

Thank You!

What Makes idurar-erp-crm Unique?

Robust Functionality:

MERN Stack:

Community-driven Development:

Multilingual Support:

Join Our Community

Star and Share:

Contribute Code:

Provide Feedback:

Spread the Word:

🎁 Want React.js Tips :

Best React.js Frontend Bootcamp 🧑‍💻

IDURAR React.js & Redux Online Bootcamp

le wagon

nucamp

Springboard

app academy

🚀 how to Create a Modal Component without Javascript Framework

Create an HTML file and include the following HTML structure for the modal:

Create a CSS file and add the provided styles for the modal.

Create Vanilla Plain JavaScript Component

React Js Developers : Create a Email Editor with React-Quill ⭐ Weekly Issue to Solve

This is Weekly React.js Issue to Solve

Issue to Solve

GitHub Issue link :

Additional context

Settings Api

Settings Key

How You Can Help

Why Contribute?

About the Project

Join Our Community

Exploring the Differences Between C++ and C: Why C++ Prevails

Spotify

Object-Oriented Programming (OOP) Support

Standard Template Library (STL)

Stronger Type Checking

Exception Handling

Abstraction

Compatibility with C

Thank you

Programming Languages as Super Heroes Comics!!

The Python Power

Flash? Or JavaScript

Java!

IDURAR Open Source React.js Node.js Project to learn from