💻 DevOps Maaya - Workshop 1 - August 30, 2026 | FrontEnd, BackEnd and Database

In this Workshop, We will try to build an e-commerce application and try to understand how Frontend, BackEnd and database function. 

Get Ready to build your own amazon.

By the end of workshop- You will understand how API´s are configured, how three tier-architecture is built and how are different tools connected to each other,

You will also be able to build a product of your own as all the tools used in this project to build our application are completely free.

Workshop is mainly focused to build application on localhost but workshop makes sure that you will understand how real world application like amazon, flipkart, zomato, and other sites that you could name of.

You will be able to understand how products get added into stores like Amazon, flipkart without downtime.

Every website you came across has three main tools in its architecture as an X-Ray. Frontend, Backend and Database

In this workshop, we will try to understand Frontend, Backend and Workshops by building an e-commerce project.

You will understand how exactly sites like Amazon, flipkart works in an X-ray level as we are going to build our own e-commerce project here.

🛠️Tools to Install

Before we start, make sure you have these tools installed.

If you are using Windows, I would recommend installing Ubuntu WSL as it makes project easier and you can use linux commands in windows machine

Visual Studio code

Git

Node Js

Download Java

For MacOs

brew install openjdk@21
java --version

Note: In case, Java version does not show up. it means your MacOS is reading Java files from default path. so we will use symbolic link here for MacOs

sudo ln -sfn /opt/homebrew/opt/openjdk@21/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk-21.jdk

For Windows (Open Ubuntu WSL)

sudo apt update
sudo apt install openjdk-21-jdk
Java --version

Note: if java version is not shown in windows, run following commands in Ubuntu WSL

echo 'export JAVA_HOME=/usr/lib/jvm/java-21-openjdk-amd64' >> ~/.bashrc
source ~/.bashrc
java --version

Maven

Postgresql ( please make sure to save password that you set)

Postman

💻 Use VS code Terminal

Check tools installed. and we will understand why each tool is installed and its significance as we build our project

Open Visual Studio, select Terminal from Menu tab and check if all tools required are installed with following commands.

If you are using windows, click on +icon on right bottom of screen and change it to Ubuntu WSL and then run mentioned below commands.

🔍 Verify tools

git --version

node --version

npm --version

java -version

mvn -version

psql --version

We will be using VS code terminal for whole project

Note: Windows users must use Ubuntu WSL from VS code in terminal to use linux commands

Maaya Store E-commerce

Now let us understand our project by building an e-commerce project. create a folder with name of your choice. For this Demo. let us assume that we run a business called Maaya store and our business has warehouse where we sell different brands, apparels, Mobiles, electronics. Our store was never online though we posted as third party sellers in site like Amazon, flipkart. Genuinity of our products is still questioned and a dear friend of ours suggested that people trust if you have website of your own.

So we decided to make it online but before and want to build our website from scratch and as we start building it, we start learning technology behind on how the websites are created.

so, lets begin.

Note: We will be using Linux commands in this project

create a folder 

mkdir maaya-store

mkdir is a command in linux, make directory which creates folder in the path that we run this command. In linux. folders are often referred as directories.

Now in Visual Studio from Menu bar, click on Open folder and select folder that we created

select the folder that has been created.

FrontEnd

Now let us create front-end folder. make sure you are inside maaya-store directory

mkdir frontend

Now Navigate inside frontend directory

cd frontend

Here cd stands for 'Change directory'. this is used to navigate inside specific directory but if you want to come out of this directory, we use 'cd ..' , gets one step back from directory. you can think of it as back button inside folders of windows.

Now, we have installed Nodejs, let us install react.

We will be using Vite Library with React template. this is will be our frontend.

npm create vite@latest . -- --template react.

once you run this command, you will observe list of folders created in our frontend and also our application is running on localhost:5173

And also if you try to access localhost:5173

You can stop this application from Terminal, pressing Ctrl+C

Now let us install few tools that we require from npm. npm is node package manager and you have all the required tools available here

npm install axios

Axios is a JavaScript library that we will use to make HTTP requests from your frontend to a backend API.

everytime we run an install command, notice that package.json file gets update with this particular dependency

and also lets install lucide-react

npm install lucide-react

lucide react is a library that contains stylized icons and helps us making our website look better

Now lets run install command.

npm install

Here npm install command reads package from package.json and downloads those packages into node_modules folder

Now let us use test our front-end application again.

go to App.jsx file and update Function App()

function App() {
  return (
    <div>
      <h1>Maaya Store</h1>
      <p>Our e-commerce platform is coming soon.</p>
    </div>
  );
}
export default App

For this project, enable Auto Save as it is easier for us whenever we make a change in the files

and once it is done, In terminal , enter command 

npm run dev

the above command builds our application.

Now if you access localhost:5173 on your browser

Backend

Now let us build our backend application. just like we used vite library, we will be using Spring Boot for our Backend application.

Navigate to Spring Intializer

Setting	Value
Project	Maven
Language	Java
Spring Boot	Current stable
Group	com.maayastore
Artifact	backend
Name	Maaya Store Backend
Package name	com.maayastore.backend
Packaging	Jar
Java	21.

for now we will add only Spring Web dependencies

Other dependencies that we will use in project

Spring Web, Spring Data JPA, PostgreSQL Driver ,Validation, Lombok

Spring Web is used to build our REST API

Spring Data JPA is used for communicating with databases, it converts our java code to SQL queries

Lombok - to avoid repetitive code

Adding other dependency will only only cause our project to fail in build as it is not connected to database yet.

fill the details as shown in screenshot and click generate. you will have file named "backend.zip" in your downloads

Now copy or move this backend folder inside maaya-store folder that we created

Now let us test our backend java application

create a folder called controller at src/main/java/com/maayastore/backend/

and a file called HelloController.java 

Now add following contents to it

HelloController.java

package com.maayastore.backend.controller;


import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;


@RestController
public class HelloController {

    @GetMapping("/api/hello")
    public String hello() {
        return "Hello from Maaya Store Backend!";
    }
}

Now run the following command

mvn spring-boot:run

And can now try accessing http://localhost:8080/api/hello

What happened here?

by default maven runs on port 8080 and we have used GET Api here, so whenever someone tries to use this API, we return a message is what posted here.

let us verify this using postman

Open postman and click on create new request

Enter URL by entering the same URL you have kept in browser

Later in the project, we will be using postman for operations and also to check on inputs of URL

here GET operation is to fetch the list of objects available in that particular URL

think of it as you searched for "Iphone" in amazon. in and it gets all the iphones available in the website for you.

Database

Now even our backend is ready, let us create our database.

In Mac

brew services start postgresql@18

In Windows, you can simply open Postgresql and continue with following commands.

psql postgres

now let us create our database

CREATE DATABASE maaya_store_database;

and verify 

\l

and now to connect to maaya_store_database

\c maaya_store_database

to quit connection

\q

check username for our database

psql postgres -c "\du"

this helps us to maintain connection to database from backend

Connecting Database to Backend

Now go to backend folder and update postgres dependency in pom.xml

<dependency>
    <groupId>org.postgresql</groupId>
    <artifactId>postgresql</artifactId>
    <scope>runtime</scope>
</dependency>

once dependencies are updated, update application.properties

backend/src/main/resources/application.properties

spring.datasource.url=jdbc:postgresql://localhost:5432/maaya_store_database
spring.datasource.username=sagar
spring.datasource.password=

Note: You can leave password blank if nothing has been set

Now add Spring Data JPA dependency

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

add the following properties for Spring Data JPA in application properties

spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true

and your application properties file must look like

Now since we added connection, let us rebuild our backend application

mvn spring-boot:run

if the application successfully ran without errors, our backend to database connection is successful

Now as we built our application, let us now add our products in backend

create a folder called Entity at src/main/java/com/maayastore/backend/

and create a file called Product.java

package com.maayastore.backend.entity;

import jakarta.persistence.*;


import java.math.BigDecimal;


@Entity
@Table(name = "products")
public class Product {


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


    @Column(nullable = false)
    private String name;


    private String description;


    @Column(nullable = false)
    private BigDecimal price;

    private Integer stock;


    public Product() {
    }

    public Product(String name, String description, BigDecimal price, Integer stock) {
        this.name = name;
        this.description = description;
        this.price = price;
        this.stock = stock;
    }


    public Long getId() {
        return id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }


    public BigDecimal getPrice() {
        return price;
    }


    public void setPrice(BigDecimal price) {
        this.price = price;
    }


    public Integer getStock() {
        return stock;
    }


    public void setStock(Integer stock) {
        this.stock = stock;
    }
}

here in this table, we are creating Database table @Entity is a database table our Spring JPA application reads this and understands that it is a database, converts into SQL query and runs it for us

now re-build our java application

mvn spring-boot:run

Now once you re-build application, open another terminal in VS code

and now run the following commands

psql maaya_store_database

\dt

you can see products table is created for us. we were able to successfully create using Java

Configuring Controller, Repository and Service

Now let us create a repository to store all our products

create a folder called repository at src/main/java/com/maayastore/backend/

and create a file called ProductRepository.java

  
package com.maayastore.backend.repository;


  
  
import com.maayastore.backend.entity.Product;
  
import org.springframework.data.jpa.repository.JpaRepository;
  


  
public interface ProductRepository extends JpaRepository<Product, Long> {
}
  

though we did not add any queries, Spring Data JPA by default imports everything in that repository , you can think of it more like SELECT * FROM products;

create a folder called service at src/main/java/com/maayastore/backend/

and create a file called ProductService.java

package com.maayastore.backend.service;


import com.maayastore.backend.entity.Product;
import com.maayastore.backend.repository.ProductRepository;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class ProductService {

    private final ProductRepository productRepository;

    public ProductService(ProductRepository productRepository) {
        this.productRepository = productRepository;
    }


    public List<Product> getAllProducts() {
        return productRepository.findAll();
    }
}

and once service file is added, rebuild the application

mvn spring-boot:run

ProductService is a file where business logics like validate coupon, checking stock, checking product availability is done

the flow moves from controller > Service > Repository

In the start of backend, we have created HelloJava controller, now let us test our application

crate ProductController.java

package com.maayastore.backend.controller;

import com.maayastore.backend.entity.Product;
import com.maayastore.backend.service.ProductService;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("/api/products")
public class ProductController {

    private final ProductService productService;

    public ProductController(ProductService productService) {
        this.productService = productService;
    }

    @GetMapping
    public List<Product> getAllProducts() {
        return productService.getAllProducts();
    }
}

and now re-build application

ctrl+C

mvn spring-boot:run

Testing GET API

Now let us test if our java application can show our products

In another terminal, connect to database

psql maaya_store_database

now input this query

INSERT INTO products
(name, description, price, stock)
VALUES
(
    'Nike Air Max',
    'Premium running shoes',
    14999.00,
    25
);

check if the query ran successfully

Now open postman and check for localhost:8080/api/products

If you observe the code, we have designed an API in controller for GET and we called ProductService. ProductService has function called GET from ProductRepository

Spring JPA helps us to convert this Java code to SQL query to get us results we need.

Adding Images path

We were able to add our Products successfully, But we need product images to be displayed in our e-commerce store.

You can upload images inside database as well but that adds complexity to our project. In real time scenarios, Images are mostly added to s3 bucket and are referred from there. some companies choose to be in database. the image location differs from choice of company

create images directory inside backend

Now download images ( Download images of your choice)

Nike Air Max

Iphone

T-shirt

once downloaded place all the downloaded images under backend/images folder

Now let us update our product with ImagePath in entity/Product.java

Following lines to be added ( Check comments to see what lines are added while copying)

package com.maayastore.backend.entity;

import jakarta.persistence.*;

import java.math.BigDecimal;

@Entity
@Table(name = "products")
public class Product {

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

    @Column(nullable = false)
    private String name;

    private String description;

    @Column(nullable = false)
    private BigDecimal price;

    private Integer stock;

    private String imagePath; // added line

    public Product() {
    }

    public Product(String name, String description, BigDecimal price, Integer stock, String imagePath) { // added Imagepath constructor
        this.name = name;
        this.description = description;
        this.price = price;
        this.stock = stock;
        this.imagePath = imagePath;  // added line for image
    }

    public Long getId() {
        return id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public BigDecimal getPrice() {
        return price;
    }

    public void setPrice(BigDecimal price) {
        this.price = price;
    }

    public Integer getStock() {
        return stock;
    }

    public void setStock(Integer stock) {
        this.stock = stock;
    }

    public String getImagePath() { // added line for image
        return imagePath;
    }
}

We also need to configure our images now, in case if someone searches for images from our product, we want our application to know what exact path images are available

create a folder called config at src/main/java/com/maayastore/backend/

and create a file called WebConfig.java

package com.maayastore.backend.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {

        registry.addResourceHandler("/images/**")
                .addResourceLocations("file:images/");
    }
}

Now we need to update our controller so that it can update images for us .

Configuring POST API

Now in Controller, we will be adding another line for Post (Post is an API that helps us to add products) or update product data. you can think of it in a way, when you fill a login form with name, email id - it collects and stores data. later while asking to confirm it displays a Pop-up

Add below lines in ProductController.java

@PostMapping 
public Product createProduct(@RequestBody Product product) { 
    return productService.saveProduct(product);
}

As we discussed, Controller calls service but our service does not have logic for Post, which is to save data this is coming into. 

Update ProductService.java with following lines

public Product saveProduct(Product product) { 
  return productRepository.save(product); 
}

now build the application

ctrl + C

mvn spring-boot:run

once you see application is running, let us add image path to application 

open postman 

now change it to POST and enter our URL http://localhost:8080/api/products

select Body > Json and enter the following

{
  "name": "Nike Air Max",
  "description": "Premium running shoes",
  "price": 14999,
  "stock": 25,
  "imagePath": "/images/nike-air-max.jpg"
}

click send.

You dont need to worry about exact path as we configured our application to check for images in images folder

you can test it via URL http://localhost:8080/images/nike-air-max.jpg

Configuring PUT API

And if you observe the output, this was formed as id2, it means it created new data as you can verify in our database

We don´t want our application to create new file as this results in duplication of Products. we want to update data of existing product. this is where PUT operation plays a major role.

let us update for ProductController.java application again

Add  Put operation

@PutMapping("/{id}")
public Product updateProduct(@PathVariable Long id,@RequestBody Product product) {
  return productService.updateProduct(id, product);
}

Now as we know, service even needs to be updated. lets update ProductService.java

public Product updateProduct(Long id, Product product) {

        Product existingProduct = productRepository.findById(id)
                .orElseThrow(() -> new RuntimeException("Product not found"));

        existingProduct.setName(product.getName());
        existingProduct.setDescription(product.getDescription());
        existingProduct.setPrice(product.getPrice());
        existingProduct.setStock(product.getStock());
        existingProduct.setImagePath(product.getImagePath());

        return productRepository.save(existingProduct);
    }

Also since we want our values of imagepath to be changed.

Update product.java with following lines

public void setImagePath(String imagePath) {
        this.imagePath = imagePath;
    }

Now re-build our application

Ctrl+C

mvn spring-boot:run

Once you see application is running, let us now update Imagepath using postman

since we want to update id 1

In postman , select PUT Operation access URL of that particular ID http://localhost:8080/api/products/1

select Body > Json

{
  "name": "Nike Air Max",
  "description": "Premium running shoes",
  "price": 14999,
  "stock": 25,
  "imagePath": "/images/nike-air-max.jpg"
}

click send

Now verify it in Database

As you could see, our id1 is updated with image path.

let us delete our ID2 to avoid confusion, we can add DELETE operation as well but we will configure it when needed as Delete permission is something to be careful with

you can delete it manually from database

DELETE from products where id=2;

be sure to mention from where it has to be deleted.

FrontEnd to BackEnd Application Connectivity

Now let us connect our Frontend to Visualize our product in much better way.

Update frontend App.jsx with. code below

import { useEffect, useState } from "react";
import axios from "axios";

function App() {


  const [products, setProducts] = useState([]);

  useEffect(() => {

    axios
      .get("http://localhost:8080/api/products")
      .then(response => {
        setProducts(response.data);
      })
      .catch(error => {
        console.error("Error fetching products:", error);
      });


  }, []);


  return (
    <div>
      <h1>Maaya Store</h1>


      <h2>Products</h2>


      {products.map(product => (
        <div key={product.id}>


          <h3>{product.name}</h3>


          <img
            src={`http://localhost:8080${product.imagePath}`}
            alt={product.name}
            width="200"
          />


          <p>{product.description}</p>


          <p>₹{product.price}</p>


          <p>Stock: {product.stock}</p>


        </div>
      ))}
    </div>
  );
}


export default App;

once you run application

npm run dev

your frontend looks like this.

Why are our products not visible?, Our backend is running, front-end is running and we can see our products list through postman.

What exactly is happening here

On the page inside browser, Right click > Inspect 

Navigate to console

it is blocked by CORS policy "No Access- Control-Allow-Origin"

CORS - Cross Origin Resource Sharing 

it is a browser security Mechanism that stops from one webpage to another webpage

To put it simply, Our Frontend application is trying to reach out to Backend but browser (CORS ) stops saying that backend has not allowed frontend.

To overcome this issue, we will tell backend to allow frontend 

Add the following lines in WebConfig.java

@Override
public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/api/**")
            .allowedOrigins("http://localhost:5173")
            .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS");
}

Now re-start Back-end application ( You dont need to restart front-end)

Now your application would look like this

Now to add other products, you don't need to stop applications

let us use POSTMAN, open POSTMAN use POST

use url http://localhost:8080/api/products

{
  "name": "iPhone",
  "description": "Latest Apple smartphone",
  "price": 79999,
  "stock": 15,
  "imagePath": "/images/iphone.jpg"
}

also add t-shirt

{
  "name": "Classic T-Shirt",
  "description": "Comfortable cotton T-shirt",
  "price": 1499,
  "stock": 50,
  "imagePath": "/images/tshirt.jpg"
}

Now your website could show images 

✅This concludes our Workshop here.

In case needed, you can refer - Github

🔧For next workshop, you can register and explore for more at DevOps Maaya 

🚀 What We Have Learned

Throughout this hands-on workshop, we learned how the different components of a real-world full-stack application work together — from the Frontend to the Backend and finally to the Database.

1. How do CRUD Operations work?

   Understand how Create, Read, Update, and Delete (CRUD) operations are implemented using REST APIs to manage application data.

2. How does an API work?

   Understand how the frontend communicates with the backend through HTTP requests and REST API endpoints such as GET, POST, PUT, PATCH, and DELETE.

3. How do Controller → Service → Repository layers work together?

   Understand how a request flows through the Controller → Service → Repository → Database layers while building and configuring APIs.

4. How do we connect the Frontend, Backend, and Database?

   Understand how React → Spring Boot → PostgreSQL work together to build a complete full-stack application.

5. How does Spring Data JPA work?

   Understand how Java entities are mapped to database tables and how Spring Data JPA and Hibernate handle database operations by generating and executing the required SQL queries.

6. What is CORS and how do we troubleshoot it?

   Understand why browsers can block requests between the frontend and backend and how to identify and resolve CORS issues when connecting applications running on different origins.

---

💡 In One Line

We learned how a real full-stack application works from Frontend → API → Backend → Database, and how these components communicate with each other.

 

How to Add the DevOps Maaya Hands-On Workshop to Your LinkedIn & Resume

If you participated in the DevOps Maaya Free Hands-On Workshop, you can showcase the experience on both your LinkedIn profile and resume.

The most important point is:

Don't simply mention that you attended a workshop. Highlight what you actually built, implemented, tested, and learned.

---

💼 LinkedIn Profile

Participants can add the workshop to their LinkedIn profile under Licenses & Certifications, Courses, Projects, or Featured, depending on how they want to showcase their experience.

Recommended LinkedIn Description

DevOps Maaya — Free Hands-On Workshop

Participated in a hands-on application development workshop focused on building an end-to-end E-Commerce application.

Worked with:

• React.js
• Spring Boot
• REST APIs
• PostgreSQL
• Spring Data JPA / Hibernate
• Maven
• Axios

Hands-on activities included:

• Frontend development
• Backend REST API development
• Product CRUD operations
• Database integration
• Frontend-backend API integration
• CORS configuration
• API testing and troubleshooting
• Application build and development workflows

Short LinkedIn Version

DevOps Maaya — Hands-On E-Commerce Workshop

Built an end-to-end E-Commerce application using React.js, Spring Boot, REST APIs and PostgreSQL. Implemented product CRUD operations, database integration and frontend-backend API integration using Axios.

---

📄 Resume Templates

Choose the template that best matches your experience level and career goal.

👨‍🎓 Template 1 — Freshers

For freshers, the hands-on project can be included prominently under the Projects section.

Recommended Resume Format

E-Commerce Application

Technologies: React.js, Spring Boot, REST APIs, PostgreSQL, Spring Data JPA, Hibernate, Maven, Axios

• Developed a full-stack E-Commerce application using React.js for the frontend and Spring Boot for the backend.
• Implemented RESTful APIs for product management using Spring Boot and Spring Data JPA.
• Developed CRUD operations for managing product information, including product details, pricing, inventory, and images.
• Integrated PostgreSQL with the Spring Boot application for persistent data storage.
• Connected the React frontend with backend REST APIs using Axios.
• Implemented and tested GET, POST, PUT and PATCH API operations.
• Configured CORS to enable communication between the React frontend and Spring Boot backend.
• Built and tested the application across the frontend, backend, API and database layers.

Shorter Version for a One-Page Resume

E-Commerce Application | React.js, Spring Boot, PostgreSQL, REST APIs

• Built a full-stack E-Commerce application using React.js and Spring Boot.
• Implemented product CRUD operations using REST APIs, Spring Data JPA and PostgreSQL.
• Integrated frontend and backend using Axios and configured CORS for API communication.
• Worked across frontend, backend and database layers to build and test an end-to-end application.

---

👨‍💻 Template 2 — Experienced Professionals / Seniors

If you already have professional experience, don't present the workshop as your primary professional project.

Instead, add it under Professional Development, Training, Certifications & Training, or Hands-on Learning.

Recommended Resume Format

DevOps Maaya — Hands-On E-Commerce & Application Development Workshop

Technologies: React.js, Spring Boot, REST APIs, PostgreSQL, Spring Data JPA, Hibernate, Maven, Axios

• Gained hands-on experience building an end-to-end application spanning frontend, backend, API and database layers.
• Worked with React.js, Spring Boot, REST APIs and PostgreSQL to understand modern application development workflows.
• Implemented and tested REST APIs supporting product CRUD operations.
• Integrated frontend and backend services using Axios and configured CORS for cross-origin communication.
• Applied practical troubleshooting across application, API, database and frontend integration layers.
• Strengthened understanding of the application lifecycle from development through deployment concepts.

Short Version

DevOps Maaya — Hands-On Workshop

• Built and integrated a full-stack E-Commerce application using React.js, Spring Boot and PostgreSQL.
• Implemented REST APIs and CRUD operations using Spring Data JPA/Hibernate.
• Gained practical experience with frontend-backend integration, API troubleshooting and database connectivity.

---

🔄 Template 3 — Career Switchers

If you are moving from one technology or domain to another, the workshop can demonstrate your hands-on transition into the new technology stack.

Career Transition into DevOps

DevOps Maaya — Hands-On Application & DevOps Workshop

• Gained hands-on experience working with an end-to-end application consisting of React.js frontend, Spring Boot backend and PostgreSQL database.
• Built and tested REST APIs and worked with application build and dependency management using Maven.
• Developed practical understanding of how application components interact across frontend, backend and database layers.
• Troubleshot application integration issues involving APIs, CORS, database connectivity and application configuration.
• Strengthened understanding of the application lifecycle and the relationship between software development and DevOps practices.

Short Version

DevOps Maaya — Hands-On Workshop

• Worked on an end-to-end E-Commerce application using React.js, Spring Boot, PostgreSQL and REST APIs.
• Gained practical understanding of application architecture, API integration, database connectivity and build workflows.
• Applied troubleshooting skills across multiple application layers.

---

☕ Template 4 — Java / Spring Boot Professionals

If your existing profile is focused on Java or Spring Boot, emphasize the backend work.

E-Commerce Application — Hands-On Project

Technologies: Java, Spring Boot, Spring Data JPA, Hibernate, PostgreSQL, REST APIs, Maven

• Developed RESTful APIs using Spring Boot for E-Commerce product management.
• Implemented CRUD functionality using Spring Data JPA and Hibernate.
• Integrated PostgreSQL for persistent product data storage.
• Implemented API endpoints for retrieving, creating and updating products.
• Worked with entity, repository, service and controller layers in a Spring Boot application.
• Built and packaged the application using Maven.
• Troubleshot API, database and application configuration issues during development.

---

⚙️ Template 5 — DevOps Professionals

If you are already working in DevOps, don't claim that the workshop made you a DevOps engineer. Instead, highlight the application-development knowledge you gained.

DevOps Maaya — Hands-On Application & DevOps Workshop

• Worked with an end-to-end application consisting of frontend, backend and database components.
• Gained practical understanding of application dependencies, build processes and backend API integration.
• Built and packaged a Spring Boot application using Maven.
• Worked with PostgreSQL-backed application services and REST APIs.
• Troubleshot application-level issues involving APIs, CORS, database connectivity and configuration.
• Strengthened understanding of how application development workflows connect with DevOps and deployment processes.

---

🧪 Template 6 — QA / SDET Professionals

E-Commerce Application — Hands-On Project

Technologies: React.js, Spring Boot, REST APIs, PostgreSQL, Axios

• Developed and tested REST APIs supporting product CRUD operations.
• Validated frontend-to-backend API integration using HTTP-based REST endpoints.
• Tested GET, POST, PUT and PATCH operations for product management.
• Verified database persistence using PostgreSQL.
• Troubleshot API integration, CORS and backend application issues.
• Worked across frontend, backend and database layers to understand end-to-end application behavior.

---

🏗️ Template 7 — Tech Lead / Architect / Senior Engineer

Hands-On Full-Stack Application Development

• Worked with an end-to-end application architecture integrating React.js, Spring Boot REST APIs and PostgreSQL.
• Applied practical understanding of interactions between presentation, service, persistence and database layers.
• Implemented product-management APIs and database persistence using Spring Data JPA/Hibernate.
• Investigated integration issues across API, frontend and database layers.
• Strengthened practical understanding of application architecture and development-to-deployment workflows.

---

📄 Template 8 — Very Short Resume Entry

DevOps Maaya — Hands-On Workshop

Built an end-to-end E-Commerce application using React.js, Spring Boot, REST APIs and PostgreSQL, implementing product CRUD operations and frontend-backend integration using Axios.

---

⭐ Template 9 — Fresher With No Previous Projects

E-Commerce Web Application

React.js | Spring Boot | PostgreSQL | REST APIs | Axios | Maven

• Developed an end-to-end E-Commerce application from frontend to database.
• Created a React.js frontend for displaying and managing products.
• Developed Spring Boot REST APIs for product management.
• Implemented product CRUD operations using Spring Data JPA and Hibernate.
• Integrated PostgreSQL for storing product information.
• Connected frontend APIs using Axios.
• Configured CORS for frontend-backend communication.
• Tested and debugged application, API and database integration issues.

---

⚠️ Important: Don't Add Technologies You Didn't Use

Your resume should reflect what you actually worked on.

For example, don't add:

• Docker
• Kubernetes
• Jenkins
• AWS
• Azure
• Terraform
• GitHub Actions
• CI/CD
• Ansible

unless you actually used them during the workshop.

A smaller list of technologies with genuine hands-on experience is much stronger than a large list of technologies you only heard about.

---

💡 What Should You Use Based on Your Experience?

Profile	Best Resume Section	Main Focus
Fresher	Projects	What you built
Student	Academic/Personal Projects	Hands-on implementation
Junior Developer	Projects / Experience	Technical implementation
Java Developer	Professional Development / Project	Spring Boot & APIs
DevOps Engineer	Professional Development	Application lifecycle & deployment
QA / SDET	Projects / Professional Development	API & integration testing
Senior Developer	Professional Development	Architecture & integration
Tech Lead	Professional Development	Architecture & system understanding
Career Switcher	Professional Development	Hands-on transition

---

🚀 Best Resume Formula

When writing your resume, try to follow this structure:

Action + Technology + What You Built + Result/Purpose

Instead of:

❌ "Learned Spring Boot."

Write:

✅ "Developed REST APIs using Spring Boot for product management."

Instead of:

❌ "Learned PostgreSQL."

Write:

✅ "Integrated PostgreSQL with Spring Data JPA for persistent product data storage."

Instead of:

❌ "Attended a DevOps workshop."

Write:

✅ "Built and tested an end-to-end E-Commerce application spanning frontend, backend, API and database layers."

---

📝 Final Recommendation

For Freshers

Use: Project → Technologies → 3–5 strong implementation bullets

For Experienced Professionals

Use: Professional Development / Training → Technologies → 2–4 bullets showing practical upskilling

For Career Switchers

Use: Hands-on Project → Technologies → bullets that demonstrate relevant skills for the target role

The goal is not to make the resume say:

"I attended a workshop."

The goal is to demonstrate:

"I have hands-on experience working with these technologies and building a real application."

Important: Only include claims that accurately reflect the work you personally completed during the workshop.