DEV Community: Pratik280

Part 1 : Peer Aware Eureka Service Registry

Pratik280 — Sun, 25 Jan 2026 12:35:40 +0000

New Series: Spring Cloud Microservice Architecture

(Service Discovery · Gateway · Nginx · Production Patterns)

This blog marks the beginning of a new series focused entirely on Spring Cloud–based microservice architecture and production-grade system design.

In this series, we will design and evolve a complete microservices ecosystem using:

Spring Cloud Netflix Eureka (Service Discovery)
Spring Cloud Gateway (API Gateway)
Nginx (Edge reverse proxy & load balancer)
Production-ready scaling and fault-tolerance patterns

About the Order System Used in This Series

To avoid reinventing the wheel, this series reuses an existing microservice from my earlier work:

👉 Production-Grade Spring Boot API Design

https://dev.to/pratik280/series/35113

The order-system from that series is used only as a sample business service so we can focus purely on:

Service discovery
Inter-service communication
Load balancing
Infrastructure concerns

📌 This Spring Cloud series is completely independent and does not require reading the previous series, although familiarity with the order-system API helps.

Source Code:

order-system : https://github.com/Pratik280/order-system
order-consumer : https://github.com/Pratik280/order-consumer
eureka-server : https://github.com/Pratik280/eureka-server

What This Part Covers

This Part 1 focuses on:

Why service discovery is mandatory in production
Why a single Eureka server is not enough
How to design a peer-aware Eureka cluster
How microservices register themselves using logical names
How this eliminates hardcoded IPs and ports

What Is a Service Registry?

A Service Registry is a centralized system that keeps track of all running microservice instances in a distributed system.

Instead of services communicating using fixed IP addresses and ports, they:

Register themselves with the registry
Discover other services dynamically using logical names

📌 In Spring Cloud, Eureka acts as the Service Registry.

Why Start with Eureka?

Before gateways, security, or scaling:

Services must be able to find each other reliably.

That is exactly what Eureka Service Registry solves — and it’s the foundation of every production-grade Spring Cloud system.

Let’s Begin 🚀

In the next sections, we’ll set up a 3-node peer-aware Eureka cluster and use it as the backbone for all service communication in the system.

Why Service Discovery Is Mandatory in Production

In real production systems:

Services scale dynamically
Instances come and go
IPs and ports must never be hardcoded
Load balancing must be automatic
Failure of one node must not break the system

Hardcoding endpoints like:

http://localhost:8080/orders

❌ breaks scaling

❌ breaks failover

❌ tightly couples services

High-Level Architecture

Client
↓
Nginx (Reverse Proxy & LB)
↓
Spring Cloud Gateway (multiple instances)
↓
Eureka Cluster (3 peer-aware nodes)
↓
Order System (multiple instances)

Existing Order System

From the earlier series, the order-system already exposes:

GET http://localhost:8085/orders

{
  "status": 200,
  "message": "All orders fetch successfully",
  "data": [
    { "id": 1, "productName": "Mobile" },
    { "id": 2, "productName": "Mobile" },
    { "id": 3, "productName": "Mobile" },
    { "id": 4, "productName": "Smartwatch" }
  ],
  "errors": null
}

Now we make this production-grade using service discovery.

Step 1: Peer-Aware Eureka Service Registry (3 Nodes)

Why Peer-Aware Eureka?

A single Eureka server is a single point of failure
In production, Eureka must be highly available
Each Eureka node replicates registry data with its peers

👉 Minimum recommended: 3 nodes

Eureka Server Configuration

properties

spring.application.name=eureka-server
server.port=8760

eureka.client.service-url.defaultZone=\
http://EurekaInstance1IP:8760/eureka,\
http://EurekaInstance2IP:8761/eureka,\
http://EurekaInstance3IP:8762/eureka

eureka.client.register-with-eureka=true
eureka.client.fetch-registry=true

Step 1: Peer-Aware Eureka Service Registry (3 Nodes)

Why Peer-Aware Eureka?

A single Eureka server is a single point of failure
In production, Eureka must be highly available
Each Eureka node replicates registry data with its peers

👉 Minimum recommended: 3 nodes

Eureka Server Configuration

spring.application.name=eureka-server
server.port=8760

eureka.client.service-url.defaultZone=\
http://EurekaInstance1IP:8760/eureka,\
http://EurekaInstance2IP:8761/eureka,\
http://EurekaInstance3IP:8762/eureka

eureka.client.register-with-eureka=true
eureka.client.fetch-registry=true

Note:

This configuration represents one Eureka server instance.

For a peer-aware Eureka cluster, create multiple Eureka applications (for example, 3 instances) and modify:

server.port
eureka.client.service-url.defaultZone

so that each Eureka node points to all other Eureka nodes using their respective IPs and ports.

Eureka Server Application

@SpringBootApplication
@EnableEurekaServer
public class EurekaServerApplication {

    public static void main(String[] args) {
        SpringApplication.run(EurekaServerApplication.class, args);
    }
}

What does @EnableEurekaServer do?

Turns a Spring Boot application into a Service Registry
Accepts service registrations from microservices
Tracks heartbeats to detect unhealthy instances
Replicates registry information to peer Eureka nodes

Step 2: Register Order System with Eureka

Order System Configuration

spring.application.name=order-system

eureka.client.service-url.defaultZone=\
http://localhost:8760/eureka,\
http://localhost:8761/eureka,\
http://localhost:8762/eureka

eureka.instance.prefer-ip-address=true

Result

Run multiple instances of order-system
All instances register under one logical name:

ORDER-SYSTEM → [instance-1, instance-2, instance-3]

Step 3: Create Order Consumer Microservice

This service consumes order-system data without knowing:

IP address
Port
Number of running instances

What Is RestTemplate?

RestTemplate is Spring’s synchronous HTTP client used for REST calls.

By default:

It only supports fixed URLs
It does not understand Eureka

Why @LoadBalanced ?

@LoadBalanced enables:

Service name resolution
Instance lookup from Eureka
Client-side load balancing

Load-Balanced RestTemplate Configuration

@Configuration
public class RestConfig {

    @Bean
    @LoadBalanced
    public RestTemplate restTemplate(){
        return new RestTemplate();
    }
}

Order Consumer Controller

@RestController
@RequestMapping("/consume")
public class OrderConsumerController {

    private final RestTemplate restTemplate;

    public OrderConsumerController(RestTemplate restTemplate){
        this.restTemplate = restTemplate;
    }

    @GetMapping("/orders")
    public String fetchOrders() {
        return restTemplate.getForObject(
                "http://order-system/orders",
                String.class
        );
    }
}

Key Point
http://order-system/orders

✔ No IP

✔ No port

✔ Logical service name

✔ Resolved dynamically via Eureka

Order Consumer Configuration

spring:
  application:
    name: order-consumer

server:
  port: 8090

eureka:
  client:
    service-url:
      defaultZone: http://localhost:8760/eureka, http://localhost:8761/eureka, http://localhost:8762/eureka
  instance:
    prefer-ip-address: true

Step 4: Service-to-Service Call

GET http://localhost:8090/consume/orders

What Happens Internally?

Consumer calls http://order-system/orders
@LoadBalanced RestTemplate intercepts the call
Eureka returns all registered order-system instances
One instance is selected
Request is forwarded
Response is returned

✔ Load balanced

✔ Fault tolerant

✔ Zero hardcoding

Why This Architecture Is Production-Grade

No hardcoded IPs or ports
Automatic scaling
High availability
Fault tolerance
Clean separation of concerns
Gateway + Nginx hide internal topology

Summary

Eureka provides service discovery
Peer-aware Eureka removes SPOF
@EnableEurekaServer creates the registry
@LoadBalanced RestTemplate enables dynamic routing
Services communicate using logical names
Scaling requires no code changes

Production-Grade Spring Boot APIs — Part 3: Production-Grade Folder Structure & Layered Implementation

Pratik280 — Sat, 17 Jan 2026 19:59:41 +0000

A practical guide to production-grade Spring Boot folder structure and layered architecture, covering controllers, services, repositories, DTOs, entities, BaseResponse usage, and global exception handling.

This is Part 3 of the Production-Grade Spring Boot API Design series.

Code Gihub Repo: https://github.com/Pratik280/order-system/tree/develop

In production Spring Boot applications, folder structure is not cosmetic.

It enforces separation of concerns, improves readability, and allows teams to scale safely.

Below is a typical production-ready package structure used for REST APIs.

com.example.orderservice
│
├── controller
│ └── OrderController.java
│
├── entity
│ └── OrderEntity.java
│
├── dto
│ ├── OrderRequest.java
│ └── OrderResponse.java
│
├── repository
│ └── OrderRepository.java
│
├── service
│ ├── OrderService.java
│ └── impl
│ └── OrderServiceImpl.java
│
├── exception
│ ├── BusinessException.java
│ └── ResourceNotFoundException.java
│
├── common
│ ├── BaseResponse.java
│ └── ResponseBuilder.java
│
└── handler
└── GlobalExceptionHandler.java

Each layer has one clear responsibility and does not leak concerns into other layers.

Controller Layer — API Entry Point

@RestController
@RequestMapping("/orders")
public class OrderController {

    private OrderService orderService;

    public OrderController(OrderService orderService){
        this.orderService = orderService;
    }

    @GetMapping
    public ResponseEntity<BaseResponse<List<OrderResponse>>> getAllOrders(){
        return ResponseBuilder.success(
                HttpStatus.OK,
                "All orders fetch successfully",
                orderService.getAllOrders()
        );
    }

    @GetMapping("/{id}")
    public ResponseEntity<BaseResponse<OrderResponse>> getOrderById(@PathVariable Long id){
        return ResponseBuilder.success(
                HttpStatus.OK,
                "Order fetch successfully",
                orderService.getOrderById(id)
        );
    }

    @PostMapping
    public ResponseEntity<BaseResponse<OrderResponse>> createOrder(
            @Valid @RequestBody OrderRequest orderRequest){
        return ResponseBuilder.success(
                HttpStatus.OK,
                "Order created successfully",
                orderService.createOrder(orderRequest)
        );
    }

Annotations Explained

@RestController

Marks the class as a REST API controller and automatically serializes responses to JSON.

@RequestMapping("/orders")

Defines a base URL for all endpoints in this controller.

@GetMapping

Handles HTTP GET requests.

@PostMapping

Handles HTTP POST requests.

@PathVariable

Extracts values from the URL path.

@RequestBody

Converts incoming JSON into a Java object.

@valid

Triggers validation on request DTOs.

Controllers do not contain business logic. They only orchestrate requests and responses.

Entity Layer — Database Representation

@Entity
@Table(name = "orders")
@Getter
@Setter
@NoArgsConstructor
public class OrderEntity {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private long id;

    private String productName;
}

Entities:

Represent database tables
Are used only in the persistence layer
Are never exposed directly to API clients

DTO Layer — API Contracts

@Getter
@Setter
@NoArgsConstructor
public class OrderRequest {
    @NotBlank(message = "productName is mandatory")
    private String productName;
}


@Getter
@Setter
@NoArgsConstructor
public class OrderResponse {
    private Long id;
    private String productName;
}

DTOs:

Protect internal entity structure
Allow validation rules
Decouple API contracts from database design

Repository Layer — Data Access

public interface OrderRepository
        extends JpaRepository<OrderEntity, Long> { }

Repositories:

Abstract database access
Provide CRUD operations automatically
Remove the need for DAOs and JDBC code

Service Layer — Business Logic Contract

public interface OrderService {
    List<OrderResponse> getAllOrders();
    OrderResponse getOrderById(Long id);
    OrderResponse createOrder(OrderRequest orderRequest);
}

The service interface defines what the system can do, not how.

Service Implementation — Business Logic Execution

@Service
public class OrderServiceImpl implements OrderService {

    private OrderRepository orderRepository;
    private ModelMapper modelMapper;

    public OrderServiceImpl(OrderRepository orderRepository,
                            ModelMapper modelMapper){
        this.orderRepository = orderRepository;
        this.modelMapper = modelMapper;
    }

    @Override
    public List<OrderResponse> getAllOrders(){
        List<OrderResponse> orders = orderRepository.findAll()
                .stream()
                .map(orderEntity ->
                        modelMapper.map(orderEntity, OrderResponse.class))
                .toList();

        if(orders.isEmpty()){
            throw new ResourceNotFoundException("No orders found");
        }
        return orders;
    }

    @Override
    public OrderResponse getOrderById(Long id){
        return orderRepository.findById(id)
                .map(orderEntity ->
                        modelMapper.map(orderEntity, OrderResponse.class))
                .orElseThrow(() ->
                        new ResourceNotFoundException(
                                "Order not found with id " + id));
    }

    @Override
    public OrderResponse createOrder(OrderRequest orderRequest) {

        OrderEntity orderEntity;
        try{
            orderEntity = modelMapper.map(orderRequest, OrderEntity.class);
        } catch (Exception e){
            throw new BusinessException(
                    "MAPPING_ERROR",
                    "Failed to map order request");
        }

        try{
            OrderEntity saved = orderRepository.save(orderEntity);
            return modelMapper.map(saved, OrderResponse.class);
        } catch (Exception e){
            throw new BusinessException(
                    "DATA_INTEGRITY_VIOLATION",
                    "Invalid Order Data");
        }
    }
}

Service layer:

Contains all business rules
Throws domain-specific exceptions
Never returns ResponseEntity
Never handles HTTP concerns

ModelMapper — Clean Entity ↔ DTO Mapping

In production systems, entities should never be exposed directly to APIs.

Entities represent database structure, while APIs should expose stable, client-friendly contracts using DTOs.

This is where ModelMapper is used.

What ModelMapper Does

ModelMapper automatically maps data between objects with similar structures, such as:

OrderEntity → OrderResponse
OrderRequest → OrderEntity

It eliminates manual field-by-field mapping code.

How ModelMapper Is Used in This Project

modelMapper.map(orderEntity, OrderResponse.class);
modelMapper.map(orderRequest, OrderEntity.class);

In this implementation:

Incoming API requests (OrderRequest) are mapped to persistence entities (OrderEntity)
Saved entities are mapped back to response DTOs (OrderResponse)
Controllers never deal with entities
Services control all mapping logic

ModelMapper — Why We Use It

Reduces boilerplate: Removes repetitive manual mapping code and prevents missing fields.
Decouples layers: Keeps API DTOs independent from persistence entities.
Improves maintainability: Makes refactoring DTOs or entities easier without breaking business logic.
Right layer responsibility: Mapping lives in the service layer where business logic and data transformation belong, keeping controllers and repositories clean.

Custom Business Exceptions

public class BusinessException extends RuntimeException {

    private final String errorCode;

    public BusinessException(String message){
        super(message);
        this.errorCode = "BUSINESS_ERROR";
    }

    public BusinessException(String errorCode, String message) {
        super(message);
        this.errorCode = errorCode;
    }

    public String getErrorCode() {
        return errorCode;
    }
}

public class ResourceNotFoundException extends RuntimeException {
    public ResourceNotFoundException(String message){
        super(message);
    }
}

How This Integrates with BaseResponse & GlobalExceptionHandler

Refer Part 2

Controllers always return BaseResponse using ResponseBuilder
Services throw meaningful domain exceptions
@RestControllerAdvice catches exceptions globally
One consistent response format across the entire application

Final Result

Clean folder structure
Clear separation of responsibilities
Consistent API responses
Centralized error handling
Production-ready Spring Boot API design

This concludes the Production-Grade Spring Boot API Design series — based on real project experience and refined personal notes.

The goal was simple:
APIs that are clean, consistent, scalable, and interview-ready.

📌 This blog is based on real project experience and refined personal notes.

Production-Grade Spring Boot APIs — Part 2: Consistent Responses & Global Exception Handling

Pratik280 — Sat, 17 Jan 2026 19:52:20 +0000

In real systems, APIs don’t fail gracefully by default.

Without discipline, you end up with:

Different response formats per endpoint
Unclear error messages
Controllers full of try-catch blocks

This article explains how we design predictable, consistent API responses using a common response wrapper and centralized exception handling.

This is Part 2 of the Production-Grade Spring Boot API Design series.

Code Gihub Repo: https://github.com/Pratik280/order-system/tree/develop

What this post covers

Why API response consistency matters in microservices
Designing a generic BaseResponse
Builder pattern in API responses
ResponseEntity and real HTTP semantics
Global exception handling with @RestControllerAdvice
Translating domain exceptions into HTTP responses

Why we need a common response format

In microservices:

APIs must look identical
Errors must be predictable
Clients must not guess formats

BaseResponse — A Single Contract for All APIs

@Getter
@Setter
@AllArgsConstructor
@NoArgsConstructor
@Builder
public class BaseResponse<T> {
    private int status;
    private String message;

    // success payload
    private T data;

    // error details
    private List<Map<String, Object>> errors;
}

Why this structure works

Generic () — supports any response payload
Clear separation:
- data → success responses
- errors → failure responses
Consistent fields across all endpoints
Easy for clients to consume and validate

Success vs Error clarity

Success response → data is filled, errors is null
Error response → errors is filled, data is null

This eliminates ambiguity for API consumers.

Builder Pattern for Clean Response Creation

Instead of manually constructing responses everywhere, we centralize response creation.

ResponseBuilder.java

public class ResponseBuilder {

    public static <T> ResponseEntity<BaseResponse<T>> success(
            HttpStatus status, String message, T data ){

        BaseResponse<T> baseResponse = new BaseResponse<>(
                status.value(),
                message,
                data,
                null
        );

        return ResponseEntity.status(status).body(baseResponse);
    }

    public static <T> ResponseEntity<BaseResponse<T>> error(
            HttpStatus status, String message, List<Map<String, Object>> errors ){

        return ResponseEntity.status(status)
                .body(BaseResponse.<T>builder()
                        .status(status.value())
                        .message(message)
                        .errors(errors)
                        .build());
    }
}

Why a ResponseBuilder?

Prevents duplication across controllers
Enforces one response format everywhere
Reduces mistakes in status codes and payloads
Makes controllers thin and readable

Controllers should orchestrate requests, not construct response objects.

Why Controllers Should NOT Handle Exceptions

A common beginner mistake is this:

try {
   // business logic
} catch (Exception e) {
   // return error response
}

In production, this leads to:

Repeated try-catch blocks
Inconsistent error responses
Bloated controllers
Hard-to-maintain code

Global Exception Handling with @RestControllerAdvice

GlobalExceptionHandler.java

@RestControllerAdvice
public class GlobalExceptionHandler {

What @RestControllerAdvice does

Applies to all controllers
Automatically returns JSON responses
Centralizes exception-to-response translation

It is the REST equivalent of a global error boundary.

Handling Domain Exceptions with @ExceptionHandler

@ExceptionHandler(ResourceNotFoundException.class)
public ResponseEntity<BaseResponse<Object>> handleResourceNotfound(
        ResourceNotFoundException exception,
        HttpServletRequest request ){

    return ResponseBuilder.error(
            HttpStatus.NOT_FOUND,
            exception.getMessage(),
            List.of(Map.of(
                    "code", "RESOURCENOTFOUND",
                    "message", exception.getMessage(),
                    "path", request.getRequestURI()
            ))
    );
}

Why this is production-grade

Services throw domain-specific exceptions
Controllers remain clean
HTTP status codes are correct
Error payloads are structured and informative

Each error includes:

Error code (for frontend / monitoring)
Human-readable message
Request path (debugging)

Custom Exceptions Represent Business Failures

public class ResourceNotFoundException extends RuntimeException {
    public ResourceNotFoundException(String message){
        super(message);
    }
}

Why custom exceptions matter

Express business meaning, not technical failure
Decouple service logic from HTTP concerns
Make error handling explicit and readable

Services should throw what went wrong, not how to respond.

The End Result

With this approach:

Every API response looks the same
Error handling is centralized
Controllers stay lean
APIs are predictable and client-friendly
The system scales across teams

This is the difference between APIs that merely work and APIs that survive production.

This is Part 2 of a 3-part series on Production-Grade Spring Boot API Design.

👉 Part 3 focuses on production-Grade Folder Structure & layered Implementation.

Production-Grade Spring Boot APIs — Part 1: Web, JPA & What Really Happens at Startup

Pratik280 — Sat, 17 Jan 2026 19:15:17 +0000

Most Spring Boot tutorials teach you how to build an API.

Very few explain what actually happens when a production Spring Boot application starts — and why those internals matter when systems grow.

This article documents how we actually understand and use Spring Boot foundations in real projects, not demo apps.

This is Part 1 of a 3-part series on Production-Grade Spring Boot API Design, written from real backend experience.

What this post covers

Why spring-boot-starter-web exists
starter vs starter-web
ORM, JPA, Hibernate — without confusion
Why Spring Data JPA removes DAOs & JDBC
Spring Boot application lifecycle (startup to request handling)
How DispatcherServlet fits into the picture

spring-boot-starter-web is the dependency that turns a plain Java application into a web‑ready REST API server.

It provides:

Spring MVC
Embedded web server (Tomcat by default)
DispatcherServlet
JSON serialization / deserialization

You do not configure servlets, servers, or JSON converters manually.

In production systems, this starter removes boilerplate and enforces convention over configuration.

`spring-boot-starter` vs `spring-boot-starter-web`

spring-boot-starter
- Core Spring features
- Dependency Injection
- Auto‑configuration
- Logging (SLF4J + Logback)
spring-boot-starter-web
- Everything above plus
- Spring MVC
- Embedded server
- REST API support

In short:

starter-web = starter + web capabilities

2. ORM, JPA & Hibernate (Production clarity)

What is ORM?

ORM (Object Relational Mapping) is a technique that maps:

Java objects ⇄ Database tables

So instead of writing SQL, you work with Java objects.

JPA vs Hibernate (Interview‑safe explanation)

JPA
- A specification (set of rules)
- Defines annotations and interfaces
- Does not generate SQL
Hibernate
- An implementation of JPA
- Generates SQL
- Talks to the database

In Spring Boot, we write code using JPA, while Hibernate does the heavy lifting.

Why `spring-boot-starter-data-jpa` is critical

We never use JDBC directly in modern Spring Boot microservices.

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>

This starter:

Integrates Spring Data with JPA
Uses Hibernate internally
Provides repository abstractions
Handles transactions automatically

Result: We persist Java objects without writing SQL or DAO classes.

Repository abstraction (No DAO, No SQL)

public interface OrderRepository extends JpaRepository<OrderEntity, Long> {}

What this line really means:

“Spring, create a ready‑made database layer for this entity.”

Spring Data JPA:

Generates implementation at runtime
Provides CRUD, pagination, sorting
Manages transactions

This is production‑grade abstraction, not magic.

3. Spring Boot Application Lifecycle (What really happens)

┌─────────────────────────────┐
│        main() method        │
│ SpringApplication.run()     │
└──────────────┬──────────────┘
               ↓
┌─────────────────────────────┐
│   ApplicationContext        │
│        created              │
└──────────────┬──────────────┘
               ↓
┌─────────────────────────────┐
│     Component Scan          │
│  (@Service, @Controller)    │
└──────────────┬──────────────┘
               ↓
┌─────────────────────────────┐
│        Bean Creation        │
└──────────────┬──────────────┘
               ↓
┌─────────────────────────────┐
│   Dependency Injection      │
└──────────────┬──────────────┘
               ↓
┌─────────────────────────────┐
│   Embedded Server Starts    │
└──────────────┬──────────────┘
               ↓
┌─────────────────────────────┐
│ DispatcherServlet Ready 🚀  │
└─────────────────────────────┘

What matters in production

Spring controls object creation (IoC)
Dependencies are injected before usage
Controllers are mapped after server startup

Developers write business logic — Spring handles infrastructure.

This is Part 1 of a 3-part series on Production-Grade Spring Boot API Design.

👉 Part 2 focuses on clean code structure, controllers, services, DTOs, and dependency injection.

Mastering PostgreSQL Database Setup in Docker: Persistent Volumes, User Creation, Backup, and Restoration

Pratik280 — Sun, 25 Jun 2023 08:45:32 +0000

Introduction

Welcome to my blog where I dive into the world of PostgreSQL and Docker! In this article, I will guide you through the process of setting up a PostgreSQL database using Docker, leveraging volumes for data persistence. We will explore creating users and databases, and I will walk you through the steps of backing up and restoring your database using the powerful pg_dump utility. By the end of this blog, you'll have a solid understanding of how to work with PostgreSQL and Docker, ensuring data persistence and efficient management of your database environment. Let's get started on this exciting journey!

Using docker for postgres databse.

We will be using the Dockerhub official postgresql image to run our postgres database server.

To pull the image locally run the following command:

docker pull postgres

Start the postgres database container using the following command:

docker run -d \
 --name postgres-container \
 -e POSTGRES_PASSWORD=mysecretpassword \
 -v postgres-container-data:/var/lib/postgresql/data \
 postgres

Let's break down the command and its options:

--name postgres-container sets the name of the container as "postgres-container".
-e POSTGRES_PASSWORD=mysecretpassword is an environment variable which is used to set the password for the PostgreSQL instance running inside the container.
-d runs the container in the background (detached mode), so it doesn't occupy the terminal session.
-v postgres-container-data:/var/lib/postgresql/data is a option that creates a volume named "postgres-container-data" and mounts it to the directory /var/lib/postgresql/data within the container. Volumes allow persistent storage, so the data stored in that directory will be preserved even if the container is stopped or removed. This is commonly used to store the database files and ensure data persistence.
postgres is the docker image(pulled locally earlier) which will be used to create the container.

docker exec -it postgres-container /bin/bash

Let's break down the command and its options:

docker exec: This is the command to execute a command within a running Docker container.
-it: These options allow for an interactive session with the container. It combines the -i (interactive) and -t (pseudo-TTY) options.
postgres-container: This is the name or ID of the Docker container where you want to execute the command.
/bin/bash: This is the command you want to run inside the container. In this case, it starts a Bash shell within the container.

The prompt will change and our shell we will be inside the container:

Now run the following command to switch to the postgres user:

su - postgres

The psql command is used to interact with a PostgreSQL database from the command line. It provides an interactive terminal-based interface for executing SQL queries and managing the PostgreSQL server.

psql

Some basic psql commands that are necessary to know before working with psql:

\l: Lists all available databases.
\c <database_name>: Connects to a specific database.
\dt: Lists all tables in the current database.
\d <table_name>: Shows the structure of a specific table.

Now we will create a user using CREATE USER command in PostgreSQL which is used to create a new user account with specified attributes, including an encrypted password.

CREATE USER dbuser WITH ENCRYPTED PASSWORD 'dbuser123';

Let's break down the CREATE USER command:

CREATE USER: This is the command used to create a new user in PostgreSQL.
dbuser: This is the username we have assigned to the new user.
WITH ENCRYPTED PASSWORD: This clause specifies that you are providing an encrypted password for the user.
'dbuser123': This is the encrypted password for the user.

Let's proceed with creating a new database and designating dbuser as its owner.

CREATE DATABASE employeedb OWNER dbuser;

Use the following command to list all databases:

\l

Now connect to the employeedb database as user dbuser:

\c employeedb dbuser

Creation of tables and the insertion of values into them.

For the purpose of demonstration, we will proceed to create a few tables in the employeedb database.

CREATE TABLE employees (
  emp_id INT PRIMARY KEY,
  emp_name VARCHAR(255)
);

CREATE TABLE designations (
  designation_id INT PRIMARY KEY,
  designation_name VARCHAR(255)
);

Adding few rows in the tables

INSERT INTO employees (emp_id, emp_name)
VALUES
  (1, 'John Doe'),
  (2, 'Jane Smith'),
  (3, 'David Johnson'),
  (4, 'Emily Brown'),
  (5, 'Michael Davis');

INSERT INTO designations (designation_id, designation_name)
VALUES
  (1, 'Manager'),
  (2, 'Engineer'),
  (3, 'Analyst'),
  (4, 'Developer'),
  (5, 'Administrator');

To retrieve all the rows stored in the table and display them:

SELECT * FROM employees;
SELECT * FROM designations;

Working with pg_dump to Create a Database Backup

To create a dump file of a PostgreSQL database, you can use the following command:

pg_dump -U <username> -d <database_name> -f <dump.sql>

As we are running PostgreSQL inside a Docker container, we need to modify the command accordingly.

docker exec -t <container-name/container-id> pg_dump -U <db-user> -d <db-name> > <output-file>

docker exec -t postgres-container pg_dump -U dbuser -d employeedb > dump.sql

We will now proceed to delete the employeedb database and then recreate it using the previously created dump file.

DROP DATABASE employeedb;

To recreate a database using a dump file, it is necessary to first create the database that is referenced within the dump file.
Please note that before creating the database from the dump file, it is necessary to add the user specified within the dump file.

CREATE DATABASE employeedb;

GRANT ALL PRIVILEGES ON SCHEMA public TO dbuser;

The command below is utilized to import/recreate a database by utilizing a dump file.

psql -U your_username -d your_database_name -f your_dump_file.sql

As we are running PostgreSQL inside a Docker container, we need to modify the command accordingly.

docker exec -i <CONTAINER_ID> psql -U <db-username> -d <db-name> < dump.sql

docker exec -i postgres-container psql -U dbuser -d employeedb < dump.sql

Once the database has been created using the dump file, you can verify its creation by examining the rows within the table.

To begin, establish a connection to the database using the following command:

docker exec -it <CONTAINER_NAME_OR_ID> psql -U <USERNAME> -d <DATABASE_NAME>

docker exec -it postgres-container psql -U dbuser -d employeedb

Subsequently, execute SELECT queries to verify the consistency of tables and their respective rows following the recreation of the database using the dump file.

SELECT * FROM employees;
SELECT * FROM designations;

Deleting the postgres-container and Recreating It with the Same Volume to Verify Data Persistence

First stop the running docker container:

docker stop postgres-container

Now delete the running docker container:

docker rm postgres-container

To ensure data persistence and verify the presence of all data (databases, users, tables, and rows), let's start a new container using the same named volume, postgres-container-data, that was utilized by the previous container.

docker run -d \
 --name postgres-container \
 -e POSTGRES_PASSWORD=mysecretpassword \
 -v postgres-container-data:/var/lib/postgresql/data \
 postgres

Now connect to the same database employeedb with the same user db user:

docker exec -it postgres-container psql -U dbuser -d employeedb

employeedb=> SELECT * FROM public.employees;
 emp_id |   emp_name
--------+---------------
      1 | John Doe
      2 | Jane Smith
      3 | David Johnson
      4 | Emily Brown
      5 | Michael Davis
(5 rows)

The data persistence of our container is demonstrated by the fact that even after deleting and recreating it with the same volume, all our previously created databases, users, tables, and rows remain intact. This confirms that Docker volumes effectively preserve our data across container lifecycles.

Conclusion

In conclusion, we have explored the process of setting up a PostgreSQL database in a Docker container, utilizing volumes to ensure data persistence. We learned how to create users and databases within the PostgreSQL environment, enabling efficient data management. Additionally, we delved into the powerful pg_dump utility, which allows us to create backups of our databases and restore them as needed. By following these steps, you now have the knowledge and tools to confidently work with PostgreSQL in a Dockerized environment, ensuring the integrity and availability of your data. Docker and PostgreSQL make a powerful combination, providing flexibility, scalability, and ease of use. I hope this blog has been informative and helpful in your journey of working with PostgreSQL and Docker.

Building Multi-page Signup Login React Native App Part 2

Pratik280 — Sun, 30 Apr 2023 16:22:38 +0000

Introduction

In this second part of our multi-part series, we will continue building our multi-page signup/login app in React Native. In this blog, we will cover the following topics:

Styling components using TailwindCSS
Creating individual React Native components with the ability to pass props.

You can find the source code on my Github.

Disclaimer: This project is UI-focused, with an emphasis on styling and design. It's a mobile app, but it's not connected to any backend or database, so all the data is hard-coded in the pages. The primary goal of this project is to practice coding and explore various design ideas, with the aim of producing a visually appealing and functional mobile app.

Few steps to follow before we start.

To keep our reusable React Native components in an organized manner, let's create a folder named components.
You can create a folder named assets to store images, SVGs, and other static resources that are required in your React Native app.

Design System (colors)

We are going to use the following colors:

For Backgroud: #fff ie white in tailwindcss
For dark text: '#3F3D56'
For white text: '#f3f4f6'
Primary Color: '#8B5CF6' ie blue-500 in tailwindcss
bgGray: '#e4e4e7'

To use colors more conveniently in Tailwind CSS classes, we can add them to the Tailwind config file:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./App.{js,jsx,ts,tsx}",
    "./components/*.{js,jsx,ts,tsx}",
    "./pages/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        textDark: "#3F3D56",
      },
    },
  },
  plugins: [],
};

To ensure that we can apply Tailwind CSS to the components that will be present inside the components directory, we have included this directory in the content section of the Tailwind CSS configuration file.

To style components using props, we will also use React Native Stylesheet. To define all the necessary color values, we will create a colors.js file in the assets/folder.

assets/colors.js

export default {
  textDark: "#3F3D56",
  textWhite: "#f3f4f6",
  primary: "#8B5CF6",
  bgGray: "#e4e4e7",
};

Creating Heading Component.

Creating a Header Text that will be visible on all the pages.

Greeting.tsx

<Text className="text-textDark text-4xl font-extrabold">CodeGenius</Text>

To ensure reusability of the Heading component across all pages, it is best practice to create a separate component file for it.

Create a Heading component components/Heading.tsx.

import { Text } from "react-native";
import React from "react";

export default function Heading(props) {
  return (
    <Text className="text-textDark text-4xl font-extrabold">
      {props.content}
    </Text>
  );
}

We will make the Heading component reusable by passing text as a prop, enabling us to use the same component for displaying headings with different text.

We will import the reusable Heading component in pages/Greeting.tsx and pass the content prop to it, as shown below:

import Heading from "../components/Heading";

const Greeting = ({ navigation }) => {
  return (
    <SafeAreaView className="bg-white container h-full px-7">
      <Heading content="CodeGenius" />

      <View className="mt-6">
        <TouchableOpacity
          className="mt-3 rounded-xl py-3"
          style={{ elevation: 1, backgroundColor: colors.primary }}
          onPress={() => navigation.navigate("Login")}
        >
          <Text
            className="text-center text-base"
            style={{ color: colors.textWhite }}
          >
            Login
          </Text>
        </TouchableOpacity>
        <CustomButton
          navigation={navigation}
          bgColor={colors.bgGray}
          textColor={colors.textDark}
          goto={"Signup"}
          content={"Singup"}
        />
      </View>
    </SafeAreaView>
  );
};

This is how our application looks now:

Fig. 1 - Heading Component

Hero image

While there are plenty of image and vector art resources available online, we'll be using an image from undraw for this demonstration. First, download the image and save it in the assets folder of your project. Then, follow these steps to add the vector art to your project.

pages/Greeting.tsx

      <View className="flex justify-center items-center mt-24">
        <Image
          source={require('./../assets/hero.png')}
          style={{width: 400, height: 300}}
        />
      </View>
      <Heading content="CodeGenius" />

Fig. 2 - Hero Component

Buttons

Writing code for resusable button component.
The CustomButton component in our code has been designed to be reusable in different ways. We can customize the button's appearance and functionality by passing values to different props. For example, we can use the "navigation" prop to navigate to a different page, set the background color with "bgColor" prop, set the text color with "textColor" prop, set the text content with "content" prop, and set the navigation destination with "goto" prop. By using these different props in different combinations, we can create a CustomButton component that meets our specific requirements. This allows us to create buttons quickly and efficiently for various parts of our application without having to write new code each time.

compnents/CustomButton.tsx

import { TouchableOpacity, Text } from "react-native";
import React from "react";

const CustomButton = props => {
  return (
    <TouchableOpacity
      className="mt-3 rounded-xl py-3"
      style={{ elevation: 1, backgroundColor: props.bgColor }}
      onPress={() => props.navigation.navigate(props.goto)}
    >
      <Text
        className="text-center text-base"
        style={{ color: props.textColor }}
      >
        {props.content}
      </Text>
    </TouchableOpacity>
  );
};

export default CustomButton;

With the reusable CustomButton component we have created, we can create multiple buttons with different colors and text using props. By passing different values to the bgColor and textColor props, we can create buttons with different color schemes. Additionally, we can change the text displayed on the button by passing the desired text to the content prop. We can also use the goto prop to specify the page that the button should navigate to when it is clicked. By utilizing these props in different combinations, we can create custom buttons according to our needs.

<CustomButton
  navigation={navigation}
  bgColor={'#f87171'}
  textColor={'#fff'}
  goto={'Signup'}
  content={'Hello'}
/>
<CustomButton
  navigation={navigation}
  bgColor={'#059669'}
  textColor={'#fff'}
  goto={'Signup'}
  content={'Click Here'}
/>
<CustomButton
  navigation={navigation}
  bgColor={colors.primary}
  textColor={colors.textWhite}
  goto={'Login'}
  content={'Login'}
/>
<CustomButton
  navigation={navigation}
  bgColor={colors.bgGray}
  textColor={colors.textDark}
  goto={'Signup'}
  content={'Singup'}
/>

Fig. 3 - Buttons

Form elements

In this section, we will be styling a form that includes the following elements:

Text inputs for entering first name, last name, email, and password.
A signup button to create a new account.
Google and Facebook buttons to login with those accounts.
A link to the login page for users who already have an account.

The form will provide a simple and user-friendly way for users to sign up for our service and log in using their preferred method. By incorporating popular social media platforms, we can make the process more convenient for users and potentially attract more users to our platform. The text inputs will allow users to provide their basic information securely, and the signup button will complete the registration process. If users already have an account, they can easily access it through the login page linked in the form.

Text inputs

Creating a text input for First Name. We will use useState hook which is a built-in hook in React/Reat-Native that allows functional components to have state variables and update them. It takes an initial value and returns an array with two elements: the current state value and a function to update it. This means that you can update the data within your component and React will automatically re-render the component to reflect the changes.

pages/Signup.tsx

const [firstName, setFirstName] = useState("");

The TextInput component is used to take input from keyboard in react native.

<TextInput
  onChangeText={setFirstName}
  placeholder={"First Name"}
  placeholderTextColor={colors.textDark}
  value={firstName}
  className="bg-zinc-200 text-textgray rounded-xl py-3 px-5"
/>

When the user types something into the input field, the setFirstName function is called with the new value as an argument, and the firstName state variable is updated with that value. The placeholder prop sets the initial text displayed in the input field, while the value prop sets the current value of the input field. The className prop sets the CSS classes used for styling the input field, in this case a light gray background, dark text, and rounded corners.

In the same way we can create multiple text inputs like Last Name, Email and password.

Social buttons

Creating a functional component called "SocialIcons" that displays two TouchableOpacity buttons with Google and Facebook logos as images.

components/SocialIcons.tsx

import { View, TouchableOpacity, Image } from "react-native";
import React from "react";

const SocialIcons = () => {
  return (
    <View className="flex flex-row items-center justify-center">
      <TouchableOpacity className="bg-zinc-200 mx-2 rounded-lg px-16 py-2">
        <Image
          source={require("./../assets/google.png")}
          style={{ width: 30, height: 30 }}
        />
      </TouchableOpacity>
      <TouchableOpacity className="bg-zinc-200 mx-2 rounded-lg px-16 py-2">
        <Image
          source={require("./../assets/facebook.png")}
          style={{ width: 30, height: 30 }}
        />
      </TouchableOpacity>
    </View>
  );
};

export default SocialIcons;

Complete Signup Page Code

pages/Signup.tsx

import { View, Text, TouchableOpacity, TextInput } from "react-native";
import { useState } from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import Heading from "../components/Heading";
import CustomButton from "../components/CustomButton";
import colors from "../assets/colors";
import SocialIcons from "../components/SocialIcons";

const Signup = ({ navigation }) => {
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  return (
    <SafeAreaView className="bg-white container h-full px-7">
      <View className="mt-24">
        <Heading content="Create Account" />
      </View>
      <View className="mt-4">
        <TextInput
          onChangeText={setFirstName}
          placeholder={"First Name"}
          placeholderTextColor={colors.textDark}
          value={firstName}
          className="bg-zinc-200 text-textgray rounded-xl py-3 px-5"
        />
        <TextInput
          onChangeText={setLastName}
          placeholder={"Last Name"}
          placeholderTextColor={colors.textDark}
          value={lastName}
          className="bg-zinc-200 text-textgray mt-3 rounded-xl py-3 px-5"
          // style={{color: '#000000'}}
        />
        <TextInput
          onChangeText={setEmail}
          placeholder={"Email"}
          placeholderTextColor={colors.textDark}
          value={email}
          className="bg-zinc-200 text-textgray mt-3 rounded-xl py-3 px-5"
        />
        <TextInput
          secureTextEntry={true}
          onChangeText={setPassword}
          placeholder={"Password"}
          placeholderTextColor={colors.textDark}
          value={password}
          className="bg-zinc-200 text-textgray mt-3 rounded-xl py-3 px-5"
        />
        <TouchableOpacity
          className="mt-2 flex items-end"
          onPress={() => navigation.goBack()}
        >
          <Text className="text-textgray font-bold">Forgot Password?</Text>
        </TouchableOpacity>
      </View>
      <CustomButton
        navigation={navigation}
        bgColor={colors.primary}
        textColor={colors.textWhite}
        goto={"Items"}
        content={"Signup"}
      />
      <View className="mt-10">
        <Text className="text-textgray text-center">Or Continue With</Text>
        <View className="mt-2">
          <SocialIcons />
        </View>
        <View className="mt-24 flex flex-row items-center justify-center">
          <Text className="text-textgray">Already have a accout?</Text>
          <TouchableOpacity onPress={() => navigation.navigate("Login")}>
            <Text className="text-textgray underline">Login</Text>
          </TouchableOpacity>
        </View>
      </View>
    </SafeAreaView>
  );
};

export default Signup;

Fig. 4 - Signup Page

Login Page

Similary create Login page

pages/Login.tsx

import { View, Text, TouchableOpacity, TextInput, Image } from "react-native";
import { useState } from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import Heading from "../components/Heading";
import CustomButton from "../components/CustomButton";
import colors from "../assets/colors";
import SocialIcons from "../components/SocialIcons";

const Login = ({ navigation }) => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  return (
    <SafeAreaView className="bg-white container h-full px-7">
      <View className="mt-36">
        <Heading content="Welcome Back" />
      </View>
      <View className="mt-4">
        <TextInput
          onChangeText={setEmail}
          placeholder={"Email"}
          placeholderTextColor={colors.textDark}
          value={email}
          className="bg-zinc-200 rounded-xl py-3 pl-5"
        />
        <TextInput
          secureTextEntry={true}
          onChangeText={setPassword}
          placeholder={"Password"}
          placeholderTextColor={colors.textDark}
          value={password}
          className="bg-zinc-200 mt-3 rounded-xl py-3 pl-5"
        />
        <TouchableOpacity
          className="mt-2 flex items-end"
          onPress={() => navigation.goBack()}
        >
          <Text className="text-textDark font-bold">Forgot Password?</Text>
        </TouchableOpacity>
      </View>
      <CustomButton
        navigation={navigation}
        bgColor={colors.primary}
        textColor={colors.textWhite}
        goto={"Items"}
        content={"Login"}
      />
      <View className="mt-10">
        <Text className="text-textDark text-center">Or Continue With</Text>
        <View className="mt-2">
          <SocialIcons />
        </View>
        <View className="mt-44 flex flex-row items-center justify-center">
          <Text className="text-textDark">Does'nt have a accout?</Text>
          <TouchableOpacity onPress={() => navigation.navigate("Signup")}>
            <Text className="text-textDark underline">Signup</Text>
          </TouchableOpacity>
        </View>
      </View>
    </SafeAreaView>
  );
};

export default Login;

Fig. 5 - Login Page

Conclusion

In conclusion, building a UI for a login and signup form in React Native using TailwindCSS and functional reusable components can help streamline the development process and improve the overall user experience. By leveraging the power of React Native and the flexibility of TailwindCSS, we can create stunning UIs with minimal effort, while also maintaining a high degree of customization and flexibility. Additionally, the use of functional reusable components allows developers to create modular, reusable code that can be easily scaled and adapted for future projects. Overall, the process of building a login and signup form UI in React Native with TailwindCSS is a powerful and efficient way to create sleek and user-friendly interfaces for any mobile app.

Building Multi-page Signup Login React Native App Part 1

Pratik280 — Sun, 30 Apr 2023 12:57:31 +0000

Introduction

Welcome to the first part of our multi-part series on building a Login/Signup form in React Native. In this article, we'll focus on the setup process and cover the following topics:

How to integrate TailwindCSS in your React Native app using the Nativewind library
Styling button components using TailwindCSS classes
Setting up React Native Navigation and implementing navigation between three pages: Greeting, Login, and Signup."

You can find the source code on my Github
This is how the end result looks like.

Fig. 1 - Login/Signup Application in react native

Disclaimer: This project is UI-focused, with an emphasis on styling and design. It's a mobile app, but it's not connected to any backend or database, so all the data is hard-coded in the pages. The primary goal of this project is to practice coding and explore various design ideas, with the aim of producing a visually appealing and functional mobile app.

Prerequisites

Nodejs for using react native cli.
Text Editor / IDE (VS Code, Android Studio).
Android device or Android Virtual Device for testing.

If this is your first time working with react native, I have made a in-depth guide on setting up development environment for react native on linux.

Setting up Tailwindcss with Nativewind in react native application

Tailwindcss is a css library used for web, where we style UI using pre-defined in-line css classes. It has very good defaults set out of the box.
Nativewind allows us to use tailwindcss in react-native. It acts as a compatibility layer between React Native and CSS.

Creating a react native project using react-native cli:

npx react-native init <projectName>

Installing node js dependencies for tailwindcss and nativewind according to official Nativewind docs:

npm i nativewind
npm i -D tailwindcss

Generate a tailwind config file using command:

npx tailwindcss init

This will generate a tailwind.config.js in the root directory of your project, simply run the command mentioned. After generating the file, you can edit its content to include the pages directory which we will create later on in the project.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./App.{js,jsx,ts,tsx}", "./pages/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Make the below mentioned changes in babel.config.js:

module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: ["nativewind/babel"],
};

Replace all content in App.tsx with following:

import { View, Text } from "react-native";
import React from "react";
import "nativewind/types.d";

const App = () => {
  return (
    <View className="mt-12">
      <Text className="pl-4 text-3xl font-bold">App</Text>
    </View>
  );
};

export default App;

Now run the app:

npm run android

npx react-native start

Fig. 2 - App.tsx

By applying inline Tailwind CSS classes to our app component, we have successfully styled it. You can now see the visual changes in the app.

Working with React Navigation.

What is React Navigation.

Web browsers use links to navigate between pages and manage the browser history stack. React Native doesn't have a built-in history stack.
React Navigation's native stack navigator helps transition between screens and manage navigation history in React Native.
With a single stack navigator, the app can push and pop items from the navigation stack similar to how a web browser manages the history stack.
The key difference is that React Navigation provides gestures and animations for transitioning between screens on Android and iOS.

Setting up React Navigation in our project.

Installing necessary node js dependencies for React Navigation core utilities:

npm install @react-navigation/native @react-navigation/native-stack

We also need to install react-native-screens and react-native-safe-area-context.

For bare react native project execute the following command:

npm install react-native-screens react-native-safe-area-context

For expo project execute the following command:

npx expo install react-native-screens react-native-safe-area-context

For more information in installing dependencies checkout the React native official docs and React Navigation Docs.

Adding three pages for navigation.

To organize our different pages, we'll create a dedicated folder named pages/ in the root directory. This folder will contain components for pages such as the Greeting, Login, and Signup pages. For now, these components will simply return a single line of text like 'Greeting' for the Greeting page and so on. To give you an example, here is what pages/Greeting.tsx looks like:

import { View, Text } from "react-native";
import React from "react";
import { SafeAreaView } from "react-native-safe-area-context";

const Greeting = () => {
  return (
    <SafeAreaView>
      <Text>Greeting</Text>
    </SafeAreaView>
  );
};

export default Greeting;

The SafeAreaView component is used in React Native to ensure that the content of the app is visible on the screen of devices with notches, rounded corners, or other such irregularities. Read more about SafeAreaView.

Follow a similar approach to create the code for the Signup and login pages.

After creating all three pages, now its time to use React Navigation in our main App.tsx so that we can navigate between our all three pages (Greeting page, Signup page and Login page).

import { View, Text } from "react-native";
import React from "react";
import "nativewind/types.d";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Signup from "./components/Signup";
import Login from "./components/Login";
import Greeting from "./components/Greeting";

const Stack = createNativeStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Greeting" component={Greeting} />
        <Stack.Screen name="Signup" component={Signup} />
        <Stack.Screen name="Login" component={Login} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

We wrap all navigators with NavigationContainer component.

NavigationContainer is component that is responsible for managing the navigation tree and holds the navigation state.
createNativeStackNavigator is a React function that returns an object with two components: Screen and Navigator.
Screen will be our individual pages and we will house Navigator with all our individual pages that we want to navigate.

Now in pages/Greeting.tsx we will add Links(buttons) to navigate to other pages ie Login Page and Signup Page.

import { View, Text, TouchableOpacity } from "react-native";
import React from "react";
import { SafeAreaView } from "react-native-safe-area-context";

const Greeting = ({ navigation }) => {
  return (
    <SafeAreaView>
      <Text>Greeting</Text>
      <TouchableOpacity onPress={() => navigation.navigate("Signup")}>
        <Text>Signup</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => navigation.navigate("Login")}>
        <Text>Login</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
};

export default Greeting;

TouchableOpacity is a component in React Native that provides a touchable area that can be used to detect press gestures. It allows the user to interact with the app by tapping on a particular area of the screen, which can be customized with different styles and effects. When the user taps on the touchable area, the TouchableOpacity component will automatically animate its opacity to give a visual feedback to the user, and then call a function that is defined in its onPress property. The TouchableOpacity component is commonly used for buttons, icons, and other interactive elements in a React Native app.

When the user clicks on the "Signup" button, the app navigates to the Signup page using the navigation.navigate() method. Similarly, the navigation.navigate("Login") method is used to navigate to the Login page.

Fig. 3 - Greeting page with Navigation

Fig. 4 - The sign-up page is accessed by clicking on the Signup button located on the Greeting page.

Adding `back` button

Even though the Navigation header bar in the top of the screen has a back button, we will create our own back button in the Signup and Login pages. This custom button will redirect us back to the Greeting page.

pages/Login.tsx

import { View, Text, TouchableOpacity } from "react-native";
import React from "react";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";

const Login = ({ navigation }) => {
  return (
    <SafeAreaView>
      <Text>Login</Text>
      <TouchableOpacity onPress={() => navigation.goBack()}>
        <Text>Back</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
};

export default Login;

When the user presses the back button, navigation.goBack() will be called, which will take the user back to the previous screen, i.e., the Greeting page.
The Navigator component is organized as a stack where each page is stacked on top of the previous one as we navigate through the app. Using the goBack() method, we can remove the topmost page from the stack and return to the previously active page.

Styling Button using Tailwindcss.

We we style a button using tailwindcss classes.

Use the following code to style both the button ie Signup button and Login button.

<TouchableOpacity
  className="bg-indigo-500 mr-3 mt-2 rounded-md py-2"
  style={{ elevation: 3 }}
  onPress={() => navigation.navigate("Signup")}
>
  <Text className="text-gray-100 text-center text-base">Signup</Text>
</TouchableOpacity>

Customization of Navigation Header Bar

The header bar that provided by default with React Navigation has many customizations like backgroundColor, TintColor and much more.

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Greeting"
          component={Greeting}
          options={{
            title: "Home",
            headerStyle: {
              backgroundColor: "#6366f1",
            },
            headerTintColor: "#fff",
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

Fig. 5 - Styled buttons and customized Header Bar

Additionally, we can also hide the header of navbar by passing a prop headerShown:false to screen

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Greeting"
          component={Greeting}
          options={{ headerShown: false }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

Fig. 6 - Greeting page without header bar

For more customization of header bar checkout the official React Navigation Header docs.

Conclusion

In conclusion, we have successfully set up Tailwindcss in our React Native project using the nativewind library. We have also styled our button component using Tailwindcss classes to achieve a clean and modern look. Furthermore, we have set up React Native Navigation and implemented navigation between three pages: Greeting, Login, and Signup pages. With these tools, we are now well-equipped to create robust and visually appealing mobile applications with easy navigation. It's important to note that there are many more features and capabilities available with Tailwindcss and React Native Navigation, so be sure to explore and experiment with these tools to make your app stand out. In the next part we will create reusable react components and style our Login/Signup app using tailwindcss.

Linux Devs Rejoice: A Comprehensive Guide to Setting Up Your React Native Development Environment

Pratik280 — Tue, 04 Apr 2023 05:23:02 +0000

Introduction

React native is open source framework created by facebook, which is used to develop mobile apps using javascript and react. In this article, we will learn how to start with react-native development on linux by installing all the necessary tools. At the end of the article you will have a bare bones "Hello world" react-native application running in your system.

I will primarily be using Arch Linux for this guide, but whenever necessary, I will also provide instructions for other popular Linux distributions such as Fedora and Ubuntu.

We will require these 4 tools for setting up developer environment for react-native.

Node JS
Java OpenJDK
Android Studio
Visual Studio Code

Installing and Setting up NodeJS

To manage Node.js versions, we'll be using Node Version Manager (NVM), which is compatible with any Linux distribution. NVM offers the flexibility to install and switch between multiple Node.js versions on our system, enabling us to work with different projects that require specific versions of Node.js. You can learn more about nvm here.

Steps for installing and setting up NodeJs using nvm:

Open this link to download nvm. Where you will get the script to download and install nvm OR Just copy paste the below command in your terminal.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

After downloading NVM, refresh your Bash session with the following command:

bash

Run the following command to verify the nvm installation:

nvm --verion

We're now ready to install Node.js using NVM, and we'll be installing the Long-Term Support (LTS) version. To do so, execute the following command:

nvm install --lts

Again refresh your Bash session with the following command:

bash

Verify your node js download using the following command:

node -v

Installing and Setting up Java OpenJDK

To install java openJDK use the following command:

for arch and arch based linux distros.

  sudo pacman -S jdk11-openjdk

For more info check Arch wiki.

for ubuntu and ubuntu based linux distros.

  sudo apt install openjdk-11-jdk

For more info check help.ubuntu.com/community/Java.

for fedora and fedora based linux distros.

  sudo dnf install java-11-openjdk.x86_64

For more info check docs.fedoraproject.org.

Adding JAVA_HOME environment variable in bashrc.

To add the JAVA_HOME environment variable, edit the .bashrc file located in the home directory (which is a hidden file). Simply copy and paste the following content to add the JAVA_HOME variable in .bashrc.

for arch and arch based linux distros.

  export JAVA_HOME=/usr/lib/jvm/java-11-openjdk/

for ubuntu and ubuntu based linux distros.

  export JAVA_HOME=/usr/lib/jvm/java-11-openjdk-amd64

for fedora and fedora based linux distros.

  export JAVA_HOME=/usr/lib/jvm/jre-11-openjdk

Installing and Setting up Visual Studio Code

I would recommend using VSCodium, which is functionally identical to VSCode but is a free and open-source alternative.

For Arch and Arch based linux distros

To install VSCodium we'll use the following command to download it from the AUR (Arch User Repository) on Arch Linux:

  yay -S vscodium-bin

For Ubuntu and Ubuntu based linux distros use the following commands:

  wget -qO - https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/raw/master/pub.gpg \
      | gpg --dearmor \
      | sudo dd of=/usr/share/keyrings/vscodium-archive-keyring.gpg

  echo 'deb [ signed-by=/usr/share/keyrings/vscodium-archive-keyring.gpg ] https://download.vscodium.com/debs vscodium main' \
      | sudo tee /etc/apt/sources.list.d/vscodium.list

  sudo apt update && sudo apt install codium

For Fedora and Fedora based linux distros use the following commands:

  sudo rpmkeys --import https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/-/raw/master/pub.gpg

  printf "[gitlab.com_paulcarroty_vscodium_repo]\nname=download.vscodium.com\nbaseurl=https://download.vscodium.com/rpms/\nenabled=1\ngpgcheck=1\nrepo_gpgcheck=1\ngpgkey=https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/-/raw/master/pub.gpg\nmetadata_expire=1h" | sudo tee -a /etc/yum.repos.d/vscodium.repo

  sudo dnf install codium

Installing and Setting up Android Studio

Install android-studio.

Installing android-studio (on any linux distro)

Download the Android Studio tar file from the android studio official site, and then extract it using your preferred method.
Once extracted, go inside its bin folder and run the studio.sh.

  ./studio.sh

Installing android on arch and arch based distros.

For Arch Linux and its derivatives, an AUR package is also available which can be downloaded using the following command:

   yay -S android-studio

Adding the necessary paths in bashrc for proper working of andoid-studio

To ensure the proper functioning of Android Studio, we need to add the necessary paths to the .bashrc file.
Copy and paste the following content into your .bashrc file.

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/tools

Adding android device for testing our react native application

For setting up Android device. There are two ways

Using physical device by connecting to computer using usb cable.

To test your React Native application on a physical device, connect your Android device to your PC using a USB cable. Ensure that USB debugging is enabled in your Android device's developer options, and select file transfer mode for the USB connection.

Creating a virtual device in Android Studio.
For a more detailed guide on creating virtual devices in Android Studio, you can refer to the official guide.
- Open Android Studio click on “More Action” then click “Virtual Device Manager”
  
  Fig. 1 - Virtual Device Manager in Android Studio
- Select a device which has Google play icon in Playstore column. From official documentation “A device definition labeled with the Google Play logo in the Play Store column includes both the Google Play Store app and access to Google Play services, including a Google Play tab in the Extended controls dialog that provides a convenient button for updating Google Play services on the device.”
  
  Fig. 2 - Selecting Android Virtual Device in Android Studio
- Click on the play icon to launch avd.
  
  Fig. 3 - Virtual Device Launched
- If the emulator doesn't launch or terminates instantly, you can launch it from the terminal to see the logs and diagnose any issues. In my case, the emulator failed to launch due to a missing libpulse library, which I resolved by downloading it.
- Navigate to your Android folder, which for me is located at ~/Android/Sdk, to start the emulator from the terminal
```
 cd ~/Android/Sdk/emulator
```

Run this command to list the avds
```
 ./emulator -list-avds
```

Then run this command to start the avd

  ./emulator @<AVD_NAME>
  ./emulator @Pixel_4_API_33

Starting with react-native.

To ensure everything is working, we will create a simple HelloWorld project in React Native.

Create a react-native project by executing the following command:

npx react-native init <ProjectName>

npx react-native init Hello
cd Hello

Open the "Hello" folder in VSCodium/VSCode.

Open two separate terminals in the same folder and run these two commands.

npx react-native start

npm run android

You will see the application running in your android device.

I recommend installing the "ES7+ React/Redux/React-Native snippets" extension by the publisher "dsznajder" in VSCodium/VSCode. This extension provides snippets that enable you to generate React Native components quickly and easily.

In VSCodium/VSCode, open the App.tsx file and delete its contents to start fresh. Type 'rnfes', and VSCode will automatically suggest the snippet from the extension we installed earlier. This snippet will create a simple component for us.

App.tsx

import { StyleSheet, Text, View } from "react-native";
import React from "react";

const App = () => {
  return (
    <View>
      <Text>Hello</Text>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({});

Once you save the file, the application will display a simple 'Hello' message.

Fig. 4 - Application output showing `Hello` on screen.

Conclusion

Congratulations, you have successfully set up your development environment for React Native on Linux! By installing and configuring Node.js, Java OpenJDK, VSCodium, and Android Studio, you are now equipped with the necessary tools to develop high-quality mobile applications using React Native. With these tools in place, you can start exploring the vast potential of React Native and begin building amazing apps that will run seamlessly on Android platform. I hope this guide has been helpful, and I wish you all the best in your React Native development journey.

DEV Community: Pratik280

Part 1 : Peer Aware Eureka Service Registry

About the Order System Used in This Series

What This Part Covers

What Is a Service Registry?

Why Start with Eureka?

Let’s Begin 🚀

Why Service Discovery Is Mandatory in Production

High-Level Architecture

Existing Order System

Step 1: Peer-Aware Eureka Service Registry (3 Nodes)

Why Peer-Aware Eureka?

Eureka Server Configuration

Step 1: Peer-Aware Eureka Service Registry (3 Nodes)

Why Peer-Aware Eureka?

Eureka Server Configuration

Eureka Server Application

Step 2: Register Order System with Eureka

Order System Configuration

Step 3: Create Order Consumer Microservice

Step 4: Service-to-Service Call

Summary

Production-Grade Spring Boot APIs — Part 3: Production-Grade Folder Structure & Layered Implementation

Controller Layer — API Entry Point

Entity Layer — Database Representation

DTO Layer — API Contracts

Repository Layer — Data Access

Service Layer — Business Logic Contract

Service Implementation — Business Logic Execution

ModelMapper — Clean Entity ↔ DTO Mapping

What ModelMapper Does

How ModelMapper Is Used in This Project

ModelMapper — Why We Use It

Custom Business Exceptions

How This Integrates with BaseResponse & GlobalExceptionHandler

Final Result

Production-Grade Spring Boot APIs — Part 2: Consistent Responses & Global Exception Handling

Why we need a common response format

BaseResponse — A Single Contract for All APIs

This eliminates ambiguity for API consumers.

Builder Pattern for Clean Response Creation

Why Controllers Should NOT Handle Exceptions

Global Exception Handling with @RestControllerAdvice

Handling Domain Exceptions with @ExceptionHandler

Custom Exceptions Represent Business Failures

The End Result

Production-Grade Spring Boot APIs — Part 1: Web, JPA & What Really Happens at Startup

spring-boot-starter vs spring-boot-starter-web

2. ORM, JPA & Hibernate (Production clarity)

What is ORM?

JPA vs Hibernate (Interview‑safe explanation)

Why spring-boot-starter-data-jpa is critical

Repository abstraction (No DAO, No SQL)

3. Spring Boot Application Lifecycle (What really happens)

What matters in production

Mastering PostgreSQL Database Setup in Docker: Persistent Volumes, User Creation, Backup, and Restoration

Introduction

Using docker for postgres databse.

Some basic psql commands that are necessary to know before working with psql:

Creation of tables and the insertion of values into them.

Working with pg_dump to Create a Database Backup

Deleting the postgres-container and Recreating It with the Same Volume to Verify Data Persistence

Conclusion

Building Multi-page Signup Login React Native App Part 2

Introduction

Design System (colors)

Creating Heading Component.

Hero image

Buttons

Form elements

Text inputs

Social buttons

Complete Signup Page Code

Login Page

Conclusion

Building Multi-page Signup Login React Native App Part 1

Introduction

Prerequisites

Setting up Tailwindcss with Nativewind in react native application

Working with React Navigation.

`spring-boot-starter` vs `spring-boot-starter-web`

Why `spring-boot-starter-data-jpa` is critical

Adding `back` button