DEV Community: Pedro Correia

I had to create a Guest Mode mechanism in React

Pedro Correia — Fri, 22 Nov 2024 02:19:47 +0000

Introducing

As usual, in all my previous projects it's very common to use some auth provider to do the authentication mechanism, but this case would be different, besides the usual case of using an auth provider, I would create a guest mode mechanism.

My Use Case

It's a project where users can manage their project, it's a simple CRUD.
The thing is, if you are a registered user you can save as many projects as you want in the app, however as a guest user the criteria acceptance is a bit different, as a guest user you can only save 1 project.. Just to let you know, there's a size limit to be saved, but it depends on some variables, like: browser and disk space.
If you want to know this limit, use the method from Storage API navigator.storage.estimate()

What solution did I apply?

I choose indexedDB to save all guest users data in the browser, and I counted with Dexie(https://dexie.org/docs/Tutorial/React) to help me.

As the project creation for the logged in users was done, I already knew all the properties I'd need for the guest users. I'll explain how I solved this challenge step by step.

Step 1: Installing dexie
yarn
yarn add dexie yarn add dexie-react-hooks

npm
npm install dexie npm install dexie-react-hooks

Step 2: I've created an interface with all needed properties to be used on Project Creation.

Step 3: I created a hook to initialise the Dexie context, which contains the database and schema creation.

Step 4: Let's create a form to create our project, including the addProject function to perform the operation through the db context.

Step 5: Let's create a List component to show all projects that have been created and perform the useLiveQuery function through the db context.

Step 6: And finally, after adding a project, you can see in the application tab on browser settings, indexedDB and ProjectDB, all projects that is listed, for sure you can close and open the browser all data is persisted until you clear the DB.

I hope you can use it to manage your guest users as well, and if you want to play with this demo, follow the codesandbox bellow.

https://codesandbox.io/p/sandbox/react-typescript-forked-pfpdz8?workspaceId=51e2f20f-c72d-466e-8e65-35cf50be13d0

How did I automate the execution of database scripts on Azure Pipelines?

Pedro Correia — Tue, 16 Jan 2024 23:43:40 +0000

Indroducing

As the title suggests, this post discusses the time when I needed to create a pipeline to automatically deploy all changes to the database schema, including ADD/ALTER TABLES, ADD/ALTER COLUMNS, PROCEDURES, etc.

My Use Case

The use case involves a project built using Azure SQL Server with Dapper and .NET 7, where each client has its instance of the database. Within the .NET project, there's a Database project responsible for versioning all the database changes, and that part is fine. However, the issue arises when deploying a new schema change as it had to be done manually using Scheme Compare (a function provided by Database projects in Visual Studio IDE). This manual process became time-consuming, especially as the number of clients increased, requiring more scheme comparisons and manual control. This is the reason for automating these processes. How do I automate it?

Database_Project

What solution I apply?

To begin with, I created a new Azure repository specifically to store the Database project, allowing me to subsequently create a dedicated pipeline for it.

I created a YML pipeline with the following instructions: it builds the database project and saves the artifact in the drop folder. This artifact is then utilized for proper deployment on Azure SQL Database.

trigger:
- main
- stage
- development

pool:
  vmImage: windows-latest

stages:

- stage: 'ContinuousIntegration'
  displayName: 'Continuous Integration'
  jobs:
    - job: BuildPublishArtifacts
      displayName: 'Building & Publish Solution Artifacts'
      steps:
        - task: MSBuild@1
          displayName: 'Building Solution'
          inputs:
            solution: '**/*.sln'
            clean: true
            configuration: 'Release'
            platform: 'Any CPU'

        - task: CopyFiles@1
          displayName: 'Moving Database Artifacts to Drop folder'
          inputs:
            SourceFolder: '$(Agent.BuildDirectory)\s\Database\bin\Release'
            Contents: '**'
            TargetFolder: '$(Build.ArtifactStagingDirectory)\DBArtifact'

        - task: PublishBuildArtifacts@1
          displayName: 'Publishing Solution Artifact'
          inputs:
            PathtoPublish: '$(Build.ArtifactStagingDirectory)'
            ArtifactName: 'drop'
            publishLocation: Container

Finally, the last step I had to take was to create a release, set up the artifact built by the pipeline, and create a task to deploy a DACPAC.

As you can see, this isn't a guide; instead, I'm sharing a use case that I encountered during my work and explaining why I chose to automate this process.

Have you ever automate that?

First of all let me introduce myself.

Pedro Correia — Wed, 17 Aug 2022 16:34:00 +0000

Hello everyone, I'm Pedro Correia I'm a Software Engineer at ABB, I have 6 years of experience and all the time always working with Microsoft Technologies, like .net MVC, .net core, azure DevOps, but I have some pieces of knowledge with angular and reactjs. Currently, I've been working with a Poland team, I had never ever worked with a foreign team, and they are a great team, but I'm working from Brazil. In my free time, I like to play video games, play soccer(I support Palmeiras), and sometimes play skateboarding, I really like to go to the bar, luckily where I live there are many options for bars and parties. If you already visited São Paulo Capital, you know what I'm saying. The purpose of this blog is to practice and improve my English, and to write about my studies, so the main posts of this blog will be tech, but sometimes I can write about my passions as well.

See you later.