DEV Community: Luis Falcon

Best Ways to Structure Your React Projects for Scalability

Luis Falcon — Sat, 11 May 2024 22:44:27 +0000

In the dynamic landscape of web development, building scalable and maintainable React applications is crucial for success. As your projects evolve and grow in complexity, having a solid structure in place becomes essential to ensure scalability, flexibility, and ease of maintenance. In this article, we'll explore some of the best practices and strategies for structuring your React projects with scalability in mind.

Why Scalability Matters in React Projects

Scalability refers to the ability of a system to handle increased workload efficiently without compromising performance or stability. In the context of React applications, scalability becomes vital as projects expand with new features, larger data sets, and more users. Without a scalable architecture, your app may become difficult to maintain, prone to bugs, and challenging to extend.

Types of Organizations

When it comes to organizing a React project, the structure can vary based on the size of the project, team preferences, and specific requirements. Here are some common organizational approaches:

Feature-Based Organization

In a feature-based organization, files are grouped based on the specific features they represent in the application. Each feature (or module) has its directory containing related components, styles, services, and utilities. This approach promotes modularity and separation of concerns, making it easier to scale by adding or modifying features independently.

/src
├── /auth
│   ├── AuthForm.tsx
│   ├── AuthAPI.ts
│   └── ...
├── /dashboard
│   ├── DashboardLayout.tsx
│   ├── DashboardWidgets.tsx
│   └── ...
├── /settings
│   ├── SettingsForm.tsx
│   ├── SettingsAPI.ts
│   └── ...
└── App.tsx

Layered (Vertical) Organization

In a layered organization, files are grouped by their functional layers within the application (e.g., presentation layer, data layer, services layer). This approach emphasizes the separation of concerns and promotes scalability by clearly defining responsibilities for each layer.

/src
├── /components
│   ├── Header.tsx
│   ├── Sidebar.tsx
│   └── ...
├── /containers
│   ├── HomeContainer.tsx
│   ├── DashboardContainer.tsx
│   └── ...
├── /services
│   ├── ApiService.ts
│   ├── AuthService.ts
│   └── ...
└── App.tsx

Domain-Driven Design (DDD)

Domain-driven design organizes a project around specific business domains or subdomains. Each domain encapsulates related functionalities, entities, and services. This approach is particularly useful for complex applications with distinct business logic.

/src
├── /sales
│   ├── SalesDashboard.tsx
│   ├── SalesAPI.ts
│   └── ...
├── /inventory
│   ├── InventoryList.tsx
│   ├── InventoryService.ts
│   └── ...
└── App.tsx

Atomic Design

Atomic design is a methodology that emphasizes creating components as building blocks at various levels of abstraction (atoms, molecules, organisms, templates, pages). This approach fosters reusability and scalability by breaking down UI components into smaller, manageable units.

/src
├── /atoms
│   ├── Button.tsx
│   ├── Input.tsx
│   └── ...
├── /molecules
│   ├── LoginForm.tsx
│   ├── Navbar.tsx
│   └── ...
├── /organisms
│   ├── DashboardLayout.tsx
│   ├── UserProfile.tsx
│   └── ...
└── App.tsx

Better component organization

The component organization is important because it contributes to making a better and cleaner react project. If you need to find the source code of a component or the styles or all tests you can go to components -> component_name and that's it. Everything about this component will be edited easily.

This is an example of the component organization I told you in the previous section:

/src
├── /components
│   ├── /Button
|       ├── Button.tsx
|       ├── Button.styles.css
|       ├── Button.test.ts
|       ├── Button.d.ts
|       └── Button.stories.ts
│   ├── /Navbar
|       ├── Navbar.tsx
|       ├── Navbar.styles.css
|       ├── Navbar.test.ts
|       ├── Navbar.d.ts
|       └── Navbar.stories.ts
│   └── ...

Sharing Logic Across Your Project

In large-scale projects, sharing functions effectively across different parts of the application is essential for improving code reusability, maintainability, and scalability. By centralizing common functionalities and making them accessible throughout the project, developers can streamline development workflows and ensure consistency across codebases. In this section, we'll explore strategies for sharing functions effectively in your project.

Utility functions

Utility functions encapsulate common logic and operations that can be reused across multiple components or modules. By defining utility functions in a centralized location, such as a utils directory or module, you can easily import and use them wherever needed within your project.

// utils/helpers.js

export function formatCurrency(amount) {
  return `$${amount.toFixed(2)}`;
}

export function capitalizeString(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

// Example usage in a component
import { formatCurrency, capitalizeString } from '../utils/helpers';

const formattedAmount = formatCurrency(100.5);
const capitalizedText = capitalizeString('hello world');

Custom Hooks

Custom hooks allow you to encapsulate complex stateful logic and share it between different components. By defining custom hooks, you can abstract away common patterns and reuse them across your project, improving code maintainability and scalability.

// hooks/useFetchData.js

import { useState, useEffect } from 'react';

export function useFetchData(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(url);
      const jsonData = await response.json();
      setData(jsonData);
    };

    fetchData();
  }, [url]);

  return data;
}

// Example usage in a component
import { useFetchData } from '../hooks/useFetchData';

const MyComponent = () => {
  const data = useFetchData('https://api.example.com/data');

  // Render component based on fetched data
};

Service Modules

Service modules encapsulate API calls and data-fetching logic, allowing you to centralize data access throughout your application. By defining service modules, you can easily manage data sources and endpoints, ensuring consistent data fetching across components.

// services/api.js

export async function fetchData(endpoint) {
  const response = await fetch(`https://api.example.com/${endpoint}`);
  const jsonData = await response.json();
  return jsonData;
}

// Example usage in a component
import { fetchData } from '../services/api';

const loadData = async () => {
  const data = await fetchData('products');
  // Process data and update component state
};

How to setup verified commits on GitHub

Luis Falcon — Sun, 21 Apr 2024 20:22:43 +0000

In the world of software development, maintaining the integrity and authenticity of code is paramount. One effective way to enhance this security is through verified commits using GPG (GNU Privacy Guard). In this comprehensive guide, we'll explore the steps involved in setting up verified commits, providing you with a solid foundation for ensuring the trustworthiness of your codebase.

Verified commits are particularly valuable for open-source projects and collaborations where multiple contributors are involved. By leveraging GPG, developers can cryptographically sign their commits, establishing a clear chain of trust and safeguarding against unauthorized changes.

In this post, we'll cover everything you need to know, from installing and configuring GPG to signing your commits and understanding the verification process. Whether you're new to cryptographic signatures or seeking to enhance your project's security, this guide will walk you through the essential steps, demystifying the process along the way.

Creating GPG Keys

First, you need to generate a GPG Key pair. Your GPG Key must use RSA with a key size of 4096 bits.

gpg --full-generate-key

At the prompt, specify the kind of key you want, or press Enter to accept the default RSA.

Enter the desired key size. I recommend the maximum key size of 4096.

Enter the length of time the key should be valid. Press Enter to specify the default selection, indicating that the key doesn't expire.

Verify that your selections are correct and enter your user ID information.

Type a secure passphrase. Remember, you need to use this phrase on each commit created or when trying to use a SSH operation.

Use the gpg --list-secret-keys --keyid-format LONG command to list GPG keys for which you have both a public and private key. A private key is required for signing commits or tags. From the list of GPG keys, copy the GPG key ID you'd like to use. In this example, the GPG key ID is 6D1879875E68B0B1

gpg --list-secret-keys --keyid-format LONG

Paste the text below, substituting in the GPG key ID you'd like to use. In this example, the GPG key ID is 6D1879875E68B0B1

gpg --armor --export 6D1879875E68B0B1

Copy your GPG key, beginning with -----BEGIN PGP PUBLIC KEY BLOCK----- and ending with -----END PGP PUBLIC KEY BLOCK-----

Adding a new GPG key to your GitHub account

In the upper-right corner of any page, click your profile photo, then click Settings.

Click on SSH and GPG keys and add new GPG key.

In the "Key" field, paste the GPG key you copied when you generated your GPG key

To finish, click on add GPG key and confirm the action with your GitHub password or your preferred auth method.

Getting GPG Keys

Open your terminal and use the gpg --list-secret-keys --keyid-format LONG command to list GPG keys for which you have both a public and private key. A private key is required for signing commits or tags. From the list of GPG keys, copy the GPG key ID you'd like to use. In this example, the GPG key ID is 6D1879875E68B0B1:

gpg --list-secret-keys --keyid-format LONG

Git Settings

To set your GPG signing key in Git, paste the text below, substituting in the GPG key ID you'd like to use. In this example, the GPG key ID is 6D1879875E68B0B1:

git config --global user.signingkey 6D1879875E68B0B1

To tell git to automatically sign commits you can set:

git config --global commit.gpgsign true

If you use Ubuntu you need to add the next line in your ~/.bashrc file.

# .bashrcexport GPG_TTY=$(tty)

Conclusion

Implementing verified commits using GPG is a proactive step towards enhancing the security and trustworthiness of your codebase. By adopting this practice, you not only protect your project from unauthorized changes but also contribute to a more transparent and accountable development process.

Throughout this guide, we've covered the essential steps for setting up and using GPG to sign commits effectively. Remember, verified commits not only benefit open-source projects but can also be valuable for teams working on proprietary software, ensuring that each commit is attributable and tamper-proof.

How to add support for PWA in Next JS (App Router)

Luis Falcon — Tue, 09 Apr 2024 19:35:39 +0000

You can add Progressive Web App (PWA) support In Next JS App Router in a few minutes and zero dependencies. First, I need to explain to you all about progressive web apps and their benefits of implementing in your project.

What is a Progressive Web App (PWA)

A Progressive Web App (PWA) is a type of web application that utilizes modern web technologies to provide a user experience similar to that of a native mobile app. PWAs are designed to work across any platform that uses a standards-compliant browser, such as desktops, tablets, and mobile devices.

Key features and characteristics of Progressive Web Apps include:

Responsive : PWAs are built to work seamlessly on any device or screen size, adapting to the user's device.
App-like : PWAs are designed to feel like native mobile apps, providing an immersive user experience similar to what users expect from traditional apps.
Reliable : PWAs can work offline or in areas with poor connectivity by utilizing caching strategies to store essential resources locally. This ensures that users can still access content even without a reliable internet connection.
Fast : PWAs are optimized for speed and performance, loading quickly and responding swiftly to user interactions.
Secure : PWAs are served over HTTPS to ensure data privacy and security, preventing unauthorized access and tampering.
Discoverable : PWAs can be indexed by search engines and shared via URLs, making them easily discoverable and linkable.
Installable : Users can add PWAs to their device's home screen, enabling easy access and promoting re-engagement.
Engaging : PWAs support features like push notifications, enabling re-engagement with users even when they are not actively using the app.

PWAs are typically built using web technologies such as HTML, CSS, and JavaScript, and they leverage modern APIs like Service Workers to implement features such as offline functionality and background synchronization. Many popular websites and web applications have adopted the PWA approach to deliver better user experiences, especially on mobile devices, without requiring users to install an app from an app store.

How to add support to Progressive Web App (PWA) in Next JS App Router

If you need to implement Progressive Web Apps support in your Next JS project you need to have the next requirements:

Node JS v18 or major
Next JS application with App Router
Code Editor like VSCODE

Create a Next JS App

The first step is to create a Next JS App with the App Router option **--app** flag will generate an app router project. Feel free to select the configuration that you need for your project.

npx create-next-app@latest my-project --app

Create a manifest.json

The next step is to create a manifest.json file in the public folder like this:

{
  "theme_color": "#000000",
  "background_color": "#000000",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "name": "My Next App",
  "short_name": "NEXT",
  "description": "My Next JS app with support for PWA",
  "icons": [
    { "src": "./icon-x48.png", "sizes": "48x48", "type": "image/png" },
    { "src": "./icon-x72.png", "sizes": "72x72", "type": "image/png" },
    { "src": "./icon-x96.png", "sizes": "96x96", "type": "image/png" },
    { "src": "./icon-x192.png", "sizes": "192x192", "type": "image/png" },
    {
      "src": "./icon-x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "./icon-x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

You can generate the previous file with the PWA Manifest Generator tool created by SimiCart . Just provide all information about your application in each input to generate the manifest.json file and the icons needed with different sizes.

If you generate your manifest with the previous tool you need to extract the zip content, move all files inside the public folder, and rename the manifest.webmanifest file to manifest.json.

Register manifest.json on layout file

If you create the manifest.json file with their icons then you need to register in your layout.tsx or layout.jsx file like this:

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
  manifest: "/manifest.json", // <-- add here the route of manifest.json
};
export default function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

And that's it. Your Next JS project includes support for Progressive Web Applications (PWA) with zero dependencies.

Conclusion

Adding Progressive Web App (PWA) support to your Next.js project can be accomplished quickly and efficiently. First, understanding the benefits of PWAs is crucialthey provide a native-like user experience across various devices, are responsive, reliable even with poor connectivity, and can be installed on users' devices for easy access and re-engagement.