Recently, I had the privileged to be part of a team that built a login system tailored for the Swedish market that allows users to authenticate with various methods, including Sweden’s BankID, email, or a Swedish phone number. BankID is a digital identification solution widely used in Sweden to securely verify individuals for online services. This system provides flexible options for users who want to access services with their existing digital identity, whether through BankID for added security or traditional email and phone verification for convenience.

The project was originally coded using React class components, but for this blog post, I'll share how I would approach it using functional components to streamline and modernize the codebase. To create this functionality, I implemented an input validation component that debounces user input, checks if a user exists, and adjusts the form's options dynamically based on the user's registration status. 


```javascript
import React, { useReducer, useCallback } from 'react';

const initialState = {
    formData: {},
    isRegisteredUser: false,
    isBankIDEnabled: false,
    showError: false,
};

const reducer = (state, action) => {
    switch (action.type) {
        case 'UPDATE_FORM':
            return { ...state, formData: { ...state.formData, ...action.payload } };
        case 'SET_USER_STATUS':
            return { ...state, ...action.payload };
        case 'TOGGLE_ERROR':
            return { ...state, showError: action.payload };
        default:
            return state;
    }
};

const BankIDLogin = () => {
    const [state, dispatch] = useReducer(reducer, initialState);

    const handleInput = (value) => {
        dispatch({ type: 'UPDATE_FORM', payload: { emailOrPhone: value } });
        checkUserExists(value);
    };

    const checkUserExists = useCallback((value) => {
        clearTimeout(state.timeoutId);
        const newTimeout = setTimeout(async () => {
            try {
                const resp = await userExists(value);
                if (!resp.ok) throw new Error();
                const { exists, bankidEnabled } = await resp.json();
                dispatch({ type: 'SET_USER_STATUS', payload: { isRegisteredUser: exists, isBankIDEnabled: bankidEnabled } });
            } catch {
                dispatch({ type: 'TOGGLE_ERROR', payload: true });
            }
        }, 200);
        dispatch({ type: 'SET_TIMEOUT', payload: newTimeout });
    }, [state.timeoutId]);

```

### What the code does:

**A. Initial State and Reducer Function:**
The component uses initialState to define the starting values for form data and flags that track the user’s registration status, BankID availability, and any errors.

The reducer function handles different actions to update the component’s state. These actions include updating form data, setting the user’s registration status, and toggling the error state.

**B. handleInput Function:**
This function is triggered whenever the user types into the input field.

It updates formData in the state with the user's current input, which could be an email or a phone number.
It then calls the checkUserExists function to verify if the user exists and if BankID login is enabled.

**C. checkUserExists Function:**
This function uses debouncing to avoid making an API call every time the user types; it waits 200ms after the user stops typing before proceeding.

It calls an asynchronous function, userExists(value), to check if a user with the given email or phone number is already registered. This function also checks if the BankID option is available.
The result of this API call updates the isRegisteredUser and isBankIDEnabled flags in the state. If there’s an error (e.g., network issue), it sets showError to true, prompting the component to display an error message.

### Challenges:
Since this is a large-scale project with diverse requirements, one of the challenges that I faced is breaking down the project into User Stories. Below are some of the User Stories that I have written down:

User Story 1: As a user, I want to log in with my phone number so that I can quickly access my account without having to remember an email address.

User Story 2: As a user, I want to be able to log in with my BankID for a secure and reliable login experience.

User Story 3: As a returning user with multiple registered phone numbers, I want a way to easily confirm which account to access, so that I can avoid confusion and enter the correct details.

### Conclusion:
In conclusion, despite the tight deadline and the complexity of managing multiple login flows, our team successfully refactored the code and launched the login feature on schedule. This new system provides users with seamless access to their accounts using BankID, email, or phone, which significantly improves the overall user experience by giving them secure and flexible login options.

The streamlined login process is a major benefit to the company, as it makes onboarding much smoother and helps reduce friction for both new and returning users. The added flexibility is especially valuable in the Swedish market, where BankID is a trusted and widely-used authentication method. By implementing a clear, user-friendly, and efficient login flow, my contributions have not only enhanced user satisfaction but also strengthened the foundation for further growth, allowing more users to log in quickly and securely.

___________________________________________________________


### Also on codewithkatyrosli.com

**Creating Responsive and Customizable Components in Puck Editor**,
2024-09-29

Today I would like to share my experience working part of the team integrating Puck Editor, a powerful tool that allows editors to build and create web pages. I’ve contributed to developing several key components aimed at enhancing both user experience and business goals. One of the components I created is the CustomerTestimonials section, which allows website visitors to easily read customer feedback. This component has been essential in building trust and credibility for businesses, as testimonials serve as a powerful tool to showcase social proof.

[**Read More**](https://www.codewithkatyrosli.com/blog/creating-responsive-and-customizable-components-in-puck-editor)




Recently, I had the privileged to be part of a team that built a login system tailored for the Swedish market that allows users to authenticate with various methods, including Sweden’s BankID, email, or a Swedish phone number. BankID is a digital identification solution widely used in Sweden to securely verify individuals for online services. 

Building a Flexible Login System with BankID, Email, and Phone in React

Today I would like to share my experience working part of the team integrating Puck Editor, a powerful tool that allows editors to build and create web pages. I’ve contributed to developing several key components aimed at enhancing both user experience and business goals. One of the components I created is the CustomerTestimonials section, which allows website visitors to easily read customer feedback. This component has been essential in building trust and credibility for businesses, as testimonials serve as a powerful tool to showcase social proof.

In addition to the testimonials, I’ve customized fields to make the editing experience more intuitive for those creating web pages. A specific example is the Color Selector, which allows editors to pick from a predefined set of brand-specific colors. By implementing this feature, we ensure design consistency across the website while offering flexibility to the editors.

###### Here’s an example of the code that illustrates how I approached creating a customized component for selecting colors:

```javascript
const config = {
  components: {
    ColorSelector: {
      resolveFields: async (data, { changed, lastFields }) => {
        // Don't call the API unless `theme` has changed
        if (!changed.theme) return lastFields;

        // Fetch color options based on the selected theme
        const options = await getOptions(data.theme);

        return {
          theme: {
            type: "radio",
            options: [
              { label: "Warm Tones", value: "warm" },
              { label: "Cool Tones", value: "cool" },
            ],
          },
          color: {
            type: "select",
            options: [
              { label: "Orange Color", value: "orange" },
              { label: "Grey Color", value: "grey" },
              { label: "Dark Brown Color", value: "dark-brown" },
            ],
          },
        };
      },
      render: ({ color }) => <div style={{ backgroundColor: color }}>{color}</div>,
    },
  },
};
```

In this example, I’ve implemented an asynchronous API call to dynamically populate color options based on the selected theme. This ensures that editors only see the colors relevant to their chosen theme, providing them with a tailored and streamlined editing experience.

### Challenges:
One of challenges that I have faced while buidling these components is to ensure that they are fully responsive, adapting seamlessly across desktop, tablet, and mobile devices. It’s crucial that these components maintain their functionality and appearance regardless of the screen size. This involves more than just making elements resize appropriately—it also requires careful consideration of customizable features such as colors, the length of content, text size, and fonts.

For example, when designing the CustomerTestimonials component or the Color Selector, it was important to ensure that even when viewed on smaller screens, no content is lost or truncated, and the overall experience remains user-friendly. I've achieved this by implementing flexible layouts and using CSS media queries to adjust the design as needed for different devices.

### Conclusion:
In conclusion, working on Puck Editor has been a great learning experience, offering me the chance to explore new front-end techniques and patterns while building tools that empower content creators. The experience of building and integrating these components has been incredibly rewarding. As a front-end-heavy developer, I enjoy seeing how a single component, such as the ColorSelector, can be used in multiple ways across different webpages. It’s fascinating to witness how these contributions enhance both the editor's workflow and the overall design of a website.

___________________________________________________________


### Also on codewithkatyrosli.com

**Building My First AI Note-Taking Assistant: A Journey with Next.js, TypeScript, and OpenAI**,
2024-07-20

Today, I'm thrilled to share my latest personal project with you all: an AI-powered note-taking assistant! This project marks my first venture into the world of artificial intelligence, and I couldn’t be more excited about the outcome. I used Next.js for the framework, TypeScript for the language, Drizzle for database management, OpenAI for the AI model, Firebase for image storage, and deployed the entire full-stack application on Vercel. It’s been an incredible journey, and I’m delighted to walk you through the process and features of this innovative app.

[**Read More**](https://www.codewithkatyrosli.com/blog/building-my-first-ai-note-taking-assistant-a-journey-with-next-js-type-script-and-open-ai)

Today I would like to share my experience working part of the team integrating Puck Editor, a powerful tool that allows editors to build and create web pages. I’ve contributed to developing several key components aimed at enhancing both user experience and business goals.

Creating Responsive and Customizable Components in Puck Editor

Today, I'm thrilled to share my latest personal project with you all: an AI-powered note-taking assistant! This project marks my first venture into the world of artificial intelligence, and I couldn’t be more excited about the outcome. I used Next.js for the framework, TypeScript for the language, Drizzle for database management, OpenAI for the AI model, Firebase for image storage, and deployed the entire full-stack application on Vercel. It’s been an incredible journey, and I’m delighted to walk you through the process and features of this innovative app.


## Project Overview:

### Authentication with Clerk Auth
To ensure a secure and personalized user experience, I integrated Clerk Auth for user authentication. Upon signing in, users are redirected to their personalized dashboard where they can manage their notes.

### Creating a New Note
Users can easily create a new note by entering a title. The title is sent to OpenAI, which generates a matching image that is stored on Firebase and displayed alongside the note. This makes the note-taking experience more visually appealing and engaging.

### AI-Powered Autocomplete
As users type the content of their notes, they can click the submit button to let the AI autocomplete their sentences. This feature leverages the power of OpenAI to enhance productivity and creativity, making note-taking faster and more intuitive.

### CRUD Functionality
The application supports full CRUD (Create, Read, Update, Delete) operations. Users can create new notes, read and update existing ones, and delete notes they no longer need. This functionality is implemented using REST endpoints, ensuring a seamless and efficient user experience.

### Deployment on Vercel
Deploying the project on Vercel was a breeze. Vercel’s robust platform allowed me to focus on development without worrying about deployment complexities. The integration with Next.js is seamless, making it the perfect choice for this project.

### Challenges and Learnings
Working on this project was a great learning experience. Integrating various technologies and ensuring they work harmoniously was both challenging and rewarding. 

- Here are a few key takeaways:
1. Integration with OpenAI: Getting the AI model to generate relevant content and images was fascinating. It required fine-tuning and testing to ensure high-quality results.
2. Database Management with Drizzle: Managing the database operations efficiently was crucial for the app’s performance. Drizzle provided a smooth and reliable way to handle data.
3. Deploying on Vercel: Understanding the deployment process and optimizing the app for production was an invaluable experience.

### A Note on OpenAI Billing
One thing to keep in mind is that the OpenAI API is not free. If you encounter any issues creating a new note, it might be because I need to renew my billing plan. I’m committed to maintaining the app’s functionality, but there might be occasional downtimes due to billing constraints.

To see the AI note-taking assistant in action, check out this video. It provides a comprehensive overview of the app’s features and functionality.

### Conclusion
In conclusion, creating this AI note-taking assistant has been an incredibly rewarding journey. I’m proud of what I’ve accomplished and excited to see how users will benefit from this tool. [Click here to view the website](https://ai-note-taking-assistant-nine.vercel.app/). [Click here to view the Github for this project](https://github.com/KatyRosli/AI-note-taking-assistant). To see the AI note-taking assistant in action, check out the video below.


Today, I'm thrilled to share my latest personal project with you all: an AI-powered note-taking assistant! This project marks my first venture into the world of artificial intelligence, and I couldn’t be more excited about the outcome.

AI note taking assistant. Created using NextJS, Typescript, Drizzle, OpenAI, Vercel.

Notes with AI

Building My First AI Note-Taking Assistant: A Journey with Next.js, TypeScript, and OpenAI

In my current workplace, I have had the privilege of working alongside Grace Kaberere for a year now. Grace, a consultant and a Software Engineer from Kenya, works remotely with our team. Throughout this period, Grace has consistently demonstrated an exemplary attitude towards learning and sharing knowledge, making her a role model for all of us. Her commitment to best practices in both frontend and backend development is truly inspiring. If you’re interested in connecting with Grace, you can find her on [LinkedIn here](https://www.linkedin.com/in/grace-kaberere-21512b167/).

Today, I am excited to share an interview with Grace where she offers valuable tips and tricks for coding with Django (Python). Her insights are designed to promote efficient development practices and inspire aspiring developers who are beginning their careers as Full Stack or Backend Developers.

### Q1: Introduction to Django
What are the key features of Django that set it apart from other web frameworks?

Grace: Django stands out for its simplicity and robustness, making it easy for developers to learn and use. Its built-in admin panel streamlines the process of creating and managing content. Additionally, Django's ORM (Object-Relational Mapping) simplifies database interactions, reducing the need for repetitive SQL queries.

### Q2: Best Practices and Resources
What best practices would you recommend for writing efficient Django code?

Grace: To write efficient Django code, adhere to best practices such as optimizing database queries, minimizing the use of expensive operations in views, and caching frequently accessed data. Employing Django's built-in caching mechanisms and optimizing templates can also improve performance significantly.

### Q3: Django Ecosystem
What are some must-know packages or libraries in the Django ecosystem?

Grace: Some essential packages in the Django ecosystem include Django REST Framework for building RESTful APIs, Celery for asynchronous task processing, Django Channels for real-time web applications, and Django Allauth for user authentication and registration.

### Q4: Personal Experience
What was your own journey like learning Django?

Grace: My journey with Django began with an online Udemy course, which provided a solid foundation. I then embarked on personal projects to apply what I learned, gradually tackling more complex challenges. One valuable lesson was the importance of diving deep into project tasks to understand the codebase thoroughly, enhancing my knowledge and skills.

### Q5: Advice for Aspiring Developers
What advice would you give to someone who is inspired to be a Full Stack Developer?

Grace: My advice is to immerse yourself in Django's documentation and best practices. Practice regularly by taking on projects, both personal and professional, to reinforce your skills. Don't shy away from challenges; instead, embrace them as opportunities for growth. And always remember, learning to code is a continuous journey, so stay curious and keep exploring new concepts and techniques.

### Conclusion:
In conclusion, Grace's insights highlight the importance of continuous learning, sharing knowledge, and maintaining strong development ethics. Her journey and advice underscore the value of perseverance, curiosity, and embracing challenges. **As Developers, we should strive to adopt these principles to grow both professionally and personally.** Let Grace's experience inspire you to push your boundaries and contribute to the ever-evolving world of technology. This mindset will not only make you an efficient Developer but also a valuable and ethical contributor to the Developer community.

___________________________________________________________

### Also on codewithkatyrosli.com

**Building My First AI Note-Taking Assistant: A Journey with Next.js, TypeScript, and OpenAI**,
2024-07-20

Today, I'm thrilled to share my latest personal project with you all: an AI-powered note-taking assistant! This project marks my first venture into the world of artificial intelligence, and I couldn’t be more excited about the outcome. I used Next.js for the framework, TypeScript for the language, Drizzle for database management, OpenAI for the AI model, Firebase for image storage, and deployed the entire full-stack application on Vercel. It’s been an incredible journey, and I’m delighted to walk you through the process and features of this innovative app.

[**Read More**](https://codewithkatyrosli.com/blog/building-my-first-ai-note-taking-assistant-a-journey-with-next-js-type-script-and-open-ai)

In my current workplace, I have had the privilege of working alongside Grace Kaberere for a year now. Grace, a consultant and a Software Engineer from Kenya, works remotely with our team. Throughout this period, Grace has consistently demonstrated an exemplary attitude towards learning and sharing knowledge, making her a role model for all of us.

Interview with Grace: Insights from a Seasoned Full Stack Developer

Recently, I have been coding in backend Django Python, working on a project related to auctions for forest wood. In this project, users can place bids to sell their forest wood. Today, I would like to share my experience with Django and how views function in a Django application. Specifically, we'll explore a simple example of a Django view that manages a user profile and allows users to view and edit their own profile information.

Before we get started, let's explore the question: 
### What is Django?

Django is a powerful, open-source web framework written in Python that makes it easier to build web applications quickly and efficiently. It's known for its simplicity and clear structure, which helps developers manage complex web projects with ease. Django provides a range of tools and components that streamline common tasks, such as managing databases, handling user authentication, and creating dynamic web pages.

In a web application, the part of the code responsible for responding to user requests is known as a view. A view is a function or class that receives a web request, processes the request data, and returns a web response. It acts as a bridge between the user interface and the server-side logic, determining what data is presented to the user and how the application responds to different types of requests.

Now that we have understand what is Django, let's dive in! A Django view that manages a user profile. Below is an example of a code that this view allows users to view and edit their own profile information:


``` python
from django.shortcuts import render, redirect
from django.contrib.auth.decorators import login_required
from django.contrib.auth.models import User
from django.contrib import messages
from .forms import UserProfileForm

@login_required
def user_profile_view(request):
    # Get the current user
    user = request.user
    
    # If the request is a POST request, process the form data
    if request.method == 'POST':
        form = UserProfileForm(request.POST, instance=user)
        
        # If the form is valid, save the changes and redirect to the profile page
        if form.is_valid():
            form.save()
            messages.success(request, "Profile updated successfully!")
            return redirect('user_profile_view')
        else:
            messages.error(request, "Error updating profile. Please try again.")
    
    # If the request is a GET request, create a form instance for the user
    else:
        form = UserProfileForm(instance=user)
    
    # Render the profile page with the form
    context = {
        'form': form,
        'user': user,
    }
    return render(request, 'user_profile.html', context)

```
### What does the code above means?

### 1) Importing Necessary Modules:
- a) The code imports functions from Django's core libraries, including render and redirect from django.shortcuts, which help with rendering templates and redirecting requests.
- b) The login_required decorator from django.contrib.auth.decorators ensures that only authenticated users can access the view.
- c) The User model from django.contrib.auth.models represents user accounts.
- d) The messages module provides a way to display messages to the user (e.g., success or error messages).
- e)The UserProfileForm class is a custom form for editing user profiles.

### 2) View Function:
- a) The function user_profile_view handles requests to the user profile page.
- b) The login_required decorator ensures that the view is only accessible to logged-in users.
- c) The function first retrieves the current user using request.user.
- d) If the request method is POST, the function processes the form data submitted by the user using UserProfileForm.
- e) If the form is valid, the user's profile is updated and a success message is displayed. The user is then redirected back to the profile page.
- f) If the form is not valid, an error message is displayed.
- g) If the request method is GET, the function creates an instance of UserProfileForm pre-populated with the user's existing data.
- h) The function renders the user profile page using the render function, providing the form and user data in the context.

### Conclusion:
In conclusion, we explored Django and how views function in a Django application. We then discussed a simple example of a Django view that manages user profiles. This view demonstrates how to handle GET and POST requests, validate form data, and provide appropriate responses to the user.

Django's views offer a convenient way to handle different types of requests and enable efficient management of user interactions in a web application. By understanding how views work, we can create dynamic and responsive web pages that enhance user experience.

___________________________________________________________

### Also on codewithkatyrosli.com

**Interview with Grace: Insights from a Seasoned Full Stack Developer**,
2024-05-19

In my current workplace, I have had the privilege of working alongside Grace Kaberere for a year now. Grace, a consultant and a Software Engineer from Kenya, works remotely with our team. Throughout this period, Grace has consistently demonstrated an exemplary attitude towards learning and sharing knowledge, making her a role model for all of us. Her commitment to best practices in both frontend and backend development is truly inspiring. If you’re interested in connecting with Grace, you can find her on LinkedIn here.

Today, I am excited to share an interview with Grace where she offers valuable tips and tricks for coding with Django (Python). Her insights are designed to promote efficient development practices and inspire aspiring developers who are beginning their careers as Full Stack or Backend Developers.

[**Read More**](https://codewithkatyrosli.com/blog/interview-with-grace-insights-from-a-seasoned-software-engineer)


Recently, I have been coding in backend Django Python, working on a project related to auctions for forest wood. In this project, users can place bids to sell their forest wood. Today, I would like to share my experience with Django and how views function in a Django application.

Exploring Django Views: A Beginner's Guide to Managing User Profiles

In this post, I'll share my journey of implementing drawing functionality on a Leaflet map, from initial research to overcoming challenges and finally achieving success. Drawing from my experience working on the Geo Game App project here: [https://chimerical-meringue-763758.netlify.app/,](https://chimerical-meringue-763758.netlify.app/) where I used Leaflet Map, I felt ready to tackle this task.

### Research and Preparation:
My journey began with thorough research, diving into Leaflet's documentation and scouring the web for examples and tutorials. Armed with this knowledge, I was ready to embark on the implementation process.

### Implementation:
With a clear understanding of Leaflet's capabilities, I began by integrating drawing functionality into my map. Leveraging Leaflet's built-in drawing tools and exploring plugins like Leaflet.Draw, I crafted a user-friendly interface that allowed users to draw polygons directly onto the map canvas.

### Here's an example:

``` javascript
import React, { Component } from 'react';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet-draw/dist/leaflet.draw.css';
import 'leaflet-draw';
import { csrfToken } from './utils/csrfToken'; // Import CSRF token

class LeafletMap extends Component {
  constructor(props) {
    super(props);
    this.mapRef = React.createRef();
    this.drawnItems = new L.FeatureGroup();
    this.drawControl = null;
    this.state = {
      isDrawing: false
    };
  }

  componentDidMount() {
    this.map = L.map(this.mapRef.current).setView([51.505, -0.09], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; OpenStreetMap contributors'
    }).addTo(this.map);

    this.map.addLayer(this.drawnItems);
  }

  initDrawControl = () => {
    if (!this.drawControl) {
      this.drawControl = new L.Control.Draw({
        draw: {
          polygon: true,
          polyline: false,
          rectangle: false,
          circle: false,
          marker: false
        },
        edit: {
          featureGroup: this.drawnItems
        }
      });
      this.map.addControl(this.drawControl);
      this.map.on('draw:created', this.onDrawCreated);
    }
  };

  onDrawCreated = (e) => {
    const layer = e.layer;
    this.drawnItems.addLayer(layer);
    this.setState({ isDrawing: false });

    // Show buttons for done, cancel, and undo
    const toolbar = this.drawControl._toolbars.draw;
    toolbar._modes.polygon.handler.enable();
    toolbar._modes.polygon.handler.disable(); // Disable drawing after polygon is created

    toolbar._modes.remove.handler.enable(); // Enable remove (undo) button
    toolbar._modes.remove.handler.on('click', () => {
      const layers = this.drawnItems.getLayers();
      if (layers.length > 0) {
        const lastLayer = layers[layers.length - 1];
        this.drawnItems.removeLayer(lastLayer);
      }
    });

    toolbar._modes.cancel.handler.enable(); // Enable cancel button
    toolbar._modes.cancel.handler.on('click', () => {
      this.drawnItems.clearLayers(); // Remove all drawn layers
      toolbar._modes.polygon.handler.disable(); // Disable drawing
    });

    toolbar._modes.edit.handler.enable(); // Enable done (save) button
    toolbar._modes.edit.handler.on('click', () => {
      // Convert drawn polygon to GeoJSON format
      const geojson = layer.toGeoJSON();

      // Send GeoJSON data to server using Django's CSRF protection and URL
      fetch('/savePolygon/', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': csrfToken // Pass the CSRF token in the headers
        },
        body: JSON.stringify({ data: JSON.stringify(geojson) })
      })
        .then(response => {
          if (response.ok) {
            console.log('Polygon saved successfully!');
          } else {
            console.error('Failed to save polygon:', response.statusText);
          }
        })
        .catch(error => {
          console.error('Failed to save polygon:', error);
        });
    });
  };

  render() {
    return (
      <div>
        <div ref={this.mapRef} style={{ height: '400px' }}></div>
        {!this.state.isDrawing && (
          <button onClick={() => {
            this.setState({ isDrawing: true });
            this.initDrawControl();
          }}>Draw</button>
        )}
        {this.state.isDrawing && <p>Please draw on the map</p>}
      </div>
    );
  }
}

export default LeafletMap;

```
### What this code does:

1) Component Structure and State:
We define a class component called LeafletMap that extends Component. This component represents the Leaflet map with drawing functionality.
Inside the constructor, we initialize the component's state with isDrawing set to false. This state variable tracks whether the user is currently drawing on the map.

2) Map Initialization:
In the componentDidMount lifecycle method, we initialize the Leaflet map by creating a map instance and adding a tile layer for OpenStreetMap.

3) Drawing Control Initialization:
The initDrawControl method initializes the drawing control for the map. It creates a new instance of L.Control.Draw with options to enable drawing polygons and disable other drawing modes like polyline, rectangle, circle, and marker.
This method is called when the user clicks the "Draw" button.

4) Drawing Polygon:
When the user draws a polygon on the map, the onDrawCreated event handler is triggered. Inside this handler:
We add the drawn polygon layer to the drawnItems feature group, which displays the drawn polygons on the map.
We disable the drawing handler for polygons to prevent further drawing.
We enable the remove (undo), cancel, and edit (done/save) buttons in the drawing toolbar.

5) Button Click Handlers:
Clicking the "Remove" button (undo) removes the last drawn polygon from the map.
Clicking the "Cancel" button clears all drawn polygons from the map and disables further drawing.
Clicking the "Edit" button (done/save) converts the drawn polygon to GeoJSON format, sends it to the server via an AJAX request, and saves it to the database using Django's CSRF protection and URL.

6) Rendering:
The render method renders the Leaflet map and a "Draw" button when isDrawing is false.
When isDrawing is true, it renders the "Please draw on the map" text below the map.

### Conclusion:
In conclusion, I found the process of implementing the drawing feature incredibly fulfilling. The improvements in user experience (UX) and user interface (UI) were quite satisfying. With clearer guidance provided to users, they can now navigate the drawing process with ease and confidence. It's empowering to see users have full control over the shapes they draw and the ability to save them directly onto their map.

Moreover, the collaborative aspect of reviewing and learning from the code together has been fantastic. It's not just about writing code; it's about growing and evolving as developers through shared experiences. This journey has been both enjoyable and enlightening, and I look forward to more opportunities for collaborative learning in the future.

___________________________________________________________

### Also on codewithkatyrosli.com

**Exploring Django Views: A Beginner's Guide to Managing User Profiles**,
2024-04-21

Recently, I have been coding in backend Django Python, working on a project related to auctions for forest wood. In this project, users can place bids to sell their forest wood. Today, I would like to share my experience with Django and how views function in a Django application. Specifically, we'll explore a simple example of a Django view that manages a user profile and allows users to view and edit their own profile information.

[**Read More**](https://codewithkatyrosli.com/blog/exploring-django-views-a-beginner-s-guide-to-managing-user-profiles)

In this post, I'll share my journey of implementing drawing functionality on a Leaflet map, from initial research to overcoming challenges and finally achieving success. Drawing from my experience working on the Geo Game App project here: https://chimerical-meringue-763758.netlify.app/ where I used Leaflet Map, I felt ready to tackle this task.

Leaflet Map: Adding Drawing Functionality

In the fast-paced world of web development, we're always striving to make websites easier to use and more enjoyable. Recently, my team has been focused on making our map page better. This page is super important for our website because it helps users find what they're looking for. Drawing from my experience working on the Geo Game App project here:[ https://chimerical-meringue-763758.netlify.app/](https://chimerical-meringue-763758.netlify.app/), where I used Leaflet Map, I felt ready to tackle this task. I knew both the good and the not-so-good things about Leaflet Map. So, I started by going back to the Leaflet Map instructions to make sure I was on the right track.

### Recap and Documentation Review:
To ensure a comprehensive understanding of Leaflet Map's capabilities, I undertook a systematic review of its documentation. This involved revisiting fundamental concepts and exploring advanced functionalities, enabling me to discern nuanced approaches for our current objectives. Such a meticulous approach not only reaffirmed my existing knowledge but also unveiled new avenues for innovation within the framework.

### Here's some of the User Stories for Desktop:
1) As a User, I am able to mouse hover on the layers, I can see the layer is set to 100% opacity.
2) As a User, when I mouse out from the layer, I can see the layer is back to its normal state.
3) As a User, I can click on the layer, I can see the layer is set to 100% opacity and the side panel slide from the left off the screen and read the information shown on the side panel.

### Here's an example of a Leaflet Map code for the User Stories above:
``` javascript
// Create a Leaflet map
var map = L.map('map').setView([51.505, -0.09], 13);

// Add a base tile layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// Define some GeoJSON data
var geojson = {
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {
            "name": "Layer 1"
        },
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [-0.09, 51.5],
                    [-0.09, 51.52],
                    [-0.06, 51.52],
                    [-0.06, 51.5],
                    [-0.09, 51.5]
                ]
            ]
        }
    }, {
        "type": "Feature",
        "properties": {
            "name": "Layer 2"
        },
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [-0.07, 51.49],
                    [-0.07, 51.51],
                    [-0.04, 51.51],
                    [-0.04, 51.49],
                    [-0.07, 51.49]
                ]
            ]
        }
    }]
};

// Add GeoJSON layer to the map
var geojsonLayer = L.geoJSON(geojson, {
    onEachFeature: function (feature, layer) {
        layer.on({
            mouseover: function (e) {
                e.target.setStyle({
                    opacity: 1
                });
            },
            mouseout: function (e) {
                e.target.setStyle({
                    opacity: 0.5 // Change opacity back to original value
                });
            },
            click: function (e) {
                // Open side panel here
                console.log("Clicked on " + feature.properties.name);
                
                // Reset styles of previously clicked layers
                geojsonLayer.eachLayer(function (layer) {
                    layer.setStyle({
                        opacity: 0.5 // Reset opacity for all layers
                    });
                });

                // Set clicked layer to 100% opacity
                e.target.setStyle({
                    opacity: 1
                });
            }
        });
    }
}).addTo(map);

```

### What this code does:
1) We create a Leaflet map and add a base tile layer.
GeoJSON data representing two polygons (layers) is defined.
2) We add a GeoJSON layer to the map and define event listeners for mouseover, mouseout, and click events on each layer.
3) When the mouse hovers over a layer, its opacity is set to 100%. - When the mouse moves away, the opacity is reset to its original value (0.5 in this case).
4) When a layer is clicked, its opacity is set to 100%, and the styles of all other layers are reset to their original opacity. 
5) Additionally, we can handle opening a side panel within the click event handler.

### Conclusion:
In conclusion, the journey of refining the map page functionality underscored the intrinsic value of adopting a professional approach rooted in meticulous documentation review and strategic implementation. Through the utilization of Leaflet Map, we were able to orchestrate significant enhancements that not only elevate user experience but also reinforce the platform's commitment to innovation and user-centric design. As we continue to iterate and refine our offerings, Leaflet Map remains an indispensable ally, empowering us to chart new frontiers in web-based cartography and interactive mapping solutions.

Once again here's my Geo Game App: [https://chimerical-meringue-763758.netlify.app/](https://chimerical-meringue-763758.netlify.app/). Enjoy playing :D!

___________________________________________________________

### Also on codewithkatyrosli.com

**Leaflet Map: Adding Drawing Functionality**,
2024-02-10

In this post, I'll share my journey of implementing drawing functionality on a Leaflet map, from initial research to overcoming challenges and finally achieving success. Drawing from my experience working on the Geo Game App project here: https://chimerical-meringue-763758.netlify.app/, where I used Leaflet Map, I felt ready to tackle this task.

Research and Preparation:
My journey began with thorough research, diving into Leaflet's documentation and scouring the web for examples and tutorials. Armed with this knowledge, I was ready to embark on the implementation process.

[**Read More**](https://codewithkatyrosli.com/blog/leaflet-map-adding-drawing-functionality)



In the dynamic realm of web development, refining user interfaces to optimize functionality and experience remains a perpetual pursuit. Within my team, our latest endeavor centers on elevating the efficacy and user engagement of the map page—a pivotal component of our platform. 

Unleashing Leaflet Map Magic: Elevating User Experience with a Polished Touch

For this project, I was tasked with developing an Admin System catering to specific user roles, where drag and drop functionality was paramount for card rearrangement. Here's the process on how I approach this task:

### 1. Research and Understanding:
- I researched existing implementations of drag and drop functionality.
- I then invested time in understanding the underlying logic behind drag and drop operations.
- Next, I broke down project requirements into user stories.
- User stories helped articulate product functionality with clarity.
- Defined roadmap with precision, ensuring comprehensive understanding of project scope and requirements.

### 2. Frontend Focus:
- As a Frontend Developer, I not only need to make sure that the functionality works but I also focus on the UX and the visuals.
- I ensured smooth user experience through visual cues like hover outlines and graceful animations during dragging.

### 3. Collaborative Efforts:
- I collaboration with my colleague to ensure seamless integration of frontend and backend components.
- We rigorously tested the page and its functions multiple times, conducting thorough reviews of each other's code to ensure adherence to standards.
- Our focus was on maintaining code readability and simplicity throughout the development process.

### Here's my main key learnings from this project:
'splice()' is a method in JavaScript arrays that allows you to modify the contents of an array by removing or replacing existing elements and/or adding new elements in place.

```javascript
array.splice(startIndex, deleteCount, item1, item2, ...);
```
**startIndex:** The index at which to start modifying the array.
**deleteCount:** The number of elements to remove from the array, starting from the startIndex.
**item1, item2, ...**: The elements to insert into the array at the startIndex.

Here's an example of splice() can be used in a class component:

```javascript
import React, { Component } from 'react';

class ExampleComponent extends Component {
  state = {
    numbers: [1, 2, 3, 4, 5],
  };

  handleSplice = () => {
    // Remove 2 elements starting from index 2, and insert 'x' and 'y' at that index
    this.state.numbers.splice(2, 2, 'x', 'y');

    this.setState({ numbers: this.state.numbers });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleSplice}>Splice Array</button>
        <ul>
          {this.state.numbers.map((number, index) => (
            <li key={index}>{number}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default ExampleComponent;

```
The handleSplice method modifies the numbers array using splice(). It removes 2 elements starting from index 2 and inserts 'x' and 'y' at that index.
Clicking the button triggers the handleSplice method, which updates the state and re-renders the component to reflect the changes in the array.

Linking back to the drag and drop task, 'splice()' is important in drag and drop operations because it allows us to dynamically modify the order of elements within an array, which is often used to reflect the visual rearrangement of items in a UI component.

### Conclusion:
In conclusion, our project journey underscored the critical importance of meticulous planning and a deep understanding of the task at hand. By breaking down the project into manageable user stories and leveraging collaborative efforts, we successfully implemented a seamless drag and drop feature, ensuring a user-friendly experience for our Admin System.


___________________________________________________________

### Also on codewithkatyrosli.com

**Unleashing Leaflet Map Magic: Elevating User Experience with a Polished Touch**,
2024-02-04

In the dynamic realm of web development, refining user interfaces to optimize functionality and experience remains a perpetual pursuit. Within my team, our latest endeavor centers on elevating the efficacy and user engagement of the map page—a pivotal component of our platform. Drawing from my involvement in the Geo Game App project **here**, wherein I previously integrated Leaflet Map, I embarked on this task armed with insights into both the merits and limitations of this renowned mapping library. Grounded in a commitment to thoroughness, I initiated the process by revisiting and meticulously studying the documentation of Leaflet Map.

[**Read More**](https://codewithkatyrosli.com/blog/unleashing-leaflet-map-magic-elevating-user-experience-with-a-polished-touch)




For this project, I was tasked with developing an Admin System catering to specific user roles, where drag and drop functionality was paramount for card rearrangement. Here's the process on how I approach this task:

Crafting a Seamless Admin System: Navigating Drag-and-Drop Challenges

As a Developer involved in the implementation of the redesigned "Sälj Virke" page for Virkesbörsen, I have gained invaluable insights throughout the process. Here are some key learnings that I've gleaned from this experience:

### 1. Understanding User Journeys and User Stories:
Breaking down the user journey into discrete user stories was pivotal in guiding the implementation process. By dissecting each task into manageable units, I could anticipate which sections could be modularized into reusable components. This approach not only streamlined development but also facilitated future iterations and updates, promoting scalability and maintainability.

### 2. Estimating Development Time:
Understanding user stories from a technical standpoint enabled me to accurately estimate the time required for implementation. By assessing the complexity of each task and considering technical dependencies, I could provide realistic timelines for completion. This proactive approach to time management ensured that project deadlines were met consistently, minimizing delays and enhancing overall project efficiency.

### 3. Leveraging Class Components for Complex Logic:
Before this project, I primarily coded in Function Components. However, in tackling the complexities of this project, I found class components to be particularly useful for handling complex logic and managing state.

Below is an example of a Class Component that handles complex logic and manages state: 

```javascript
import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  incrementCount = () => {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  };

  decrementCount = () => {
    this.setState(prevState => ({
      count: prevState.count - 1
    }));
  };

  render() {
    return (
      <div>
        <h2>Counter</h2>
        <div>
          <button onClick={this.incrementCount}>Increment</button>
          <span>{this.state.count}</span>
          <button onClick={this.decrementCount}>Decrement</button>
        </div>
      </div>
    );
  }
}

export default Counter;
```

### What this code does:
1) In the constructor, it initializes the component's state with a property count set to 0.
2) It defines two methods incrementCount and decrementCount to update the count state. These methods use setState to update the state based on the previous state, ensuring that state updates are handled correctly.
3) In the render method, it returns JSX that represents the component's UI:
It displays a header "Counter".
It renders a <div> containing:
A "Increment" button which when clicked calls the incrementCount method.
A <span> element to display the current count value from the component's state.
A "Decrement" button which when clicked calls the decrementCount method.
4) Finally, it exports the Counter component as the default export, making it available for use in other parts of the application.In other words, this Counter component can be used in other parts of a React application to render a simple counter interface where users can increment and decrement the count value.

5) To read more and understand what is Class Component, read [here](https://codewithkatyrosli.com/blog/understanding-class-components-in-react).

### 4. Embracing Rewarding Moments:
One of the most gratifying aspects of the implementation process was witnessing the tangible results of my coding efforts. The culmination of meticulous coding, rigorous testing, and collaborative code reviews culminated in the deployment of this project. Seeing the page live and functional not only validated my technical skills but also provided a sense of accomplishment and pride in contributing to the project's success.

### Conclusion:
In conclusion, the implementation of this project was a journey marked by continuous learning, problem-solving, and growth. By leveraging insights from user journeys, estimating development time accurately, and embracing class components for complex logic, I was able to navigate the complexities of the implementation process effectively. Moving forward, I am excited to apply these learnings to future projects, further refining my skills as a Developer and delivering exceptional user experiences.


___________________________________________________________

### Also on codewithkatyrosli.com

**Crafting a Seamless Admin System: Navigating Drag-and-Drop Challenges**,
2024-01-28

For this project, I was tasked with developing an Admin System catering to specific user roles, where drag and drop functionality was paramount for card rearrangement. Here's the process on how I approach this task:

1. Research and Understanding:
I researched existing implementations of drag and drop functionality.
I then invested time in understanding the underlying logic behind drag and drop operations.

[**Read More**](https://codewithkatyrosli.com/blog/crafting-a-seamless-admin-system-navigating-drag-and-drop-challenges)



As a Developer involved in the implementation of the redesigned "Sälj Virke" page for Virkesbörsen, I have gained invaluable insights throughout the process. Here are some key learnings that I've gleaned from this experience:

1. Understanding User Journeys and User Stories:
Breaking down the user journey into discrete user stories was pivotal in guiding the implementation process.

Implementing the "Sälj Virke" Page: Insights from a Developer

In the realm of digital product design, the pursuit of enhancing user experience is paramount. One such endeavor unfolded in the redesign of the "Sälj Virke" page on Virkesbörsen. This initiative stemmed from a critical observation: users frequently contacted sales representatives seeking confirmation on the free nature of ad creation. Recognising this as a potential barrier to user engagement, our team embarked on a journey to address this concern and fortify user trust and confidence in our platform.

Here's the process that I took:

### 1. Identifying the Problem
- Thorough analysis revealed a recurring issue: user uncertainty regarding the cost of ad creation.
- Recognizing this as a potential barrier to user engagement, we prioritized addressing this concern in the redesign.

### 2. Ideation and Collaboration:
- I engaged in collaborative sessions with stakeholders to brainstorm solutions.
- We emphasized the importance of not only clarifying the free nature of ad creation but also providing insight into the platform's operational model.
- Leveraged diverse perspectives to develop a holistic redesign strategy that catered to user needs and business objectives.

### 3. User Testing: Validating Design Concepts:
- We conducted 5 rigorous user testing sessions to gather feedback on preliminary design concepts.
- Identified user curiosity regarding the operational dynamics of the platform.
- We also utilized user insights to refine design elements and address user inquiries proactively.

### 4. Iteration and Refinement:
- I iteratively refined the design based on stakeholder feedback and user testing insights.
- I ensured alignment with user expectations and business goals.
- Together, we strived for continuous improvement to optimize the user experience iteratively.

### 5. Implementation and Performance Analysis:
- I then Implemented the finalized design into the Virkesborsen platform.
- We established comprehensive analytics frameworks to monitor performance.
- Analyzed initial data to assess the impact of the redesign on user engagement and satisfaction.

**Left is the before and the right is the after redesign:**
![Virkesborsen-redesign-SaljaVirke.png](https://imagesstrapikatyr.s3.eu-north-1.amazonaws.com/Virkesborsen_redesign_Salja_Virke_17a7b98e9e.png)

### Conclusion:
In conclusion, the redesign of this page, exemplifies our commitment to user-centric design principles and continuous improvement. By systematically identifying and addressing user concerns, collaborating closely with stakeholders, and leveraging iterative design methodologies, working together, as a team, we succeeded in enhancing user trust, and satisfaction. 


___________________________________________________________

### Also on codewithkatyrosli.com

**Implementing the "Sälj Virke" Page: Insights from a Developer**,
2024-01-14

As a Developer involved in the implementation of the redesigned "Sälj Virke" page for Virkesbörsen, I have gained invaluable insights throughout the process. Here are some key learnings that I've gleaned from this experience:

1. Understanding User Journeys and User Stories:
Breaking down the user journey into discrete user stories was pivotal in guiding the implementation process. By dissecting each task into manageable units, I could anticipate which sections could be modularized into reusable components. 

[**Read More**](https://codewithkatyrosli.com/blog/implementing-the-saelj-virke-page-insights-from-a-developer)




In the realm of digital product design, the pursuit of enhancing user experience is paramount. One such endeavor unfolded in the redesign of the "Sälj Virke" page on Virkesbörsen. This initiative stemmed from a critical observation: users frequently contacted sales representatives seeking confirmation on the free nature of ad creation.