DEV Community: Roselle Tabuena

From Zero to SAA-C03 Certified: How I Passed the AWS Certification on My First Attempt

Roselle Tabuena — Sat, 27 Jul 2024 11:55:40 +0000

When I started preparing for the SAA-C03 certification, I had zero to minimal AWS experience and often doubted if I could pass it without the recommended year of experience. Despite these doubts, I managed to pass the exam on my first attempt.

To give you some context, here’s a brief background about me:

I work full-time with a 9-hour shift.
I’ve been a developer for nearly 3 years, with minimal AWS experience.
My current role focuses mainly on front-end development.

Preparation:

Spent 6 months preparing, with plenty of breaks in between.

Resources:

A Cloud Guru - Provided by my company, this platform was where I did most of my hands-on practice and experiments in the Playground. I took their SAA course there but didn't take it seriously, as I was primarily using Stéphane Maarek’s Ultimate AWS SAA-C03 course.
Ultimate AWS Certified Solutions Architect Associate SAA-C03 -I think this course is sufficient to pass the SAA exam, but for a deeper dive into AWS, I recommend Adrian Cantrill's SAA-C03 course.
Tutorials Dojo - This practice exam is a must! Their review mode works like a charm. If I hadn’t taken their exam, I’m sure I would have failed.

Study Routine and Strategies:

Taking notes is not for me. Instead, I focused on understanding the concepts and doing hands-on practice. While this approach helped me grasp the material, it sometimes led to challenges remembering specific features of services since I'm not taking notes.

My study routine was flexible due to my unpredictable schedule. I didn’t force myself to study if I wasn’t in the mood, which helped keep stress levels low. However, 1 week before the exam, I began to doubt myself and I started to read a lot of others' experience in Reddit in SAA exam. I think I lost a lot of time by just worrying.

Exam Day Experience:

I chose to take the exam at a testing center to avoid the headaches potential issues with online testing, as some exam takers have had negative experiences with online exams.

I was glad that two dogs greeted me when I arrived at the testing center. I was the only one taking the exam. I filled out the form and then surrendered all my belongings, which were placed in a locker.

While others said that the questions were similar to those in Tutorials Dojo, but I found them less wordy and easier. Still, I struggled with questions about services I wasn’t familiar with. I marked 10 questions for review and I think there are total of 15 questions that I'm unfamiliar with.

I focused too much in harder topics like VPC, Security and Data Migration that I end up forgetting other features of services and lowering less than my practice exams.

My exam results:

Average in Practice Exam Review Mode is 80%
Average in Practice Exam Timed Mode is 85%-90%
Actual score is 776/1000

With the SAA-C03 certification behind me, I’m excited to dive into hands-on projects and put my AWS knowledge to practical use. I’m grateful for the support and resources that helped me along the way.

Building CRUD with ES6 JavaScript and Local Storage

Roselle Tabuena — Sun, 17 Mar 2024 04:38:58 +0000

In this tutorial, we'll learn how to create a basic CRUD application using JavaScript ES6 and Local Storage. By the end of this guide, you'll know how to implement CRUD with local storage in your own projects. Let's get code together.

Prerequisites:

Basic knowledge in the following:
HTML
Javascript
CSS

Set up

File Structure:

Set up your file first with your choosen IDE.

index.css
index.html 
index.js

Inital Code

CSS

Copy this CSS code into your index.css.

HTML

Copy this index.html into your index.css.

JavaScript

We're utilizing the dialog as our modal, so we don't have to code the modal manually. Simply copy the code below into your index.js.

const dialog = document.querySelector('dialog');
const showButton = document.querySelector('#btn-add');
const closeButton = document.querySelector('#btn-close');

showButton.addEventListener('click', () => {
  dialog.showModal();
});

closeButton.addEventListener('click', () => {
  dialog.close();
});

Exploring our Initial App:

Since our focus is to build a small application using JavaScript and localStorage as our database, we'll skip the HTML part and dive directly into explaining how we will build the functionality.

Let's explore our app first. Click the "Add Student" and see the form with fields name, email and course.

Now, let's move on to the table display. You'll notice the following columns:

ID: Unique identification of the student data
Name, Email, Course: Personal Info of the student
Actions: Perform Edit and Delete record in this columns

Since you already know what our app. Let's start to code.

START

Copy this code first; we'll use it later. Make sure it's positioned below your main code for better organization.

/* Modal dialog code */

/* put your code here... */


// utilities 
function populateTable() {
  let tableRow = '';
  getStudentList().forEach((student) => {
    tableRow += tableRowHTML(student);
  });

  table.innerHTML = tableRow;
}

const generateRandomId = () => Math.floor(Math.random() * 99999);

const formDataToObject = (formData) => {
  const object = {};
  formData.forEach((value, key) => {
    object[key] = value;
  });
  return object;
};

function resetForm() {
  document.querySelector('#student-id').value = '';
  studentForm.reset();
}

function tableRowHTML(student) {
  return `<tr id='std_${student.id}'>
            <td>${student.id}</td>
            <td>${student.name}</td>
            <td>${student.email}</td>
            <td>${student.course}</td>
            <td class="actions">
            <button student-id="${student.id}" action-type="edit" class="edit-btn">Edit</button>
            <button student-id="${student.id}" action-type="delete" class="delete-btn">Delete</button>
            </td>
        </tr>`;
}

function getStudentList() {
  return JSON.parse(localStorage.getItem('studentList')) || [];
}

Declarations:

// dialog code 

const studentForm = document.getElementById('student-form');
const table = document.querySelector('table tbody');

Getting the studentForm and table from our DOM, we'll add event listeners later.

CREATE

Add Form Function

const addForm = (formData) => {
  formData.append('id', generateRandomId());

  const student = formDataToObject(formData);
  studentList.push(student);

  localStorage.setItem('studentList', JSON.stringify(studentList));

  const newRow = table.insertRow(-1);

  newRow.id = 'std_' + student.id;
  newRow.innerHTML = tableRowHTML(student);
};

The function above, addForm, adds new student data to the application. It generates a random ID for the student, appends it to the form data, and converts the form data into a student object. The student object is then added to the studentList array, which is stored in local storage. Additionally, a new row is inserted into the HTML table to display the new student's information.

FORM SUBMISSION:
addSubmit function to the form.

studentForm.addEventListener('submit', (event) => {
  event.preventDefault();

  const formData = new FormData(studentForm);

  addForm(formData);

  resetForm();
  dialog.close();
});

To test if it's working, go to the localStorage in the inspect tab under the "Application" section, and check if the data has been added successfully. If it's working, proceed to the next step.

READ

We have a function called populateTable. Its purpose is to display the existing data in the localStorage during the first load of our application. It retrieves data from the getStudentList() function.

Call populateTable() after all the our variable declarations.

const studentForm = document.getElementById('student-form');
const table = document.querySelector('table tbody');

populateTable(); // add this code

This will display the student info on the first load of the application if there's an existing data.

UPDATE

Displaying Student Information in a Modal for Editing.

table.addEventListener('click', (event) => {
  const target = event.target;
  const id = target.getAttribute('student-id');

  if (target.classList.contains('edit-btn')) {
    dialog.showModal();

    const student = getStudentList().find((student) => id == student.id);

    document.getElementById('student-id').value = student.id;
    document.getElementById('name').value = student.name;
    document.getElementById('email').value = student.email;
    document.getElementById('course').value = student.course;
  }
});

The code snippet above enables editing of student details directly within the table. When a user clicks an edit button in a row, it triggers a dialog displaying the student's information fetched from the getStudentList() function based on the student ID. The data retrieved is then utilized to update the input values for each field using document.getElementById('input-id').

EDIT

const editForm = (formData) => {
  const studentForm = formDataToObject(formData);
  const studentList = getStudentList();

  const studentIndex = getStudentList().findIndex(
    (student) => studentForm.id == student.id
  );

  if (studentIndex == -1) return;

  studentList[studentIndex] = {
    ...studentList[studentIndex],
    ...studentForm,
  };

  localStorage.setItem('studentList', JSON.stringify(studentList));

  document.querySelector('#std_' + studentForm.id).innerHTML =
    tableRowHTML(studentForm);
};

The editForm function edits student details by updating the student list with new form data and saving it back to local storage. It first converts form data to an object, retrieves the student list, finds the index of the student being edited, updates their information using tableRowHTML, and then updates the corresponding row in the HTML table with the new data.

FORM SUBMISSION:

studentForm.addEventListener('submit', (event) => {
  event.preventDefault();

  const formData = new FormData(studentForm);

  const isEditMode = formData.get('id') != ''; 

  if (isEditMode) {
    editForm(formData);
  } else {
    addForm(formData);
  }

  resetForm();
  dialog.close();
});

We've improved our form to handle both updating and adding student data using just one form. Now, if the form has an id field, it's for editing, so we call the editForm function. Otherwise, if there's no id field, it's for adding new data, so we call the addForm function. This tweak makes it easier for users to manage student information in our application.

DELETE

table.addEventListener('click', (event) => {
  const target = event.target;
  const id = target.getAttribute('student-id');

  if (target.classList.contains('edit-btn')) {... code for edit ...}
  } else if (target.classList.contains('delete-btn')) {
    const row = target.parentNode.parentNode;
    const newStudentList = getStudentList().filter(
      (student) => id != student.id
    );

    document.querySelector('table').deleteRow(row.rowIndex);

    localStorage.setItem('studentList', JSON.stringify(newStudentList));
});

Let's modify our code for table.addEventListener(). We've added a new condition for the delete button if it's triggered. Then, we'll retrieve the row of the table using target.parentNode.parentNode. Afterward, we'll use filter to return a new list without the student ID of the selected student item in the table. Following this, we'll delete the selected row using deleteRow. Lastly, we'll update the new localStorage with our new student list. This functionality allows our users to delete user records directly from the table interface while keeping the data synchronized.

END OF CODE

That's all for the CRUD functionality. I hope you found this tutorial helpful. If you encounter any issues, feel free to refer to our source code for comparison. I also include the demo link below so you can test the application yourself.

CLICK HERE FOR DEMO
INITAL CODE
CRUD SOURCE CODE

Thank you for reading my blog.

If you have any suggestions or corrections, please leave a comment below. I'll gladly respond and consider your input.

How to Implement Modal using React Router v6

Roselle Tabuena — Sat, 27 Jan 2024 17:16:05 +0000

Hello! I've been searching how to implement Modal in React Router v6, but unfortunately, the results that I found didn't match my needs. The tutorial blogs that I came across were using JSX Routes and I'm using createBrowserRouter to manage my history stack. After some searching and trying to make it work, I finally got it to work. 🙃

If you want to achieve the sample GIF above but in React V6 and you're using createBrowserRouter, then this tutorial is for you ✨

Here's how I did it. 😄

The tutorial below will be just focusing on implementing modal it doesn't have navbar like in the image above.

START

First things first, You need to create react app and install the react-router-dom and run npm install to start.

Let's start with the folder structure. Simply copy the layout of my files and folders provided below:

/src
  /components
   Modal.js
  /data
   dummy-data.js
  /pages
   Gallery.jsx
  App.jsx

dummy-data.js

export const images = [
  {
    id: 1,
    thumbnail:
      'https://images.unsplash.com/photo-1682685797886-79020b7462a4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHx8',
    fullSize:
      'https://images.unsplash.com/photo-1682685797886-79020b7462a4?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    details: 'Details about Image 1',
  },
  {
    id: 2,
    fullSize:
      'https://images.unsplash.com/photo-1706028024882-0b972506d02d?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    thumbnail:
      'https://images.unsplash.com/photo-1706028024882-0b972506d02d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHx8',
    details: 'Details about Image 2',
  },
];

dummy-data.jscontains a array object that will be use as our dummy data. The id will be a unique identifier for our image it will be use later to get the image details.

Modal.jsx

import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { images } from '../data/dummy-data';

const Modal = () => {
  const { id: imageId } = useParams();
  const navigate = useNavigate();

  const [imageData, setImageData] = useState(null);

  useEffect(() => {
    const image = images.find(({ id }) => imageId == id);

    setImageData(image);
  }, [imageId]);

  const handleOnClose = () => {
    navigate('/');
  };

  return (
    <>
      {imageData && (
        <div className="modal">
          <div className="modal-content">
            <img src={imageData.fullSize} alt="Full Size" />
            <p>{imageData.details}</p>
            <button onClick={handleOnClose}>Close</button>
          </div>
        </div>
      )}
    </>
  );
};

export default Modal;

Modal.jsx is a functional component will be used to as our pop up modal for viewing details of specific image.

Variable Declarations:

imageId: extracts the id from the route using useParams() This is the unique identifier for the image being displayed in the modal.

navigate Provides a function to navigate between pages using useNavigate().

State Management:

imageData represents the state for holding information about the selected image.

useEffect is used to fetch the details of the image when the component mounts or when the imageId changes. It finds the corresponsing image in the images array object (imported from the dummy-data).

Close Modal Function:

handleOnClose defines a function to clode the modal by navigating back to the root path ('/) using the navigatefunction.

Render Modal:

The component renders a modal only if imageData is truthy (i.e., an image is found). Inside the modal, it displays the full-size image, additional details, and close button.

Gallery.jsx

import React from 'react';
import { useNavigate } from 'react-router-dom';
import { images } from '../data/dummy-data';
import Modal from '../components/Modal';

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

  const viewImage = (image) => {
    const id = image.id;
    navigate('/view/' + id);
  };

  return (
    <div className="gallery">
      {images.map((image, index) => (
        <button
          key={image.id}
          className="gallery-item"
          onClick={() => viewImage(image)}
        >
          <img src={image.thumbnail} alt={`Thumbnail ${index + 1}`} />
        </button>
      ))}

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

export default Gallery;

Gallery.jsx is responsible for rendering a gallery of images with thumbnail previews. Inside the component, it maps over the images array object from dummy data. Each button has a click event handler (onClick) that calls the viewImage function with the corresponding image.

The viewImage function takes an image object parameter based on the thumbnail click, and it extracts the id property from the image object. It then navigates to the route view/:id.

The Modal component is rendered at the end of the Gallery component. It is included to provide the modal functionality for viewing detailed information about a selected image.

App.jsx

import React from 'react';
import Gallery from './pages/gallery';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Gallery />,
    children: [
      {
        path: 'view/:id',
        element: null,
      },
    ],
  },
]);

function App() {
  return (
    <React.StrictMode>
      <RouterProvider router={router} />
    </React.StrictMode>
  );
}

export default App;

createBrowserRouter is the recommended router for all React Router web projects. It uses DOM History API to update the URL and manage the history stack.

The main router for the code above is specified with path: '/' and is set to render the Gallerycomponent.

Additionally, there's a child route defines with path: 'view/:id' but the element associated with it is set to null.

The RouterProvider component is used to provide the router instance (router) to the entire React component tree. This is crucial for enabling the routing functionality.

End of Code.

Explanation Summary:

We have an index parent route and it has children route view/:id that renders null element. If we navigate to this routes, the parent element will retain its current position. The reason for this is that we don't have an <Outlet /> to render the children of the parent route. So, it will just stay at the location where we trigger the navigation. The reason why the Modal is showing because we have a useEffect that triggers when the gallery/:id changes. It will only trigger if we click the thumbnails that triggers to update the URL.

That's all! I hope this was helpful. If you have any questions, feel free to ask. Thanks for reading!

LIVE DEMO
Source Code With Navbar
Source Code Modal Only