Get the most recent info and news about Anvil on HackerNoon, where 10k+ technologists publish stories for 4M+ monthly readers.

Anvil

useanvil

A flexible and for creating, populating, and signing PDF documents. simple API Anvil was started with a simple premise: paperwork and PDFs are the primary bottlenecks restricting faster adoption of digital tools in every industry. We set out to build software that bridges the past and all of its entrenched paper processes to the future of online-first, data-centric operations. Using Anvil, companies can free themselves from the burden of endless paperwork, menial tasks, and antiquated ways of working, while maintaining all that is good about long-established processes: maintaining order, ensuring data integrity, and guarding against exceptions. On the surface, the solution appears simple. First, digitally capture some data, then fill out the relevant PDF form, and finally pass the completed form to another party. In reality, paperwork processes are littered with nuances, exceptions, and business rules, each adding to the capabilities and complexity of our product. While Anvil’s is a great solution for solving a large category of paper workflow challenges, some complex processes warrant a software solution built by developers with deep industry-specific knowledge. So how can Anvil play a role in helping these developers? By making it extremely easy to work with the PDFs that underpin these processes. workflow builder How did PDFs become ubiquitous? Let’s start with an abbreviated tour of the technology that enables information sharing. Throughout history, humans have devised increasingly effective ways of sharing information farther and faster. speech → writing → printing press → typewriter → computer These technologies allowed for information to be created and shared faster, but the underlying medium that contained the information remained largely the same, paper. Paper With the emergence of computers, information could be created faster but still needed to be printed for it to be shared farther. Enter PDFs, a coordinate-based file format created to imitate paper and describe documents so that they can easily be printed. With paper being the dominant medium for so long, it made sense for PDFs to adopt the same look and feel on a screen. But the key to the PDF’s success is the combination of: The consistency of the PDF file regardless of the program used to view it. Just like a printed paper document maintains its form regardless of who views it, the PDF looks consistent every time it is displayed. Other file formats varied in appearance depending on the program used to open the file.The small file size of PDFs, allowing it to be transferred easily over the internet. Remember, internet speeds were very slow in the early days, so file size mattered a lot. With these two advantages, the PDF became a foundational transitional technology - it bridged the gap between the familiar (paper) with the new (digital). But as the internet evolved, the consistent presentation of information diminished in importance. It is the underlying data that is important, not that the information is presented on a digital sheet of paper. This could have been the moment to phase out PDF technology and usher in a new, modern model for information sharing. For some industries, the transition to all-digital, data-first was easy. For others, especially legacy industries hamstrung by regulatory requirements, this transition has been painful, slow, and tedious. We all agree that transacting in data over the internet is the future, but how do we get there? How do we accommodate the past while orienting ourselves towards the future? Introducing the Anvil PDF API Returning to our original insight: Paperwork and PDFs are the primary bottlenecks restricting faster adoption of digital tools in every industry. In building , we have developed a deep knowledge of PDFs: how to create them, manipulate them, and electronically sign them. We also have an extensive library of tools that make interacting with PDFs online easy. Combined, these tools can accelerate companies already building vertical-specific solutions by offloading the complexities of handling PDFs to Anvil. Anvil Workflow Today we are announcing the complete PDF API to help companies focus on building specialized solutions for their respective industries without having to worry about the underlying paperwork. These API endpoints include: - A simple solution to fill in existing PDF documents. Set up a template in minutes, then make a request to the unique template URL with data. PDF Filling - An endpoint for creating PDFs from scratch. This endpoint supports markdown formatting and dynamic length tables. PDF Generation - An easy, flexible, embeddable and customizable e-signature solution that just works. You can also fill out a PDF form and/or generate a new PDF to be included in the signature packet with one API call. Etch PDF E-Sign These three API endpoints are designed to: Address the broadest paperwork challenges that any technology company entering a legacy industry will encounter.Sit in the background so that your product can be front and center with your customers, allowing you to own the critical business logic that is the secret sauce of your technology solution.Address technical headaches of managing PDFs. Most PDF manipulation libraries are written in Java/C# etc., require self-hosting, and still need to run headless Chrome to do any PDF rendering. Why use the Anvil PDF API? In designing these API endpoints, we had three main goals: - The API can be integrated into your solution in minutes. We imagined how developers would consume our API and then designed the API to best match those use cases. - We have tested our API under heavy, real-world load. From helping underwrite millions in PPP loans, to onboarding thousands of migrant farmworkers, Anvil is ready to scale as you scale. - We are developers, and we want our developer experience to be an enjoyable one. To help you get started with Anvil, we have released a number of useful tools including: a. Comprehensive and well organized documentation b. An interactive PDF e-sign tutorial c. Postman API collection d. Open source node.js client for interacting with our API e. UI tools to make templating PDFs easier and faster Simplicity Reliability and scalability Developer experience Have a suggestion or idea for improving the developer experience? Let us know at developers@useanvil.com , we are always looking for insight from our community. How it’s going We are excited by the early use cases we have seen with Anvil. Companies across many industries have used our system to programmatically create documents for: HR Insurance Financial services and banking Legal Education Healthcare These are all industries that have entrenched paperwork processes, each of which requires deep knowledge to understand. There are many talented teams building innovative vertical-specific solutions. Anvil’s complete PDF API can help them focus on the core solution instead of wrestling with PDFs. By providing the digital, web-first building blocks for PDFs, Anvil is building the technology that helps accelerate the change from data stuck on paper and PDFs to a modern interconnected world with free data exchange. To sign up for our free developer sandbox or learn more about our API, head over to our developer center at www.useanvil.com/developers . There, you will find comprehensive documentation, simple tutorials, and client libraries to help you get started quickly and easily. Previously published at https://www.useanvil.com/blog/2021-02-10-announcing-anvil-api

Meet a Simple API for PDF Docs

Scaling Bitcoin On-Chain with Omnity

Omnity সহ বিটকয়েন অন-চেইন স্কেলিং

Bitcoin On-Chain skalieren mit Omnity

Escalando Bitcoin On-Chain con Omnity

Faire évoluer Bitcoin en chaîne avec Omnity

ओम्निटी के साथ बिटकॉइन को ऑन-चेन स्केल करना

Omnity によるオンチェーンでのビットコインのスケーリング

Omnity로 비트코인 온체인 확장

Escalando Bitcoin On-Chain com Omnity

Масштабирование биткойнов в цепочке с помощью Omnity

Omnity ile Bitcoin'i Zincir Üzerinde Ölçeklendirmek

Mở rộng quy mô Bitcoin trên chuỗi với Omnity

使用 Omnity 在链上扩展比特币

Infinite Scrolling vs Pagination: Making the Right Choice for React Apps

How to Write Your Own Typesafe React Router in 500 Lines

কিভাবে 500 লাইনে আপনার নিজের টাইপসেফ রিঅ্যাক্ট রাউটার লিখবেন

So schreiben Sie Ihren eigenen typsicheren React-Router in 500 Zeilen

Cómo escribir su propio enrutador Typesafe React en 500 líneas

Comment écrire votre propre routeur Typesafe React en 500 lignes

500 पंक्तियों में अपना खुद का टाइपसेफ रिएक्ट राउटर कैसे लिखें

独自のタイプセーフな React Router を 500 行で書く方法

500줄로 나만의 Typesafe React Router를 작성하는 방법

Como escrever seu próprio roteador Typesafe React em 500 linhas

Как написать свой собственный Typesafe React Router в 500 строк

Kendi Typesafe React Router'ınızı 500 Satırda Nasıl Yazabilirsiniz?

Cách viết Bộ định tuyến React Typesafe của riêng bạn trong 500 dòng

如何用 500 行代码编写自己的类型安全 React 路由器

ASP.NET Core is an open-source framework for building modern web applications. NUnit, on the other hand, is a unit-testing framework for C# developers. In this article, I’ll explain how you can use NUnit in testing to ensure that you have coverage on your web applications! ASP.NET Core Testing is a crucial step in software development as it ensures the reliability and quality of code while reducing debugging time and cost. This article touches on the benefits of testing with NUnit and will provide a step-by-step guide on how to implement unit testing in ASP.NET Core to improve your code quality. Let’s dive in! Understanding ASP.NET Core Testing ASP.NET Core is a widely used open-source framework for building web applications, and like any software, it can have issues that need to be addressed. One way to ensure that your application is reliable and meets the user’s needs is to perform rigorous testing. In this section, I will explain the basics of ASP.NET Core testing, the benefits of using NUnit for testing, and how to create an NUnit project to test an ASP.NET Core application. What is Testing in ASP.NET Core? ASP.NET Core testing is the process by which developers test an ASP.NET Core application to ensure that it works as intended. Testing can help to determine issues that may exist in both the front-end and back-end code. ASP.NET Core testing can be done using various testing frameworks, but in this article, we will focus on NUnit. It’s important to acknowledge that we have multiple different testing types available to us, regardless of what framework we’re using. With that said, many people talk about “unit” tests but there are “functional” or “integration” tests as well. I treat “unit” tests as tests that are much more isolated and require mocking out dependencies. In contrast, I use “functional” or “integration” tests to cover much more broad areas of a system. What’s the “best” way to test? The answer, in my opinion, is a mix across the spectrum of what’s available. Prioritize the styles of testing that give you the best levels of confidence in your code. Check out this video on testing approaches for more of my perspective on this: https://youtu.be/iBkSSuQBJx0?embedable=true Benefits of Testing with NUnit NUnit is an open-source unit testing framework for Microsoft .NET that is widely used in the development community. Some benefits of testing with NUnit include: Improved code quality – Automated testing with NUnit ensures that code is working as intended and helps catch errors earlier in the development process. Simplified debugging – By testing with NUnit, developers can quickly identify and isolate issues, which makes debugging much more manageable. Consistent functionality – Running NUnit tests assures developers that changes to the code do not impact the existing functionality of the application. Creating an ASP.NET Core Project for Testing To start unit testing in ASP.NET Core applications with NUnit, you need to have a project to test. You can either create a new project explicitly for testing or use an existing project. A good practice is to keep your test project separate from your production project—this way, any changes you make will only affect the test project. To explain this more clearly – you want to separate what you are using for supporting your tests from the code that you want to ship to production. In the same way that when you download an app to your phone you’re not getting all of the testing code from the app developer, when you deploy a web application you don’t want to deploy all of the test code with it. By separating out your deployable product code from your test code, you have the flexibility to have a dedicated test environment separate from your production environment! Setting up an NUnit Project Setting up an NUnit project is relatively simple and straightforward—there are just a few things to keep in mind. You need to make sure you have the correct NuGet packages installed, and you need to create a class file specifically for your unit tests. Once you’ve set up your NUnit project, you can start writing tests for your application. Let’s make sure you get the packages you need: NUnit – This is the testing framework itself. You’ll need this to be able to mark tests and use assertion logic in your tests! Microsoft.NET.Test.Sdk – If you’re running tests from Visual Studio, you’ll need to ensure you have the .NET test SDK included as well. Without this and JUST having NUnit, you’ll be able to mark your tests but they won’t get picked up to be able to run! NUnit3TestAdapter – Finally, you’ll need this test adapter to run the NUnit tests from inside the Visual Studio test explorer. With these Nuget packages added to your test project, you’re on your way to creating reliable and high-quality software! Next up, we’ll focus on creating the tests themselves. Writing Basic NUnit Tests in CSharp Now that we have a basic understanding of ASP.NET Core testing and how to set up an NUnit project, let’s dive into writing NUnit tests for an ASP.NET Core application. Writing Your First NUnit Test Before we get into the web side of things, the first step in writing NUnit tests is to write a simple test that validates that a method returns the expected output. Let’s say we have a method called on a class called that adds two numbers together. To write a test for this method, we would write the following code: Add Calculator using NUnit.Framework;

[TestFixture]
public class CalculatorTests
{
    [Test]
    public void Add_TwoNumbers_ReturnsSum()
    {
        // Arrange
        Calculator calculator = new Calculator();
        int x = 2;
        int y = 3;

        // Act
        int sum = calculator.Add(x, y);

        // Assert
        Assert.AreEqual(5, sum);
    }
} This code defines a test class, which contains the individual tests. The test method is decorated with the attribute, which tells NUnit that this method is a test. The method has three parts: [Test] Add_TwoNumbers_ReturnsSum Arrange section initializes the variables Act section performs the operation we want to test Assert section compares the actual result to the expected result This is a common format to follow for readable tests. And at this point, we’ve seen the basic setup for marking a test method and defining how we can assert conditions! Using Assertions to Validate Test Results Assertions are a fundamental part of NUnit tests — and all testing frameworks, for that matter. They provide a way for tests to perform comparisons between expected and actual values. The assertion part of a test should draw your attention to what’s truly being validated, and not just exercised. Remember, it’s one thing for a line of code to be executed, but it’s another thing for us to validate that the line of code we executed is doing what we expect! There are several types of assertions available in NUnit, including: – Tests if two values are equal. Assert.AreEqual(expected, actual) – Tests if a condition is true. Assert.IsTrue(condition) – Tests if a condition is false. Assert.IsFalse(condition) – Tests if an object is null. Assert.IsNull(object) – Tests if an object is not null. Assert.IsNotNull(object) These assertions can be used in the Assert section of a test method, as shown in the previous example. Testing Web APIs with NUnit in ASP.NET Core Testing web APIs is an essential part of ensuring that the functionality of an ASP.NET Core application works as intended. To write tests for web APIs, we can use the class provided by the namespace in C#. Here is an example of how to test a basic GET request using NUnit: HttpClient System.Net.Http using NUnit.Framework;
using System.Net.Http;
using System.Threading.Tasks;

[TestFixture]
public class MyApiTests
{
    [Test]
    public async Task Get_EndpointReturnsSuccessAndCorrectContentType()
    {
        // Arrange
        HttpClient client = new HttpClient();
        string url = "https://example.com/api/values";

        // Act
        HttpResponseMessage response = await client.GetAsync(url);
        string responseContent = await response.Content.ReadAsStringAsync();

        // Assert
        response.EnsureSuccessStatusCode();
        Assert.AreEqual("application/json; charset=utf-8",
            response.Content.Headers.ContentType.ToString());
    }
} In this example, we use an object to execute the GET request. The test checks if the response is successful and has the correct content type. HttpClient What’s the big problem with this though? It’s hitting a URL out on the Internet! Even if you change it to localhost or 127.0.0.1, you still need to find a way to manage the lifecycle of the application that you want to test! WebApplicationFactory with NUnit in ASP.NET Core To solve this, we can use a ! I recommend you as an additional primer to spinning up a web app to test. is agnostic to the testing framework you choose (xUNit, NUnit, or whatever else) so you can use it with what you have seen in this article so far. WebApplicationFactory check out this article on using WebApplicationFactory WebApplicationFactory To jump into a concrete code example, let’s see the following: using System.Net.Http;
using System.Threading.Tasks;

using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc.Testing;

using NUnit.Framework;

[TestFixture]
public class MyApiTests
{
    [Test]
    public async Task Get_EndpointReturnsSuccessAndCorrectContentType()
    {
        // Arrange
        var factory = new WebApplicationFactory<Program>().WithWebHostBuilder(builder =>
        {
            builder.UseEnvironment("Testing");
        });
        var client = factory.CreateClient();
        string url = "https://example.com/api/values";

        // Act
        HttpResponseMessage response = await client.GetAsync(url);
        string responseContent = await response.Content.ReadAsStringAsync();

        // Assert
        response.EnsureSuccessStatusCode();
        Assert.AreEqual("application/json; charset=utf-8",
            response.Content.Headers.ContentType.ToString());
    }
} Please note that the type parameter included here in the is because of using minimal APIs in a web project that we want to test. And if you’re using the minimal API approach, you may need to put this at the end of your program.cs file in your web application to publicly expose your class to your test project, or look into to expose this internal class to your test project: <Program> WebApplicationFactory Program InternalsVisibleTo https://youtu.be/TjsM3oVg5_w?embedable=true Benefits of NUnit in ASP.NET Core Tests Unit testing with NUnit in ASP.NET Core can provide a range of benefits that help create high-quality software. In this section, we will discuss how using NUnit for testing can improve your code’s reliability and quality, as well as speed up the debugging process. Increased Code Reliability and Quality NUnit tests are automated, which means that they can run quickly and easily. Running tests regularly can help you catch errors and spot issues early on in the development lifecycle, allowing for prompt and effective solutions. By running tests regularly with NUnit, teams can be confident that their code is working as it should, and it provides relevant data about the quality of the code. Automatic testing can also ensure that there are no regression bugs that would otherwise go unnoticed. Faster and Easier Debugging Debugging software can be a challenging task for many developers. By running NUnit tests, you can isolate bugs early on in the development cycle and fix them as quickly as possible. NUnit makes use of the “Arrange-Act-Assert” pattern, which allows developers to identify the problem if a test fails. This pattern is particularly useful in allowing developers to isolate errors and produce effective debug reports. Ensuring Consistent Functionality Through Code Changes The functionality of an application can change when code is added or modified. Testing with Nunit in ASP.NET Core allows you to run tests regularly and ensure that any changes to the code don’t impact existing functionality. This process is necessary to ensure consistent functionality across the development lifecycle of any project — and using functional/integration test coverage on ASP.NET Core web APIs can be incredibly powerful for helping build this confidence. NUnit testing can provide a wide range of benefits to developers looking to create high-quality software. By relying on NUnit test-driven development, you can: Improve the reliability and quality of your code Reduce the time and effort needed to debug Help ensure consistent functionality throughout the development cycle Wrapping Up NUnit in ASP.NET Core Learning how to use NUnit in ASP.NET Core is a valuable skill for any C# developer creating web APIs. Not only does it increase the reliability and quality of your code, but it also ensures consistent functionality through code changes. Additionally, debugging becomes faster and easier, saving time and resources. Catching issues now is *WAY* better than hearing from your customer. By leveraging NUnit in ASP.NET Core, you can catch bugs early on, preventing them from becoming larger issues down the line. As a result, you and your development team can produce higher-quality software in less time. I highly recommend incorporating NUnit testing into your work with ASP.NET Core — and ! if not NUnit then at least consider xUnit With a willingness to experiment with different testing approaches, your team can take its testing capabilities to the next level! Mix and match your types of testing coverage to greatly increase your level of confidence in your changes. If you found this useful and you’re looking for more learning opportunities, consider and check out my ! subscribing to my free weekly software engineering newsletter free videos on YouTube Also published here.

Getting Started With NUnit in ASP.NET Core

Testing is an essential part of that involves verifying the functionality and performance of an application to ensure it meets the intended purpose. In ASP.NET Core, effective testing can help identify and prevent potential issues before they arise in production environments. software development In this article, I’ll guide you through working with in . WebApplicationFactory ASP.NET Core The is a powerful tool that provides a simplified way to set up and execute integration and unit tests for ASP.NET Core applications. By leveraging the WebApplicationFactory, you can better automate your testing process and achieve consistent testing results. Win-win! WebApplicationFactory Throughout the article, I’ll provide examples of how to use WebApplicationFactory to create coded tests. If you’re ready to improve your testing with ASP.NET Core, let’s jump in! Overview of WebApplicationFactory WebApplicationFactory is a class in the namespace that provides a way to create a TestServer instance to host an ASP.NET Core application during testing. It is a powerful tool that simplifies and streamlines the testing process for ASP.NET Core developers. Microsoft.AspNetCore.Mvc.Testing One of the main advantages of using is that it can help test controllers that interact with the rest of the web application. creates an in-memory TestServer instance of the web application being tested, providing an environment to test HTTP requests and responses. The in-memory TestServer instance is set up and configured in the same way as a production instance of the web application. This means that is helpful for integration tests that call multiple APIs and require testing of the interaction of different parts in the web application. WebApplicationFactory WebApplicationFactory WebApplicationFactory also has advantages when writing tests isolating parts of your system. It’s possible to test a single function directly without interacting with other parts of the system, such as databases, authentication systems, etc. This makes targeted testing quicker and easier. WebApplicationFactory is simple to use and works entirely within C#. Creating a factory is straightforward. A base class is created with configurations, which is used to build the host from these configurations and finally can be instantiated. The is then used to interact with the in-memory TestServer. WebApplicationFactory WebApplicationFactory HttpClient HttpClient Writing Unit Tests with WebApplicationFactory Unit testing is key for software development, particularly in an environment where testing is continuous. These types of tests are lightweight and fast. In ASP.NET Core, unit testing is important to ensure that individual components work as expected. When it comes to ASP.NET Core testing with , writing unit tests is easy. provides a standardized way to build integration tests, making it easy to write and maintain tests. WebApplicationFactory WebApplicationFactory Setting Up Dependencies To demonstrate the process of writing unit tests with WebApplicationFactory, let’s take an example of a simple test that checks if a controller action returns the correct response. To do this, a test project should be created and the package added to the project. The upcoming code examples assume . Microsoft.AspNetCore.Mvc.Testing that xUnit is being used as the testing framework To test an HTTP endpoint with WebApplicationFactory, a simple test can be written to ensure that the response coming back from our endpoint matches a particular string. Take into account that we should think of issues like the status code, the response’s content, performance, and the feedback to the user if a failure occurs. Using HttpClient with WebApplicationFactory We’ll use an to send HTTP requests and read HTTP responses from a specific endpoint. It’s a key part of testing with since it provides a means to interact with the testing server. HttpClient WebApplicationFactory To use with , the method must be called from an instance of the factory. This method creates a new client that can be used to send HTTP requests to the in-memory TestServer instance created by . HttpClient WebApplicationFactory CreateClient() WebApplicationFactory An example of using with is provided below: HttpClient WebApplicationFactory public class TestFixture : WebApplicationFactory<Startup>
{
    protected override void ConfigureWebHost(IWebHostBuilder builder)
    {
        builder.UseEnvironment("Testing");
        base.ConfigureWebHost(builder);
    }
}

public class SampleControllerTests : IClassFixture<TestFixture>
{
    private readonly HttpClient _client;

    public SampleControllerTests(TestFixture factory)
    {
        _client = factory.CreateClient();
    }

    [Fact]
    public async Task SampleController_ReturnsOkResult()
    {
        // Arrange
        var request = new HttpRequestMessage(new HttpMethod("GET"), "/api/sample");

        // Act
        var response = await _client.SendAsync(request);

        // Assert
        response.EnsureSuccessStatusCode(); // Status Code 200-299
    }
} In the example above, we use with to test a specific endpoint. Here, a class inherits from WebApplicationFactory and creates a new instance of class by specifying it with the type parameter. Then, the method is called to return an object, which we then use to send an HTTP GET request to a specific endpoint. Finally, we ensure that the status code of the response was a 2xx Success status code. HttpClient WebApplicationFactory TestFixture Startup CreateClient() HttpClient Integration Testing with WebApplicationFactory and ensure that they work together as expected. In ASP.NET Core, integration testing is particularly important since the framework provides a wide range of tools and components that need to work together seamlessly. The more moving pieces, the more important different types of coverage are! Integration testing is used to test the interactions between different parts of an application For integration tests in ASP.NET Core, the class creates an in-memory TestServer instance that simulates a production environment and allows you to send requests to the application through the HTTP.Verb methods (i.e GET, POST, DELETE, etc). The tests can be used to evaluate if APIs and database interactions are done correctly, and it allows testing the overall function of the application. WebApplicationFactory An example of writing an integration test with would be to test the interaction between multiple APIs and the database. In this example, we test if a register endpoint accepts new users and their credentials are stored correctly in the database. WebApplicationFactory public class RegisterTests : IClassFixture<WebApplicationFactory<Startup>>
{
    private readonly HttpClient _client;

    public RegisterTests(WebApplicationFactory<Startup> factory)
    {
        _client = factory.CreateClient();
    }

    [Fact]
    public async Task Register_ReturnsSuccessResult()
    {
        // Arrange
        var user = new User() { Email = "[email protected]", Password = "testpassword" };
        var payload = JsonConvert.SerializeObject(user);
        var content = new StringContent(payload, Encoding.UTF8, "application/json");

        // Act
        var response = await _client.PostAsync("/api/register", content);

        // Assert
        response.EnsureSuccessStatusCode();
        var responseAsString = await response.Content.ReadAsStringAsync();
        Assert.Contains("Success", responseAsString);
    }
} In the example above, we create a new instance of the class, then call the method to get an instance of that interacts with the TestServer instance. We test the registration endpoint and verify whether the response returns a success status code. WebApplicationFactory Startup CreateClient() HttpClient Best Practices for Integration Testing with WebApplicationFactory Here are some best practices for integration testing with : WebApplicationFactory Use a clean slate for the database: Before running integration tests, make sure to delete any existing test data from the database. This ensures that tests are independent and repeatable. Use realistic data: Tests should use realistic data that simulates the real-world use of the application. Test all critical APIs: Tests should cover all critical APIs in the application, including those related to authentication and authorization. Mock external dependencies: When possible, external dependencies should be mocked to isolate the tests and minimize interference. Otherwise, you can leverage a tool like Testcontainers! Test edge cases: Edge cases should be tested to ensure that the application can handle unusual inputs and conditions. Run tests frequently: Tests should be run frequently during the development process to catch issues early and reduce the cost of fixing them. If you have CI/CD, hook these tests up! Integration testing with can be a key part of ensuring your ASP.NET Core development goes smoothly. As a C# developer, using can simplify the process while allowing for increased efficiency and improved code quality. WebApplicationFactory WebApplicationFactory Mocking Dependencies in Tests with WebApplicationFactory Mocking dependencies in testing is a technique that isolates the code being tested from external dependencies, such as databases or web APIs. This helps simplify tests and allows developers to test individual components independently. Mocking dependencies is especially important in integration testing, where tests often rely on several different components. Mocking allows developers to isolate the component being tested and verify that it works as intended. In ASP.NET Core development, provides a way to mock dependencies in tests. The class can be overridden to create a new instance of the class that can be used in the tests. WebApplicationFactory WebApplicationFactory<TStartup> HttpClient Here’s an example of how to use to mock a dependency in an ASP.NET Core application: WebApplicationFactory public class SampleServiceTests : IClassFixture<WebApplicationFactory<Startup>>
{
    private readonly HttpClient _client;

    public SampleServiceTests(WebApplicationFactory<Startup> factory)
    {
        _client = factory
            .WithWebHostBuilder(builder =>
            {
                builder.ConfigureTestServices(services =>
                {
                    services.AddTransient<ISampleDependency, MockSampleDependency>();
                });
            })
            .CreateClient();
    }

    [Fact]
    public async Task Sample_Service_Calls_Dependency()
    {
        // Arrange
        var request = new HttpRequestMessage(new HttpMethod("GET"), "/api/sample");

        // Act
        var response = await _client.SendAsync(request);

        // Assert
        response.EnsureSuccessStatusCode();
    }
} In the example above, we override an instance of an implementation with a mocked version using the method inside the class. Then, we create a new instance of that includes the mocked dependency. Finally, it is used to send the HTTP GET request to the required endpoint. ISampleDependency ConfigureTestServices WebApplicationFactory HttpClient Using the WebApplicationFactory.CreateClient Method provides a simple way to mock dependencies in tests using the method. creates a new instance of that can be used to communicate with the in-memory TestServer instance created by . We can layer in the Moq nuget package to assist us here! WebApplicationFactory CreateClient CreateClient HttpClient WebApplicationFactory Here’s an example of how to use to mock a dependency in an ASP.NET Core application: WebApplicationFactory.CreateClient public class SampleControllerTests : IClassFixture<WebApplicationFactory<Startup>>
{
    private readonly HttpClient _client;

    public SampleControllerTests(WebApplicationFactory<Startup> factory)
    {
        _client = factory.CreateClient();
    }

    [Fact]
    public async Task Sample_Controller_Dependency_Mock()
    {
        // Arrange
        var mockDependency = new Mock<IDependency>();
        mockDependency.Setup(m => m.GetResult()).Returns("Mocked result");

        // Act
        var response = await _client.GetAsync("/api/sample");

        // Assert
        response.EnsureSuccessStatusCode();
        var responseContent = await response.Content.ReadAsStringAsync();
        Assert.Contains("Mocked result", responseContent);
    }
} In the example above, a new instance of is created using , and a mocked dependency is injected into the test by overriding the implementation of the interface. The test verifies that the endpoint returns the expected response with the overridden implementation. HttpClient WebApplicationFactory.CreateClient IDependency Wrapping Up WebApplicationFactory in ASP.NET Core Testing is an important part of software development (or at least you should make that the case!), especially in ASP.NET Core. Without proper testing, code can be susceptible to bugs, security issues, and unintended consequences. The in ASP.NET Core is a great tool because of its convenience, flexibility, and ease of use. WebApplicationFactory Using the for testing helps you to write effective unit tests and integration tests, including those that test HTTP endpoints. It also allows you to mock dependencies in your applications for more focused testing. I covered how to create a instance, write unit tests and integration tests using , and mock dependencies with as well! WebApplicationFactory WebApplicationFactory WebApplicationFactory Remember to consider best practices and remain pragmatic when testing ASP.NET Core applications with . Context is key and every situation will be different. WebApplicationFactory Also published here.

Using the WebApplicationFactory in ASP.NET Core for Testing

The Ultimate React State Management Handbook

Introduction This guide is a supplement to . In the introduction of that guide, I noted that Firebase offers other authentication schemes beyond basic Email/Password authentication. One of those alternatives is . How to Set Up Firebase Authentication with a React Web Application Passwordless Authentication Passwordless authentication is an attractive option when building applications. It simplifies the user experience since your users have no need to remember their password(s) and thus never have to worry about losing them either. It also facilitates the development experience since there is no need to design any password capture or management logic. In this guide, you will build a simple Login/Confirm/Profile/Logout workflow that implements Firebase's passwordless authentication. Before You Begin Google sets various Firebase Authentication . If you are using the free plan, note that you will be to 5 sign-in link emails per day. While the Spark plan may be sufficient for testing purposes, you will need to upgrade to the pay-as-you-go plan to go above this limit. limits Spark limited Blaze Prerequisites Throughout this guide, I will refer to the guide as the and the associated project as the . How to Set Up Firebase Authentication with a React Web Application prerequisite guide prerequisite project To complete this guide, you will need to have: Completed the prerequisite guide, including all of its prerequisites. Step 1 - Enabling Passwordless Authentication With Your Firebase Project In the prerequisite guide, you created a new Firebase project for basic email/password authentication. Now, you will enable that same project for passwordless authentication.  Login to your and click on . Firebase account Go to Console Click on your authentication project listed on the Firebase projects dashboard. This guide uses the project name . my-auth-test Click on in the left panel menu. authentication Click on the tab in the main window. Sign-in method From your work in the prerequisite guide, the table should already display under the column with a status of . Click on the pencil icon to open the configuration panel for the provider. Sign-in Providers Email/Password Providers Enabled Email/Password Click on the toggle to enable the . Email link (passwordless sign-in) Click . Save Your Firebase project is now configured to support passwordless authentication. Step 2 - Creating a New React Project and Installing Packages Step 2a - Creating a New React Project Create a new React project using your desired application name. This guide uses . passwordless-auth npx create-react-app passwordless-auth Step 2b - Installing Packages This guide requires the installation of 3 Node.js packages: : The Firebase SDK. Firebase : For routing. React Router DOM : For styling. Bootstrap Install each of the three packages above via : npm npm install firebase npm install react-router-dom npm install bootstrap Step 3 - Copy from the Prerequisite Project firebase.js In the prerequisite project, you created a file that uses your Firebase project configuration data to create an instance of the Firebase Authentication service. Your file should have the following structure with Firebase project configuration values: firebase.js firebase.js your import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
    apiKey: "AIzaSyDiUlY68W9Li_0EIkmdGdzD7nvqCT9kHnY",
    authDomain: "my-auth-test-fbd48.firebaseapp.com",
    projectId: "my-auth-test-fbd48",
    storageBucket: "my-auth-test-fbd48.appspot.com",
    messagingSenderId: "1078604952662",
    appId: "1:1078604952662:web:5d0b908439cfb5684ab7f7"
}

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

export { auth } Copy to your new React project folder. firebase.js If you need to review your Firebase project configuration, click on the gear icon next to in the left panel menu. The tab should already be selected. Scroll down to the section containing the panel. The option within the panel should already be selected. Your project configuration values will be listed in the displayed code block. Project Overview General Your Apps Web Apps npm Web apps Step 4 - Building the React Application Step 4a - Overview of React Application Components The React application will consist of 5 components: , , , , and . App Layout Login Confirm Profile App The component defines the overall application structure, including routing. App Layout The component specifies the application markup that remains consistent across all routes. Layout Login The user's entry point into the application is the login form. When a user attempts to login via his email address, an email with a sign-in link is sent to his/her email address. Confirm The user is routed to the page when they click on a sign-in link. Confirm The page requests the user to confirm the email address used when they logged in. Profile The user is routed to the page after confirming their email address. Profile The user can click a logout button on the page to logout of his/her account. Profile The final directory will contain the following files: src src
|__ index.js
|__ firebase.js // Copied from prerequisite project in Step 3.
|__ App.js
|__ Layout.jsx
|__ Login.jsx
|__ Confirm.jsx
|__ Profile.jsx Step 4b - Cleaning Up the React Project Template and Copying Files from the Prerequisite Project You can delete the same files from the React project template as described in Step 5b.1 of the prerequisite guide. Delete the following files from your React project: reportWebVitals.js setupTests.js logo.svg index.css App.css App.test.js Copy from the prerequisite project to your new project folder. This guide uses the same file. If you need to rebuild , see Step 5b.2 of the prerequisite guide or copy the code block below. index.js index.js Copy from the prerequisite project to your new project folder. This guide uses the same file. If you need to rebuild , see Step 5d of the prerequisite guide or copy the code block below. Optionally, you may update the project text in the tag of to or whatever title you may prefer. Layout.jsx Layout.jsx <p> Layout.jsx React With Firebase Passwordless Authentication Your and files should be as follows: index.js Layout.jsx // index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import "bootstrap/dist/css/bootstrap.min.css";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
); // Layout.jsx
import { Outlet } from "react-router-dom";

const Layout = () => {
    return(
        <div className = "container-fluid">
            <div className = "row justify-content-center mt-3">
                <div className = "col-md-4 text-center">
                    <p className = "lead">React With Firebase Passwordless Authentication</p>
                </div>
                <Outlet />
            </div>
        </div>
    )
}

export default Layout Step 4c - Building App.js The file is largely the same as it is in the prerequisite project, with changes to only two lines. To facilitate building the file, copy from the prerequisite project to your new project folder. App.js App.js Delete the following line from the file and replace it as shown below: import // Delete this line:
import Signup from "./Signup"; // Replace it with:
import Confirm from "./Confirm"; Delete the following from the file and replace it as shown below: <Route> // Delete this line:
<Route path = "/signup" element = { <Signup></Signup> } ></Route> // Replace it with:
<Route path = "/confirm" element = { <Confirm></Confirm> } ></Route> Save . App.js The complete file should now be as follows: import Layout from "./Layout";
import Login from "./Login";
import Confirm from "./Confirm";
import Profile from "./Profile";
import { BrowserRouter, Routes, Route } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
          <Route path = "/" element = { <Layout></Layout> }>
            <Route index element = { <Login></Login> }></Route>
            <Route path = "/confirm" element = { <Confirm></Confirm> } ></Route>
            <Route path = "/profile" element = { <Profile></Profile> } ></Route>
          </Route>
      </Routes>
    </BrowserRouter>
  )
}

export default App Note that the component is once again the home route of the application as it was with the prerequisite project. Login Step 4d - Building Login.jsx In the case of passwordless authentication, you obviously don't need to include a password field, nor do you need to manage state for password input. So, the login form only needs to capture the user's email address. Create a new file in the directory. Login.jsx src Add the following code: import { useState } from "react";
import { auth } from "./firebase";
import { sendSignInLinkToEmail } from "firebase/auth";

const Login = () => {
    const [email, setEmail] = useState("");
    const [notice, setNotice] = useState("");

    const actionCodeSettings = {
        url: "http://localhost:3000/confirm",
        handleCodeInApp: true
    }

    const callSendSignInLinkToEmail = (e) => {
        e.preventDefault();

        sendSignInLinkToEmail(auth, email, actionCodeSettings)
        .then(() => {
            setNotice("An email was sent to your email address. Click the link in the email to login.");
        })
        .catch((error) => {
            setNotice("An error occurred when sending a login link to your email address: ", error.name);
        })
    }

    return(
        <div className = "container">
            <div className = "row justify-content-center">
                <form className = "col-md-4 mt-3 pt-3 pb-3">
                    { "" !== notice &&
                        <div className = "alert alert-warning" role = "alert">
                            { notice }    
                        </div>
                    }                  
                    <div className = "form-floating mb-3">
                        <input type = "email" className = "form-control" id = "exampleInputEmail" placeholder = "name@example.com" value = { email } onChange = { (e) => setEmail(e.target.value) }></input>
                        <label htmlFor = "exampleInputEmail" className = "form-label">Email address</label>
                    </div>
                    <div className = "d-grid">
                        <button type = "submit" className = "btn btn-primary pt-3 pb-3" onClick = {(e) => callSendSignInLinkToEmail(e)}>Submit</button>
                    </div>
                </form>
            </div>
        </div>
    )
} Save . Login.jsx Upon capturing the user's email address, the form sends an email with a sign-in link to his/her address via Firebase's method. If successful, the user is notified that the email has been sent. Note that the object is passed as a parameter to the method and includes the URL that the user will be routed to when he/she clicks on the emailed sign-in link. In this case, the URL maps to the route specified in . Login.jsx sendSignInLinkToEmail actionCodeSettings sendSignInLinkToEmail /confirm App.js Step 4e - Building Confirm.jsx Firebase's method is used to sign in a user who has clicked on a sign-in link. As you will see in a moment, the method takes an parameter, and the value of must match the email address that the user used when logging in via the login form. presents the user with a form to confirm his/her email address and subsequently attempts to sign in the user. signInWithEmailLink email email Confirm.jsx Create a new file in the directory. Confirm.jsx src Add the following code: import { useState } from "react";
import { auth } from "./firebase";
import { isSignInWithEmailLink, signInWithEmailLink } from "firebase/auth";
import { useNavigate } from "react-router-dom";

const Confirm = () => {
    const navigate = useNavigate();
    const [email, setEmail] = useState("");
    const [notice, setNotice] = useState("");

    const callSignInWithEmailLink = (e) => {
        e.preventDefault();

        if (isSignInWithEmailLink(auth, window.location.href)) {
            signInWithEmailLink(auth, email, window.location.href)
            .then(() => {
                navigate("/profile");
            })
            .catch((error) => {
                setNotice("An occurred during sign in: ", error.name);
            })
        }
    }

    return(
        <div className = "container">
            <div className = "row justify-content-center">
                <form className = "col-md-4 mt-3 pt-3 pb-3">
                    { "" !== notice &&
                        <div className = "alert alert-warning" role = "alert">
                            { notice }    
                        </div>
                    }                  
                    <div className = "form-floating mb-3">
                        <input type = "email" className = "form-control" id = "exampleConfirmEmail" placeholder = "name@example.com" value = { email } onChange = { (e) => setEmail(e.target.value) }></input>
                        <label htmlFor = "exampleConfirmEmail" className = "form-label">Please confirm your email address</label>
                    </div>
                    <div className = "d-grid">
                        <button type = "submit" className = "btn btn-primary pt-3 pb-3" onClick = {(e) => callSignInWithEmailLink(e)}>Confirm</button>
                    </div>
                </form>
            </div>
        </div>
    )
}

export default Confirm Save . Confirm.jsx The method first checks if the sign-in link that the user is using is valid. If it is, the method is called to sign in the user. To reiterate, the value passed to the method must match the email address the user used with the login form. Note that if the user is a new user (i.e., it is his/her first time signing in), Firebase will automatically create the user in the Firebase Authentication store. This is another example of the simplified experience offered by passwordless authentication: account creation for new users is handled automatically. isSignInWithEmailLink signInWithEmailLink email signInWithEmailLink Step 4f - Building Profile.jsx The final component that you will build is . Users are routed to this component when they sign in successfully via . The route welcomes the user with their email address and provides a button to logout. Upon logout, the user is routed back to the component. Profile.jsx Confirm.jsx Login Create a new file in the directory. Profile.jsx src Add the following code: import { auth } from "./firebase";
import { signOut } from "firebase/auth";
import { useNavigate } from "react-router-dom";

const Profile = () => {
    const navigate = useNavigate();

    const logoutUser = async (e) => {
        e.preventDefault();

        await signOut(auth);
        navigate("/");
    }

    return(
        <div className = "container">
            <div className = "row justify-content-center">
                <div className = "col-md-4 text-center">
                    <p>Welcome <em className = "text-decoration-underline">{ auth.currentUser.email }</em>. You are logged in!</p>
                    <div className = "d-grid gap-2">
                        <button type = "submit" className = "btn btn-primary pt-3 pb-3" onClick = {(e) => logoutUser(e)}>Logout</button>
                    </div>                
                </div>
            </div>
        </div>       
    )    
}

export default Profile Save . Profile.jsx Step 5 - Testing the Application Start the React application: npm start Navigate to in your browser if your browser does not launch automatically. You should see the form. locahost:3000 Login Enter the email you would like to use to sign in and click . If the submission is successful, a notification will be displayed that an email with a sign-in link was sent to your email address. Submit Login to your email account and look for the Firebase sign-in link email. It should have a subject line similar to where the 13-digit number sequence represents the of your Firebase project (see Step 3 of this guide). In the section below, I will explain how you can modify your Firebase project name to display a "user-friendly" name in sign-in link emails. For now, open the sign-in link email and click on the sign-in link. You will be routed to the form. Sign in to project-1078604952662 messagingSenderId Optional Confirm Enter the email address you used when signing in on the form. Click . If the confirmation is successful, you will be routed to the page. Confirm Confirm Profile Click the button on the page to sign out. If the sign-out is successful, you will be routed back to the form. Logout Profile Login The steps above capture the workflow for the application. Optional: Modifying Your Project Name You can change your project name so that sign-in link emails sent by Firebase display a "user-friendly" name instead of, for example, . Login to your and click on . project-1078604952662 Firebase account Go to Console Click on your authentication project listed on the Firebase projects dashboard. Click on the gear icon next to in the left panel menu. The tab should already be selected. Project Overview General Scroll down to the option in the section. Public-facing name Your Project Click on the pencil icon and modify your project name as desired. Click . Your sign-in link emails will now display the updated project name. Save Conclusion and Next Steps Passwordless authentication seems to be an increasingly popular choice among application developers, and understandably so. Beyond the obvious advantage of eliminating the need to manage passwords, there is also no need for email verification since the process of sending the sign-in link is a verification in and of itself. As with the prerequisite project, the implementation here is basic. You might consider simple enhancements such as: Blocking/blacklisting particular email address domains (i.e., common spam email domains). Locally storing the email address entered by the user on the page and checking for the existence of the email address on the page. With this approach, if the user clicks on a sign-in link on the same device where he/she accessed the page, he/she would not need to enter his/her email address again on the page as it would be recovered from local storage. This provides for an even more frictionless user experience. Login Confirm Login Confirm You can learn more about Firebase Passwordless Authentication via the . official documentation

How To Set Up Firebase Passwordless Authentication With A React Web Application

কিভাবে একটি প্রতিক্রিয়া ওয়েব অ্যাপ্লিকেশন দিয়ে ফায়ারবেস পাসওয়ার্ডহীন প্রমাণীকরণ সেট আপ করবেন

So richten Sie die passwortlose Firebase-Authentifizierung mit einer React-Webanwendung ein

Cómo configurar la autenticación sin contraseña de Firebase con una aplicación web React

Comment configurer l'authentification sans mot de passe Firebase avec une application Web React

रिएक्ट वेब एप्लिकेशन के साथ फायरबेस पासवर्ड रहित प्रमाणीकरण कैसे सेट करें

React Web アプリケーションで Firebase パスワードレス認証を設定する方法

React 웹 애플리케이션으로 Firebase 비밀번호 없는 인증을 설정하는 방법

Como configurar a autenticação sem senha do Firebase com um aplicativo da Web React

Как настроить беспарольную аутентификацию Firebase с помощью веб-приложения React

React Web Uygulamasıyla Firebase Parolasız Kimlik Doğrulaması Nasıl Kurulur

Cách thiết lập xác thực không cần mật khẩu Firebase với ứng dụng web React

如何使用 React Web 应用程序设置 Firebase 无密码身份验证

a SWOT analysis is an evaluation of the fundamental, operational, technical, social, economic, and even, to some degree, administrative elements of a project. This is not a model to be used for trading purposes. (NFA, DYOR) *Note: Composed of four elements, Strengths, Weaknesses, Opportunities, and Threats, a SWOT analysis framework provides excellent insight for establishing a high-level understanding of the state of a project's well-being through the lens of a birds-eye view. It can help formulate decisions around which areas require more attention, set performance goals, and organize a foundational understanding of where a project is headed. Rarely (if ever) used in crypto, it is time to apply this timeless method of evaluation to the digital asset space. Today, Stacks (STX), the layer 2 solution that is bringing smart contract capabilities to the Bitcoin network, will get a . SWOT 💪 Strengths (Internal) (Helpful) 1. PoX Consensus Model This is a very novel, creative solution for tithing the operational logic of the Stacks network to Bitcoin. Proof-of-transfer is a mechanism that utilizes transactional entropy as the underlying modality to mint new tokens. Credit must be given to Stacks for creating this system (which never existed prior), and it acts as a very abstract social pegging. Based on the use of assets from Proof-Of-Work-based chains, miners on the Bitcoin Network transfer their assets to Validators on Stacks (called Stackers) in return for the chance to stream the next batch of blocks and receive the newly minted STX tokens. 2. On-Chain TVL increasing The trendline of how much value is locked on Stacks in USD terms has been showing directionally improving. While it is possible that the trend benefits alongside a greater market recovery from the beginning of 2023, the fact there are already DEFI and NFT initiatives taking place on-chain signals a blue ocean of opportunity. 3. sBTC Attempting to bring TVL into its ecosystem in the form of Bitcoin and replicate the massive success of WBTC, sBTC promises to be the most trustless method of bridging BTC. Utilizing a two-way pegging system where users would deposit BTC into a nominated address that would then, in turn, be minted on Stacks at a 1:1 ratio and de-peg or move their assets back off of Stacks onto Bitcoin. What sets sBTC apart from all other pegging systems in the industry today is the architecture of capital flows. Bridging a BTC from Bitcoin to Stacks is permissionless and maximally frictionless; withdrawing requires some form of authority attestation. Stacks has devised a model for establishing the withdrawal authority in a maximally decentralized way. 4. Bridges to EVM chain Connecting the most prominent networks in terms of unlocks a new degree of capital, a new grade of developers, and a greater surface area for potentially marketing Stack's network in the smorgasbord of applications that live around the EVM ecosystem. At this time, Stacks is only bridged to Ethereum and Binance Smart Chain; however, introducing each new network should provide the project with some exciting technical roadmap developments over the next months/years. 5. Uses Bitcoin as Data Availability Layer In the new modular landscape where technologies are constantly introducing more complexity and more diversity in an attempt to cater to a still extremely young market, Stack’s focus on the Bitcoin ecosystem for data availability brings a novel level of decentralization and security to the dApp space. Data availability is arguably the most important part of any decentralized information system; given that Bitcoin is the most resilient (by raw computational power) and the most ridging, the data that Bitcoin's network governs can be thought of as being the most secure. This anchoring to Bitcoin allows STX to inherit some of its most desirable properties. 6. STX token was sold as an Approved Security Stacks token was the first to receive the regulatory green light to be sold to the public as a compliant digital asset. This makes STX an extremely interesting asset for potential Tradfi market participants. The sale took place in 2019, setting a precedent for any other projects in the space to follow in their footsteps. 7. STX Validator Incentives STX has one of the few, possibly only, models for the network participants (validators) to earn real yield through their involvement. Given that Stackers actually receive BTC that is used within its consensus model, there can be a real-world demand vector attributed to the STX token (even if only through second or third-degree relationships). 😞 Weaknesses (Internal) (Harmful) 1. BNS Abandoned Twice Stacks released BNS (Bitcoin Name Services) sometime in July of 2022. With over a year of observation, it seems that BNS does not really have that much of an important place in the digital asset market. Surely, it was released in the mother of all crypto bear markets, where approximately 300,000 BNS domains were sold. However, it has drawn a pattern of hype followed by absolute disregard. If the hype cooled down to a low of -95%, it would be feasible, but as the charts show us, the hype is followed by a fall to actual 0 in some cases. Moreover, all on-chain activity is to some degree faked by either project founders or supporters, or at the very least not Sybil conscious (a single entity can easily just own multiple BNS domains), likely arriving at a true number some odd 10x lower than the total amount sold. *This is by no means an existential crisis of any kind for Stacks, just some worthwhile food for thought in gauging ecosystemic resilience. 2. Bitcoin MEV Sharing a security model is known to be an obvious risk factor for MEV. Stacks was (and at this time still is) subject to the economic vulnerability present in the current version of PoX, where Bitcoin Miners can technically conduct fraudulent transactions without there being any risk to them; Stacks Network cannot punish Bitcoin Miners. Savvy miners came in and began only to include the actions related to their own nodes, pushing assets through a bottleneck that totally eliminated competition from other STX miners. 🧐 Opportunities (External) (Helpful) 1. Ultra Low Network DAU/DAA Both an opportunity and a threat. At the painfully modest level of roughly 3,000 Daily active users (not knowing how many of these are Sybils or bots), in the event the network gains a tiny portion of the interest that will flood the markets at some point, the potential external economic impact easily qualifies as enough to break previous ATH's. Moreover, considering how much quality infrastructure has actually been developed in the process, is STX attracts the developer community, then orders of magnitude growth await in terms of useability, adoption, and access. 2. No Real Competition Stacks has carved out a decently strong reputation for itself as THE project that is approaching Bitcoin programmability, scalability, and interoperability in the most crypto-pure way "decentralized." Positioned very uniquely against the few other participants (Liquid, Lighting Network, Rootstock), Stacks is the only one to provide the spectrum of benefits with minimal negative externalities. 3. Appealing to TradFi Stacks has carved out a niche that ticks the boxes for many traditional financial entities to be interested in participating in its ecosystem. The real yield of Bitcoin, the security of Bitcoin, a digital asset that was brought to market under regulatory supervision, scalable smart contract environment, and reputable findings with tremendous backing from prominent VCs. STX is easily crypto that likely every major enterprise will, at the very least, consider in their Web3 journies. 😳 Threats (External) (Harmful) 1. Graveyard of Bitcoin-based Solutions Rootstock, colored coins, Ordinals, and a handful of other attempts have been made to introduce more functionality on Bitcoin. Nearly all of them have failed to pick up steam, existing only within tiny niche communities until eventually dying off and becoming relics. If attempting to evaluate the long-term survivability of Stacks based on the niche it is operating in, the odds are stacked against them (pun intended). 2. Ultra Low Network DAU/DAA Both an opportunity and a threat. Ultra-low levels of adoption could be a direct indicator of the relative unimportance of the project or perhaps just a failure in marketing to users. Considering that at the absolute peak hype, the Stacks networks showed just about 9,000 daily active addresses. More likely than not, a decent portion of this can be attributed to bot activity, which dampens the interest levels even further. This extremely low level of engagement shows one of two things: either honesty from the network operators in showing activity or total disregard for the network, and the first inadvertently points to the second. Takeaway: Positive, unorthodox overall feeling about the project. Technology is there. Unique market position and produce offering is there. Marketing and social presence are definitely lagging, but out of all things, it is easiest to sort out. I'm not saying building communities is easy; I'm saying that building quality products is much more noble. Conclusion: Stacks is to Bitcoin what Polygon is to Ethereum. To be totally honest, I was an extreme skeptic of stacks. I actually considered it trash for a long while. But, after a thorough digging, I am humbled to admit that I was wrong; it's legit. While I now see the value proposition and understand why institutions might find this attractive, I would still NOT deposit my Bitcoin into sBTC and will most likely never use the smart contract network itself. Would I invest in the token itself (STX)? Yes. Small, controlled DCA with a better chance for higher returns than just holding Bitcoin. Under a different set of circumstances (where I had far more wealth), I would definitely explore becoming a validator on their network, but from my calculations, anything less than ~$500,000 is not worth the time. If you know something that I don't or feel as though I might have missed anything worth noting, please do share. I would tremendously appreciate some feedback. Thank you so much for reading, I hope this serves you well on your journey. Live long and prosper 🥂

The Stacks (STX) SWOT Analysis

I'm really excited to share some advanced with you today. React Router is an amazing tool that enables us to create dynamic and smooth navigation in our applications. React Router techniques React While it is commonly used for basic routing needs, there are some lesser-known techniques that can elevate your routing abilities to a whole new level. Today, I'll be sharing a few of my favourites that I've discovered over time. We'll cover: Handling the notorious 404 page. Creating an active page indicator to highlight the current route. Utilizing and hooks. useNavigate useLocation By the time you finish reading this article, you'll have a strong grasp of these advanced React Router techniques and feel confident applying them in your own projects. So, let's dive right in and enhance our routing skills together! Are you ready? Let's get started! Dealing with a 404 page When working on bigger projects, it's essential to take care of routes that can't be found. We often refer to these routes as because they return the 404 when a document is not found on the server. 404 routes HTTP status code By the way, if you're a cat lover, you might enjoy checking out . http.cat Now, let's dive into creating a special Route that will be triggered whenever none of the other routes match the current URL in the browser. import {BrowserRouter, Routes, Route} from "react-router-dom";

function App() {
    return <BrowserRouter>
        <Routes>
            <Route path="/" element={<p>Landing page</p>}></Route>
            <Route path="/products" element={<p>Products page</p>}></Route>
            <Route path="*" element={<p>404 page</p>}></Route>
        </Routes>
    </BrowserRouter>
} When accessing the primary page , users will be directed to the Landing page. Navigating to the page will lead them to the Products page. However, if any other links are accessed that do not correspond to a specific route, the 404 page will be displayed. / /products The reason behind this behavior is the implementation of a specialized for the 404 page, where the path property is set to . This configuration ensures that React Router will exclusively utilize this route when no other routes can be matched.  The specific placement of the 404 Route is inconsequential and can be positioned anywhere within the section, as an integral component of it. <Route> * <Routes>...</Routes> Active page Another way apps can make use of routes in a practical manner is by highlighting the currently active page in the menu. Let's imagine you have a navigation menu with two links: Home - This link takes the user to the main page . / About - This link takes the user to the about page . /about With React Router, it becomes possible to automatically highlight the link when the user is on the route. Similarly, you can highlight the Home link when the user is on the route. The best part is, you can achieve this without the need for complex conditionals. About /about / Here's a simple way to make it work: import {NavLink} from "react-router-dom";

function getClassName({isActive}) {
    if (isActive) {
        return "active"; // CSS class
    }
}

function App() {
    return <ul>
        <li>
            <NavLink to="/" className={getClassName}>Home</NavLink>
        </li>
        <li>
            <NavLink to="/about" className={getClassName}>About</NavLink>
        </li>
    </ul>
} The code you see above needs some CSS to make the class work. So, we can enhance it by making the menu link of the currently active page appear bold and stand out. active .active {
    font-weight: bold;
} The attribute of the element has the flexibility to accept a function instead of just a string. When you decide to use a function, it will be given an object as a parameter, and this object will have the property already set on it. To easily access this property within the function, we use destructuring by including in the parameter. className NavLink isActive {isActive} Next, we proceed to verify if holds a truthy value. If that's the case, we will return the class name . isActive CSS active When the current path in React Router matches the attribute of the component, the function will evaluate to a boolean value. to NavLink isActive As a result, React Router will seamlessly include the class in the corresponding element, indicating it as the currently active route. active <NavLink /> Shorter version If you prefer a shorter approach, you can use the ternary operator to refactor the code mentioned above. This operator provides a way to replace an if/else statement by using the format: . condition ? truthy expression : falsy expression I don't really use the ternary operator much because it can often make the code less readable. However, it’s acceptable to use in this case. Consider the following as an example: function getClassName({isActive}) {
    if (isActive) {
        return "active";
    } else {
        return "";
    }
} You can substitute the above code with the following approach: function getClassName({isActive}) {
    return isActive ? "active" : "";
} You simply need to ensure that the return statement is placed outside of the ternary operator. When the condition is true, the expression after will be executed . Otherwise, the expression after will be executed . isActive ? "active" : "" Now, we can eliminate the need for a separate function definition called . Instead, we can use an arrow function like this: . getClassName ({isActive}) => isActive ? "active" : "" If you find this change too difficult to read, you can continue using a separate function as before. The final code would look like this: import {NavLink} from "react-router-dom";

function App() {
    return <ul>
        <li>
            <NavLink to="/" className={({isActive}) => isActive ? "active" : ""}>Home</NavLink>
        </li>
        <li>
            <NavLink to="/about" className={({isActive}) => isActive ? "active" : ""}>About</NavLink>
        </li>
    </ul>
} Oh boy, I can practically hear your thoughts! Sojin, you've gone and broken the DRY principle, haven't you? This is just an example. No need to get all worked up 😀 Choosing Between Link and NavLink: What Sets Them Apart? You might have already noticed that I'm using instead of our usual friend, . But don't worry, let me explain why. You see, the component doesn't allow you to use a function definition for the prop. Yeah, it might be surprising, but that's just how it is when you're working with . NavLink Link <Link /> className <Link /> One common mistake I've seen is junior React developers trying to use function definitions in the prop of a component, which simply doesn't work. className <Link /> If you're interested, I can write an article about this topic. Just let me know in the comments! useNavigate In certain circumstances, you might need to programmatically relocate pages within your React application. For example, to redirect the visitor to a specific page, you can submit a request and wait for the response. Here are a few examples: If the user isn't signed in, send them to the login page. After the getLogin request has successfully completed, redirect the user to the . /dashboard This requires using the hook, which returns a function that you can use to programmatically redirect the user to a new route. useNavigate() Take a look: import React, {useEffect} from "react";
import {useNavigate} from "react-router-dom";

function HelpPage() {
    const navigate = useNavigate();

    useEffect(() => {
        const isLoggedIn = window.localStorage.getItem("isLoggedIn");
        if (!isLoggedIn) {
            navigate("/login");
        }
    }, []);

    return <h2>Help page</h2>;
} Using BrowserRouter is Essential! In this example, we're checking if the localStorage has a value assigned to the key . If it doesn't, we'll redirect the user to the page using the function. isLoggedIn /login navigate("/login") To make it work, just remember to use the hook within a component that's nested inside the component. Otherwise, it won't function properly. useNavigate() <BrowserRouter /> For instance, the following example won't work: import React from "react";
import {BrowserRouter, useNavigate} from "react-router-dom";

function App() {
    // ❌ This breaks because the component was not wrapped by BrowserRouter, but its children are.
    const history = useNavigate();

    return <BrowserRouter>
        {/* ... */}
    </BrowserRouter>;
} If you're trying to use the hook inside the component, you might run into a little hiccup. That's because it won't work unless you wrap the component with . useNavigate() App() App() <BrowserRouter /> But don't worry! The good news is that all the child components inside App will automatically be wrapped by , so you can happily use in those child components without any issues. <BrowserRouter /> useNavigate() However, if you really need to use in the component itself, there's a simple solution. You just need to create a parent component that wraps and make sure to move the inside that parent component. Once you do that, you'll be good to go and can use in the component to your heart's content 💗 useNavigate() <App /> <App /> <BrowserRouter /> useNavigate() <App /> Ensuring Accessibility and Proper Link Usage When it comes to making your website accessible, it's important to pay attention to how your links are structured. To ensure that, it's recommended to use elements instead of other methods. <Link /> Why? Well, these elements will automatically render as tags, which are known for their . <a> accessibility features Now, here's a friendly tip: avoid replacing your normal elements with the method provided by . This method should only be utilized in cases where using a element isn't possible. <Link /> .push() useNavigate() <Link /> When does that happen? Typically, it's when you need to redirect users programmatically based on certain logic, like the result of a operation. fetch() useLocation What if you want to execute a piece of code every time React Router takes you to a new address? You can accomplish that easily with the help of the hook. But before we dive into the details, let's explore some scenarios where this can come in handy. One of the most common use cases is sending a event to your analytics service, like Google Analytics. useLocation pageview However, it's worth mentioning that Google Analytics 4 now takes care of this automatically, so you don't necessarily have to implement it yourself. Nevertheless, learning about the hook is still valuable, as you might find other purposes for it. For instance, you can use it to integrate with other libraries and analytics services, or to execute specific actions based on the visited routes. useLocation The possibilities are endless! useLocation hook The hook is super handy because it gives you information about the route that's currently being used. useLocation Here's a friendly guide on how to use the useLocation hook: import {BrowserRouter, Routes, Route, useLocation} from "react-router-dom";
import {createRoot} from "react-dom/client";

function App() {
    const location = useLocation();
    console.log(location.pathname);

    return <Routes>
        {/* routes here... */}
    </Routes>
}

createRoot(document.querySelector("#react-root")).render(<BrowserRouter><App /></BrowserRouter>); Now, you can access the route information through the location variable. It's an object that contains the current . pathname To find out which route the user is currently browsing, simply use . It will give you something like , , or any other route you've set up. location.pathname / /about Remember, just like with the hook, it's important to have your code running inside a component that's wrapped by . Otherwise, the hook won't do its magic. useNavigate <BrowserRouter /> useLocation Responding to Location Changes When the location changes, you can make use of the hook to access the current URL path in React Router. By wrapping your code with a hook and setting the dependency to , you can run a specific piece of code whenever there is a navigation to a new URL. useLocation useEffect location Here's an example of how to do it: import React, {useEffect} from "react";
import {BrowserRouter, Routes, Route, useLocation} from "react-router-dom";
import {createRoot} from "react-dom/client";

function App() {
    const location = useLocation();

    // run a piece of code on location change
    useEffect(() => {
        console.log(location.pathname);
        // send it to analytic, or do some conditional logic here
    }, [location]);

    return <Routes>
        {/* routes here... */}
    </Routes>
}

createRoot(document.querySelector("#react-root")).render(<BrowserRouter><App /></BrowserRouter>); Whenever the user moves to a new route during navigation, the code inside the hook will run and do its thing. It's basically a way to make sure that specific code gets executed whenever there's a change in the location object. useEffect Nice Job, Now your a React Router Expert 🥳 To wrap it up, this article has given you a deeper understanding of React Router. While you might not use all of the features discussed here. Still it's fantastic that you’re aware of them. If you ever find yourself needing to incorporate similar functionality in the future, you know exactly where to look. So, be sure to save or bookmark this post for easy reference. And remember, if you have any questions or need further assistance, feel free to reach out to me on Twitter. I'm here to help!

Advanced React Router V6 Techniques: Going Beyond the Basics

অ্যাডভান্সড রিঅ্যাক্ট রাউটার V6 টেকনিক: বেসিকের বাইরে যাওয়া

Erweiterte React Router V6-Techniken: Über die Grundlagen hinausgehen

Técnicas avanzadas de React Router V6: ir más allá de lo básico

Techniques avancées du routeur React V6 : aller au-delà des bases

उन्नत रिएक्ट राउटर V6 तकनीक: बुनियादी बातों से परे जाना

高度な React Router V6 テクニック: 基本を超えて

고급 React Router V6 기술: 기본을 뛰어넘다

Técnicas avançadas do React Router V6: indo além do básico

Gelişmiş React Router V6 Teknikleri: Temellerin Ötesine Geçmek

Các kỹ thuật Advanced React Router V6: Vượt ra ngoài những điều cơ bản

高级 React Router V6 技术：超越基础知识

How to Set Up Firebase Authentication with React

How to Personalize Your Ecommerce Search Engine

Cómo personalizar su motor de búsqueda de comercio electrónico

Comment personnaliser votre moteur de recherche de commerce électronique

अपने ईकॉमर्स खोज इंजन को वैयक्तिकृत कैसे करें

eコマース検索エンジンをパーソナライズする方法

Como personalizar seu mecanismo de pesquisa de comércio eletrônico

Cách cá nhân hóa công cụ tìm kiếm thương mại điện tử của bạn

如何个性化您的电子商务搜索引擎

As programmers, we have probably needed to implement social media login at some point and, this is an increasingly common functionality in today’s applications and websites. Social login allows users to log in to applications or websites using their accounts such as Facebook, Google, Twitter, etc. This saves users time by not having to create an additional account and password and taking advantage of the social network’s security measures. For example, if a user has enabled two-step authentication on their Google account, this security will also apply to the application or website they are using. In this tutorial, we will implement Github and login in a React application with TypeScript. We will use Vite to create our application and pnpm as package manager. Google Login with RRSS’s first steps First of all, to use the authentication services of any platform, we need to create an OAuth application and obtain the necessary keys. For GiHub follow these steps. For Google follow these steps Make sure to keep the keys in a safe place. After this, we are going to start the development of our application. Since in this application we will make use of sensitive and private data such as client secret keys, it is necessary to create a backend and use it on the server side for security reasons. So we will have two applications, backend and client, each in its directory. Setting up Backend We create our application with the following command: pnpm init -y We install the dependencies that we will need in the project: pnpm install express axios cors dotenv tsc ts-node pnpm install @types/cors @types/express @types/node ts-node-dev typescript -D After that, we create the following structure for the project: ├── src/
│   ├── routes/
│   │   ├── github-routes.ts
│   │   └── google-routes.ts
│   ├── controllers/
│   │   ├── github-controller.ts
│   │   └── google-controller.ts
│   └── server.ts
├── .env
├── .env-example Setting up Client We install the dependencies that we will need in the project: pnpm install @octokit/auth @react-oauth/google @nextui-org/react axios react-router-dom After that, we create the following structure for the project: ├── src/
│   ├── assets/
│   │   ├── icons/
│   │   │   ├── Github.tsx
│   │   │   ├── Google.tsx
│   │   │   ├── Logout.tsx
│   │   │   └── index.ts
│   ├── pages/
│   │   ├── home/
│   │   │   ├── services/
│   │   │   │   └── home-services.ts
│   │   │   └── HomePage.tsx
│   │   └── login/
│   │       └── LoginPage.tsx
│   ├── index.tsx
│   ├── App.tsx
│   └── main.tsx
├── .env
├── .env-example GitHub Login Backend File : server.ts import express from 'express';
import cors from 'cors';

import githubRoutes from './routes/github-routes';
import googleRoutes from './routes/google-routes';

const PORT = process.env.PORT || 3001

const app = express();

app.use(
  cors({
    origin: ['http://localhost:5173'],
    methods: 'GET,POST',
  }),
);

app.use(express.json());

app.use('/api/github', githubRoutes);
app.use('/api/google', googleRoutes);

app.listen(PORT, () => console.log('Server on port', PORT)); This code creates a server application with Express. The application uses the cors library to enable cross-origin access (CORS) and sets the origin and allowed methods. The application also uses the function to enable the use of JSON in requests and to define routes for the GitHub service and the Google service. app.use() Finally, the application listens on the port specified in the constant, or on port 3001 if no port is specified. PORT File : github-routes.ts import express, { Request, Response, Router } from 'express';
import { getAccessToken, getUserData } from '../controllers/github-controller';

const router: Router = express.Router();

router.get('/accessToken', (req: Request, res: Response) => {
  const code = req.query.code;
  getAccessToken(code as string).then((resp) => res.json(resp));
});

router.get('/userData', (req: Request, res: Response) => {
  const accessToken = req.query.accessToken;
  getUserData(accessToken as string).then((resp) => res.json(resp));
});

export default router; This code creates an Express router which defines two routes y . /accessToken /userData The route s a GET route that takes a parameter from the query and calls the function of the GitHub service. /accessToken code getAccessToken The rute is a GET route that takes an parameter from the query and calls the function of the GitHub service. /userData accessToken getUserData File : google-routes.ts import express, { Request, Response, Router } from 'express';
import { getUserData } from '../controllers/google-controller';

const router: Router = express.Router();

router.get('/userData', (req: Request, res: Response) => {
  const accessToken = req.query.accessToken;
  getUserData(accessToken as string).then((resp) => res.json(resp));
});

export default router; This code creates an Express router that defines a GET route called . The route takes an parameter from the query and calls the function of the Google service. /userData accessToken getUserData File : github-controller.ts import * as dotenv from 'dotenv';
import axios from 'axios';

dotenv.config();

type AccessTokenData = {
  access_token: string;
  token_type: string;
  scope: string;
} | null;

export const getAccessToken = async (
  code: string,
): Promise<AccessTokenData> => {
  try {
    const params = `?client_id=${process.env.GITHUB_CLIENT_ID}&client_secret=${process.env.GITHUB_CLIENT_SECRET}&code=${code}`;

    const { data } = await axios.post(
      `https://github.com/login/oauth/access_token${params}`,
      {},
      {
        headers: {
          Accept: 'application/json',
        },
      },
    );

    return data;
  } catch (error) {
    console.log(error);
    return null;
  }
};

export const getUserData = async (accessToken: string) => {
  try {
    const { data } = await axios.get('https://api.github.com/user', {
      headers: {
        Authorization: `Bearer ${accessToken}`,
      },
    });

    return data;
  } catch (error) {
    return null;
  }
}; The function receives the parameter makes a POST request to the GitHub API to obtain an access token using the provided , and . getAccessToken code client_id client_secret code The function receives the parameter and returns the user information from the GitHub API using the access token provided in the request. getUserData accessToken File : google-controller.ts import axios from 'axios';

export const getUserData = async (accessToken: string) => {
  try {
    const { data } = await axios.get(
      'https://www.googleapis.com/oauth2/v3/userinfo',
      {
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
      },
    );

    return data;
  } catch (error) {
    return null;
  }
}; The function receives the parameter and performs a GET request to the Google OAuth user information API using the access token provided in the authorization header of the request and returns the user information. getUserData accessToken Now we already have our backend created with the minimum we need, now let’s go for the frontend. Client File : main.tsx import { GoogleOAuthProvider } from "@react-oauth/google"

import ReactDOM from "react-dom/client"

import { NextUIProvider } from "@nextui-org/react"
import { darkTheme } from "./themes/darktheme"

const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID

import App from "./App"

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
 <NextUIProvider theme={darkTheme}>
  <GoogleOAuthProvider clientId={GOOGLE_CLIENT_ID}>
   <App />
  </GoogleOAuthProvider>
 </NextUIProvider>
) In this application we will use for the styles, you can use any UI library you want. Next UI The component provides the dark theme to all the components of the application. NextUIProvider The component provides the Google login to the application using the provided . GoogleOAuthProvider clientId Component : App.tsx import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { LoginPage, HomePage } from './pages';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/home" element={<HomePage />}></Route>
        <Route path="/" element={<LoginPage />}></Route>
      </Routes>
    </Router>
  );
};

export default App; In the App component, we will create the routes of the pages that we will use and we will assign the corresponding component. Component LoginPage.tsx import { useGoogleLogin } from "@react-oauth/google"
import { useNavigate } from "react-router-dom"

import { Card, Spacer, Button, Text, Container } from "@nextui-org/react"

import { IconGitHub, IconGoogle } from "../../assets/icons"

const GITHUB_CLIENT_ID = import.meta.env.VITE_GITHUB_CLIENT_ID

const LoginPage = () => {
 const navigate = useNavigate()

 const loginToGithub = () => {
  localStorage.setItem("loginWith", "GitHub")
  window.location.assign(`https://github.com/login/oauth/authorize?client_id=${GITHUB_CLIENT_ID}`)
 }

 const loginToGoogle = useGoogleLogin({
  onSuccess: tokenResponse => {
   localStorage.setItem("loginWith", "Google")
   localStorage.setItem("accessToken", tokenResponse.access_token)
   navigate("/home")
  },
 })

 return (
  <Container display='flex' alignItems='center' justify='center' css={{ minHeight: "100vh" }}>
   <Card css={{ mw: "420px", p: "20px" }}>
    <Text
     size={24}
     weight='bold'
     css={{
      as: "center",
      mb: "20px",
     }}
    >
     Login with
    </Text>
    <Spacer y={1} />
    <Button color='gradient' auto ghost onClick={() => loginToGithub()}>
     <IconGitHub />
     <Spacer x={0.5} />
     GitHub
    </Button>
    <Spacer y={1} />

    <Button color='gradient' auto ghost onClick={() => loginToGoogle()}>
     <IconGoogle />
     <Spacer x={0.5} />
     Google
    </Button>
   </Card>
  </Container>
 )
}

export default LoginPage When the user clicks the GitHub login button, the user is redirected to the GitHub login page and a key is stored in the browser’s local storage indicating that the user is logging in with GitHub. When the user clicks the Google login button, the function of is used to log in with Google. If the login is successful, a key is stored in the browser’s local storage indicating that the user is signing in with Google. useGoogleLogin @react-oauth/google Component : HomePage.tsx import { useEffect, useRef, useState } from "react"
import { useNavigate } from "react-router-dom"
import { Button, Col, Container, Navbar, Row, Text, User } from "@nextui-org/react"

import { getAccessTokenGithub, getUserDataGithub, getUserDataGoogle } from "./services/home-services"

import { LogOutIcon } from "../../assets/icons"

interface UserDataGithub {
 avatar_url: string
 login: string
 bio: string
}

interface UserdataGoogle {
 name: string
 picture: string
 email: string
}

const HomePage = () => {
 const [userDataGithub, setUserDataGithub] = useState<null | UserDataGithub>(null)
 const [userDataGoogle, setUserDataGoogle] = useState<null | UserdataGoogle>(null)

 const loginWith = useRef(localStorage.getItem("loginWith"))

 const navigate = useNavigate()

 useEffect(() => {
  const queryString = window.location.search
  const urlParams = new URLSearchParams(queryString)
  const codeParam = urlParams.get("code")

  const accessToken = localStorage.getItem("accessToken")

  if (codeParam && !accessToken && loginWith.current === "GitHub") {
   getAccessTokenGithub(codeParam).then(resp => {
    localStorage.setItem("accessToken", resp.access_token)
    getUserDataGithub(resp.access_token).then((resp: UserDataGithub) => {
     setUserDataGithub(resp)
    })
   })
  } else if (codeParam && accessToken && loginWith.current === "GitHub") {
   getUserDataGithub(accessToken).then((resp: UserDataGithub) => {
    localStorage.setItem("accessToken", accessToken)
    setUserDataGithub(resp)
   })
  }
 }, [loginWith])

 useEffect(() => {
  const accessToken = localStorage.getItem("accessToken")

  if (accessToken && loginWith.current === "Google") {
   getUserDataGoogle(accessToken).then(resp => {
    setUserDataGoogle(resp)
   })
  }
 }, [loginWith])

 const setLogOut = () => {
  localStorage.removeItem("accessToken")
  localStorage.removeItem("loginWith")
  navigate("/")
 }

 if (!userDataGithub && !userDataGoogle) return null

 return (
  <>
   <Navbar isBordered variant='sticky'>
    <Navbar.Brand>
     <User
      bordered
      color='primary'
      size='lg'
      src={loginWith.current === "GitHub" ? userDataGithub?.avatar_url : userDataGoogle?.picture}
      name={loginWith.current === "GitHub" ? userDataGithub?.login : userDataGoogle?.name}
      description={loginWith.current === "GitHub" ? userDataGithub?.bio : userDataGoogle?.email}
     />
    </Navbar.Brand>
    <Navbar.Content>
     <Navbar.Item>
      <Button
       auto
       flat
       size='sm'
       icon={<LogOutIcon fill='currentColor' />}
       color='primary'
       onClick={() => setLogOut()}
      >
       Log out
      </Button>
     </Navbar.Item>
    </Navbar.Content>
   </Navbar>
   <Container gap={0}>
    <Row gap={1}>
     <Col>
      <Text h2>Login with {loginWith.current}</Text>
     </Col>
    </Row>
   </Container>
  </>
 )
}

export default HomePage After the user has logged in and is redirected to Home, we will use the hook to perform a series of actions when the page loads. useEffect First, we get the authorization code from the page URL and, if the user has logged in with GitHub, we get an access token and then we get the user’s data from GitHub. If the user has logged in with Google, we simply get the Google user data. In addition, we have a “Logout” button that removes the access token and login from local storage and redirects the user to the application’s home page. That’s it! Now we can log in to GitHub or Google. The next steps are to register the user and save the user information in a database or whatever suits you. The application looks something like this: Repo here. Conclusion Social login is a feature that offers many advantages for both users and developers. It is simple to integrate and can improve the user experience and security of the application or website. Therefore, it is a good idea to consider using it in your projects. Also published here.

Implementing Social Login for a React and Backend App

Lazy loading react components is a way of deferring the rendering of components until they're needed. For below-the-fold content, it often makes sense to lazy load components, especially if they're detrimental to the performance if loaded upfront. I personally prefer to deal with lazy load heavy images and videos which appear below the fold. It helps increase core web vitals. What is an intersection observer? An intersection observer is a JavaScript API that allows you to monitor an element in your web page and note when it enters or exits the viewport. This can be useful for various purposes, such as triggering animations, lazy loading content, or implementing infinite scroll. The intersection observer API works by setting up a "callback" function that is executed whenever the target element intersects with the viewport, allowing you to respond to these events in your code. Browser support for intersection observer The intersection observer API is supported by most modern web browsers, including Chrome, Firefox, Safari, and Edge. However, it may not be supported by older browsers or some mobile browsers. You can check the specific browser support for the intersection observer API on , which tracks browser support for different web technologies. If your target browser doesn't support it, you can polyfill (add support for) the API in order to use it in your code. caniuse.com Lazy Loading React Components using intersection observer (the hard way) To use the intersection observer API in React, you can use the hook to create a reference to the element you want to monitor and the hook to set up the observer. Here is an example of how you might do this: useRef useEffect function MyComponent() {
  // Create a reference to the element that we want to observe
  const targetElement = useRef(null);
  const [isInView, setIsInView] = useState(false);

  // Set up the intersection observer when the component mounts
  useEffect(() => {
    const observer = new IntersectionObserver(onIntersection, {});
    observer.observe(targetElement.current);

    // Clean up the observer when the component unmounts
    return () => observer.unobserve(targetElement.current);
  }, []);

  // This is the callback function that is executed whenever the
  // target element intersects with the viewport
  function onIntersection(entries) {
    // Do something with the intersection data, such as triggering
    // an animation or lazy loading content
    setIsInView(true);
  }

  return (
    <div ref={targetElement}>{isInView ? <VeryHeavyComponent /> : null}</div>
  );
} In this example, we used the hook to create a reference to the element we want to observe and the hook to set up the intersection observer when the component mounts. When the target element intersects with the viewport, the callback function is executed, allowing you to respond to the event in your code. useRef useEffect onIntersection Make sure to clean up the you subscribed in . It's an important optimization of useEffect. IntersectionObserver useEffect Lazy Loading React Components using intersection observer (the easy way) The package is a wrapper around the IntersectionObserver API and makes lazy loading less verbose and easy-peasy. Let's take a look at an example: react-intersection-observer const Video = (props) => {
  const { ref, inView } = useInView({
    triggerOnce: true,
    fallbackInView: true,
  });

  return <div ref={ref}>{inView ? <video {...props} /> : null}</div>;
}; In this example, the component is a wrapper around HTML's native element. We only render when it is in the viewport. It helps boost the performance of the page and core web vitals. You can pass various configurations to the hook as described in the . For example, you can specify a threshold value to control when the component should be considered visible or add a root margin to adjust the boundaries of the viewport. Video video video useInView documentation In conclusion, using the IntersectionObserver API or package allows us to implement lazy loading in React components. This can improve the performance of our application by delaying the rendering of heavy components until they are actually needed. By using the hook and monitoring when a component enters the viewport, we can efficiently lazy load our components and improve the user experience. react-intersection-observer useInView Also published here.

How to Lazy Load React Components with an Intersection Observer

The Essential Guide to Building an NFT Auction Site with React, Solidity, and CometChat

How to Build a Blockchain Voting System with React, Solidity, and CometChat

How to Handle Asynchronous Data Requests Using Redux Toolkit

How to Build a Glorious Web3.0 DAO with React, Solidity, and CometChat

Cómo construir un glorioso Web3.0 DAO con React, Solidity y CometChat

Comment créer un DAO Web3.0 glorieux avec React, Solidity et CometChat

रिएक्ट, सॉलिडिटी और कॉमेटचैट के साथ एक शानदार Web3.0 DAO कैसे बनाएं?

React、Solidity、CometChat を使用して素晴らしい Web3.0 DAO を構築する方法

Como construir um glorioso Web3.0 DAO com React, Solidity e CometChat

Cách xây dựng một Web3.0 DAO huy hoàng với React, Solidity và CometChat

如何使用 React、Solidity 和 CometChat 构建一个辉煌的 Web3.0 DAO

Stories, News & Mentions about USEANVIL

Useanvil’s Stories on HackerNoon