DEV Community: Kyra HP

Completing a Full-stack Coding Bootcamp - My Experience Attending Flatiron School and a Phase by Phase Breakdown

Kyra HP — Mon, 03 Jun 2024 19:33:28 +0000

Overview and Picking a Bootcamp Schedule
Phase breakdown
Phase 1
Phase 2
Phase 3
Phase 4
Phase 5

Over the past couple of days, I put the finishing touches on my Capstone project for Flatiron School, thus marking the end of my coding bootcamp journey. Whether you’re considering bootcamps or simply curious, I hope to provide insight into the curriculum and my overall experience as a career-transitioner and aspiring software engineer.

Overview and Picking a Bootcamp Schedule

Coding bootcamps are educational programs that aim to teach you the foundations of full-stack software engineering. My program, Flatiron School, offers live full-time (both in-person and virtual) as well as virtual self-paced instruction. Here are some factors to consider when deciding whether to do a live or self-paced bootcamp:

Live, full-time bootcamp (approx 15 weeks) is great for people who…

Can commit to a full-time weekly schedule in addition to outside work after class and on weekends. This likely means no job or large personal commitments on the side for the duration of bootcamp.
Want to complete bootcamp, and therefore begin job hunting, sooner rather than later
Desire or benefit from live classes with instructors and peers. This can strengthen your sense of accountability, community, and ability to maintain a strict schedule.

Self-paced, asynchronous bootcamp is great for people who…

Have outside commitments, whether personal or work-related, and cannot dedicate 60 hours/week to bootcamp
Excel in time management and enjoy creating their own schedules
Want flexibility in the amount of time to complete coursework, study for assessments, and complete projects

I opted for Flatiron’s self-paced, 40-week schedule and had a wonderful experience. Although the content is the same across instruction modes, the self-paced program was much more hands-off in its approach. Course content is administered on Canvas and includes a mix of readings, videos, and engaging labs that solidify your understanding of the material.

However, I never felt as though help was unreachable. I had 4 excellent instructors who were available to meet for technical help, advice, and leading review sessions with other classmates. Taking advantage of those resources played a huge part in feeling like I was part of a structured learning community. For the majority of my journey, I decided to treat this as a full-time job and use the flexibility to spend more time doing outside learning and refining my projects. I completed earlier phases at a faster rate, giving me more time to focus on larger projects during phases 4 and 5.

Phase Breakdown

Phase 1

Phase 1 of bootcamp focused on introducing JavaScript and front-end web development. We learned about functions, working with common data structures (such as arrays and objects), and algorithms. We used our new JS knowledge to create the structure of web pages, make them interactive through event-handling, and communicate with external APIs as sources of data. My final project for this phase was a distance-based, adoptable pet browser that fetches real data from Petfinder’s database.

Phase 2

Phase 2 maintained a focus on JavaScript and front end development while introducing a key new concept - React. We first learned React basics, including an overview of how it works/setup, components, props, state, and events. In my personal experience, once I felt completely comfortable with state, the rest of the phase was smooth sailing.
(Check out my blog post for more on state!)

We moved on from fundamentals to data fetching (touched on in phase 1), side effects, and client-side routing. This allowed us to create multi-page interactive websites (and with much more efficiency than using vanilla JS). My project was a song library tool allowing users to search spotify tracks and save music.

Phase 3

Phase 3 is where the curriculum switched tracks and I experienced the steepest learning curve. We didn’t use JavaScript or build websites. Instead, we learned Python and how to use this new language to create a backend API. This phase gave us more control over future projects by teaching us how to persist and manage data in a database.

Specifically, this curriculum taught SQL (Structured Query Language), a language for creating and manipulating databases. We spent a significant amount of time learning bare SQL commands and how to implement them using Python. Although I may not need to continue handwriting SQL commands in future projects, I developed a stronger understanding of the tools used in Phase 4 with this knowledge. We don’t shy away from using helpful extensions and libraries when applicable, but experiencing how they work behind the scenes is critical to using them correctly and deeply understanding your code.

A strong emphasis of this phase was object-oriented programming, which is a principle I will likely use in any future full-stack application I build. I delve deeper into objects and their relationships in this blog post.

My project for Phase 3 was a command line interface (i.e. accessed in terminal/command shell) used for managing research sites, projects, and investigators. This was inspired by my previous role as a clinical psychology research coordinator in a hospital setting.

Phase 4

Phase 4 built on the skills gained in Phase 3 and taught Flask, a web microframework that uses Python to assist with web application development. We also learned how to use Flask-SQLAlchemy, an extension used to create databases and configure database models with relationships, as well as use version control with our databases. In Phase 3, we essentially created our own object-relational mappers using Python and SQL. The tools taught in Phase 4 simplify this task for us while relying on our knowledge built in Phase 3.

This phase also taught us how to build RESTful APIs, a critical step in developing our first full-stack applications. We used our APIs to handle requests from the front end of our applications (e.g. when we submit forms), process corresponding back end actions (e.g. modifying data in a database), and returning a response to the front end. This blog post explains this process in more detail and how it’s used in full-stack development.

My final project for Phase 4 was a full-stack application similar to a Buy Nothing group, where users can post listings for free items or services from their own accounts and rate each other.

Phase 5

The final phase of Flatiron’s bootcamp does not introduce any new content and is a dedicated time to work on our capstone projects. Our capstones had similar requirements to our Phase 4 projects but are more robust and incorporate new, self-taught content. I decided to spend more time on my capstone and teach myself mobile app development using React Native. My project is an organizational app for managing health information, serving as a central place to track providers, medications, routines, and appointments. It combines knowledge from all phases and includes a mobile front end, Flask API, and deployed database built with Python and Flask-SQLAlchemy. I will continue making improvements post-graduation!

If you made it to this point and have any lingering questions or simply want to connect, please reach out to me on Linkedin and I’d love to chat!

Intro to Flask-RESTful, walkthrough in Python

Kyra HP — Mon, 26 Feb 2024 23:09:10 +0000

Table of Contents:

Setup
GET
POST
PATCH
DELETE
Conclusion

In this post, I will provide an overview of how to build simple RESTful routes using Flask. If you've retreived data from external APIs or used json-server in your frontend applications, you may already be familiar with RESTful conventions and HTTP request methods. But in this blog, we will be focusing on the server side/backend to explore how RESTful APIs really work behind the scenes.

What is REST?

REST stands for Representational State Transfer and refers to a set of principles for network communication in applications. By adhering to these constraints, applications can use HTTP methods for routing in a standard, readable way to produce predictable behaviors.

Flask-RESTful

In this demo, we'll be using Flask-RESTful, a Flask extension that allows native support for HTTP request methods and simple RESTful routing. We'll be implementing simple GET, POST, PATCH, and DELETE methods and clearly map our routes to corresponding backend actions.

Setup

Before we get started, here is the repository I created for this demo if you'd like to view the source code. Using Flask-SQLAlchemy, I have already created a model (Company), initialized a local database (companies.db), and seeded the database with 10 random companies to start (all within the 'server' directory). If you're following along, be sure to run pipenv install and pipenv shell to download the dependencies from my Pipfile and boot up your local environment.

We'll be working in app.py to create routes that Create, Retrieve, Update, and Delete companies. Our Company model is simple and contains the following columns:

id: The primary key uniquely identifying each row (company) in the database. It's automatically assigned when we add a Company instance to the database.
name: A string representing the name of the Company.
founder: A string representing the name of the Company's founder.
founding_date: A DateTime object representing the day the Company was founded.

# models.py
from flask_sqlalchemy import SQLAlchemy
from sqlalchemy_serializer import SerializerMixin

db = SQLAlchemy()


class Company(db.Model, SerializerMixin):
    __tablename__ = "companies"

    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String)
    founder = db.Column(db.String)
    founding_date = db.Column(db.DateTime, server_default=db.func.now())

    def __repr__(self):
        return f"<Company: {self.name}, Founder: {self.founder}>"

Our app and relevant imports have been configured in app.py.

# app.py
#!/usr/bin/env python3

from flask import Flask, request, make_response
from flask_migrate import Migrate
from flask_restful import Api, Resource

from models import db, Company

app = Flask(__name__)
app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///companies.db"
app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
app.json.compact = False

migrate = Migrate(app, db)
db.init_app(app)

# Constructor for your API, initialized with a Flask application instance.
# Will populate with Resources (as we define below)
api = Api(app)

# ADDING RESOURCES BELOW:


if __name__ == "__main__":
    app.run(port=5555, debug=True)

GET

Let's start by building out our first resource that retrieves all companies from the database following a GET request. In order to create a RESTful route using Flask-RESTful, our resource needs to inherit from the Resource base class. The Resource class gives you access to HTTP methods when you define them within your resource. For our first resource, we need to define a get instance method that will be responsible for actually querying the database and returning a response. To route a URL to our resource and add it to our Api, we can use the add_resource() method on our Api object. add_resource() takes in a resource and URL, as well as an optional endpoint (Flask-RESTful will generate one for you if not provided).

# ADDING RESOURCES BELOW:

class Companies(Resource):
    def get(self):
        # Query database here
        pass

api.add_resource(Companies, '/companies', endpoint='companies')

When we make a GET request to '/companies', we want to retrieve all company instances that exist in our database. Then, we'll want to return this data as JSON along with a status code. Flask-RESTful automatically converts our data to JSON so we do not need to use jsonify() in our response.

class Companies(Resource):
    def get(self):
        # Query database here, serializing each Company with to_dict()
        companies = [company.to_dict() for company in Company.query.all()]
        return companies, 200


api.add_resource(Companies, "/companies", endpoint="companies")

To test this code, I'll start up the server by running python app.py and make a GET request using Postman.

The response we receive contains a list of all Companies and a status code of 200, indicating that our request was successful. We just built a RESTful API endpoint!

GET (a single record)

We can create a resource very similar to the one above to retrieve a single record, adding id as a parameter in its get method. This will allow us to filter our query results and retrieve the one Company we're looking for.

class CompanyByID(Resource):
    def get(self, id):
        company = Company.query.filter_by(id=id).first()
        return company.to_dict(), 200


api.add_resource(CompanyByID, "/companies/<int:id>", endpoint="company")

We are filtering our Company query by the given id and returning a serialized version of our data with a 200 status code. <int:id> indicates that an integer representing the id will be passed to the route through the URL.

You don't always have to return a successful status code, and it can be helpful to return error messages when something goes wrong with a request. For example, if we want to ensure that the requested company exists before returning a success code, we can modify our code as shown below:

class CompanyByID(Resource):
    def get(self, id):
        company = Company.query.filter_by(id=id).first()
        if company:
            return company.to_dict(), 200
        return {"error": "404 - Company not found"}, 404


api.add_resource(CompanyByID, "/companies/<int:id>", endpoint="company")

Below is the outcome when we request a valid company (id=1) and an invalid company (id=12).

Successful:

Unsuccessful:

POST

Now that we know the basics of using Flask-RESTful, let's implement our POST method to create a new Company. We can add our post() method to our Companies resource containing our original get() method and use the same URL ('/companies').

class Companies(Resource):
    def get(self):
        # Query database here, serializing each Company with to_dict()
        companies = [company.to_dict() for company in Company.query.all()]
        return companies, 200

    # NEW POST METHOD
    def post(self):
        pass


api.add_resource(Companies, "/companies", endpoint="companies")

The user will be supplying data as JSON to be used for our new Company instance. This means that our request will have a body which can be parsed in the backend using request.get_json(), which returns a dictionary with the data for the new Company. {'name': 'Awesome Games LLC', 'founder': 5} is an example of a dictionary that we could have parsed from the request. We could then use data.get('name') or data['name'] to retrieve the value associated with the 'name' key. I prefer to use .get() rather than bracket notation because it returns None when a key is invalid instead of throwing an error.

See the complete post() method below:

class Companies(Resource):
    def get(self):
        # Query database here, serializing each Company with to_dict()
        companies = [company.to_dict() for company in Company.query.all()]
        return companies, 200

    # NEW POST METHOD
    def post(self):
        data = request.get_json()
        try:
            # Attempting to create a Company instance with data from the request body
            new_company = Company(
                name=data.get("name"),
                founder=data.get("founder")
            )

            # Attempting to add and commit the new instance to the db
            db.session.add(new_company)
            db.session.commit()

            # Returning a response with our new company (serialized) and a status code
            return new_company.to_dict(), 201
        except:
            return {"error": "422 - Unprocessable Entity"}, 422


api.add_resource(Companies, "/companies", endpoint="companies")

Note: I created a new Company instance within a try/except block should anything go wrong in the creation or committing process. If my new instance does not pass a validation, I want to catch and report this error rather than break the code.

Note: I did not specify id when creating a new Company because this is automatically done when it's committed to the database. Similarly, I did not specify a founding_date because the server assigns this by default at the time of creation, as defined in my model columns.

After successfully sending a POST request, we receive a response with the newly-created company details along with a success code.

PATCH

We just created a new Company (assigned an id of 12 in my case, but this will depend on the size of your database). But what if we messed up and want to update the details of this company? We need to have a patch() method that takes in the Company id to update. This method is responsible for retrieving the specified Company, updating its attributes using the request data, re-adding it to the database, and returning a response with the updated Company.

Because our PATCH request will update a Company by id, we can add this method to our CompanyByID resource and avoid creating new routes. We will use a try/except block again to handle any exceptions that may arise during the updating process.

class CompanyByID(Resource):
    def get(self, id):
        company = Company.query.filter_by(id=id).first()
        if company:
            return company.to_dict(), 200
        return {"error": "404 - Company not found"}, 404

    # NEW PATCH METHOD
    def patch(self, id):
        company = Company.query.filter_by(id=id).first()
        data = request.get_json()

        if company:
            # Attempt to update Company attributes using request data
            try:
                # Using setattr() in this way is handy with unknown attributes
                for attr in data:
                    setattr(company, attr, data.get(attr))

                # Attempting to add and commit the updated instance to the db
                db.session.add(company)
                db.session.commit()

                # Return response with our updated company (serialized) and a status code
                return company.to_dict(), 200
            except:
                return {"error": "422 - Unprocessable Entity"}, 422

        return {"error": "404 - Company not found"}, 404


api.add_resource(CompanyByID, "/companies/<int:id>", endpoint="company")

Below is our request and response when successfully updating our new Company. We can see the same company returned to us (same id and founding_date) but with an updated name and founder.

DELETE

For our final method, delete(), we want to query a Company by id, confirm that it exists (if desired), remove it from the database, and return a message with a success code. We can reuse the CompanyByID resource and URL for this method as well.

This method is very straightforward as we're not attempting to update or create any instances.

class CompanyByID(Resource):
    def get(self, id):
        company = Company.query.filter_by(id=id).first()
        if company:
            return company.to_dict(), 200
        return {"error": "404 - Company not found"}, 404

    def patch(self, id):
        company = Company.query.filter_by(id=id).first()
        data = request.get_json()

        if company:
            # Attempt to update Company attributes using request data
            try:
                # Using setattr() in this way is handy with unknown attributes
                for attr in data:
                    setattr(company, attr, data.get(attr))

                # Attempting to add and commit the updated instance to the db
                db.session.add(company)
                db.session.commit()

                # Return response with our updated company (serialized) and a status code
                return company.to_dict(), 200
            except:
                return {"error": "422 - Unprocessable Entity"}, 422

        return {"error": "404 - Company not found"}, 404

    # NEW DELETE METHOD
    def delete(self, id):
        company = Company.query.filter_by(id=id).first()

        if company:
            db.session.delete(company)
            db.session.commit()
            return {"message": "Company successfully deleted"}, 204

        return {"error": "404 - Company not found"}, 404


api.add_resource(CompanyByID, "/companies/<int:id>", endpoint="company")

Result of our DELETE request:

Conclusion

Creating this post deepened my own understandng of Flask-RESTful and I hope, at the very least, that it gave you some insight into your own API development. Not all applications have to follow RESTful principles, but it certainly improves readability and ease of use for others when applicable. After spending much time interacting with external APIs on the frontend and managing data on the backend, I'm eager to develop my own APIs and embrace fullstack development.

Object Relationships - Modeling Real World Relationships in Python

Kyra HP — Mon, 01 Jan 2024 20:26:05 +0000

Table of Contents:

Why use Objects and Object Oriented Programming?
One to Many Relationships
- Implementing a One-to-Many Relationships
- Adding another one-to-many relationship
Many to Many Relationships
- Implementing a Many-to-Many Relationship
Conclusion

Why use Objects and Object Oriented Programming (OOP)?

If you have coding experience, you have likely come across classes and objects, whether they're ones you created or ones native to your programming language. A class in programming simply refers to a bundle of related data and functionality. 'Hello' in Python, for example, is an object (or instance) of the String class. It comes with its own methods that enhance its functionality, such as capitalize(), join(), find(), etc. Classes create abstractions of real concepts with understandable, reusable code.

Creating your own classes and instances can add a lot of functionality and conciseness to your code, but what if you want those objects to be related to each other? Say you have objects representing paintings and objects representing artists, but now you want to bring them together. Once you have an understanding of how to build object relationships, you can model those real world connections in your code.

Here is a basic set up for the Artist and Painting classes. Right now they are completely separate entities. Each only includes the __init__ and __repr__ methods to initialize object attributes and generate a prettier string when printing the object. I'm also tracking all instances of each class with the class attribute all.

class Artist:
    all = []

    def __init__(self, name):
        self.name = name
        Artist.all.append(self)

    def __repr__(self):
        return f"Artist: {self.name}"


class Painting:
    all = []

    def __init__(self, title, genre):
        self.title = title
        self.genre = genre
        Painting.all.append(self)

    def __repr__(self):
        return f"Painting: {self.title}, {self.genre}"

One to Many Relationships

One to many relationships refer to when an object of type A is associated with multiple objects of type B, but an object of type B only belongs to one object of type A.

Implementing a One-to-Many Relationships

From the example above, artists can have many paintings but paintings only belong to one artist. In order to model this one to many relationship, the object which 'belongs' to another object should include an attribute to keep track of that relationship. Since a painting can only belong to one artist, I'll add an attribute called artist to my Painting class.

class Painting:
    all = []

    # Added artist attribute below
    def __init__(self, title, genre, artist):
        self.title = title
        self.genre = genre
        self.artist = artist
        Painting.all.append(self)

    def __repr__(self):
        return f"Painting: {self.title} by {self.artist.name}, {self.genre}"

NOTE: If you are creating your own application, it'd be beneficial to manage these attributes with properties which perform validation checks. For example, you can assert that a painting's artist attribute is an object of type Artist before setting it. You can read more about how to do this here.

Now if I create an example of a painting and its artist, I will always have access to that artist through the painting.

vangogh = Artist("Vincent van Gogh")
starry_night = Painting("Starry Night", "post-impressionism", vangogh)

print(starry_night)
print(starry_night.artist)
# LOG: Painting: Starry Night by Vincent van Gogh, post-impressionism
#      Artist: Vincent van Gogh

This is a good start, but this relationship is still one-sided. We need to do a little more if we also want to view all of an artist's paintings. An object of type A, which has many objects of type B, can include a method to return all of its B objects. In this example, I can use list comprehension to access all paintings and print only the ones that belong to the current artist.

class Artist:
    all = []

    def __init__(self, name):
        self.name = name
        Artist.all.append(self)

    def __repr__(self):
        return f"Artist: {self.name}"

    # New method
    def paintings(self):
        return [painting for painting in Painting.all if painting.artist == self]

vangogh = Artist("Vincent van Gogh")
starry_night = Painting("Starry Night", "post-impressionism", vangogh)
sower = Painting("The Sower", "post-impressionism", vangogh)

print(vangogh.paintings())
# LOG: [Painting: Starry Night by Vincent van Gogh, post-impressionism, 
#       Painting: The Sower by Vincent van Gogh, post-impressionism]

Adding another one-to-many relationship

The one to many relationship between artists and paintings is now set up! I can easily add another one that behaves in a similar way. Here's an example of an additional class, Museum, that also has a one to many relationship with Painting:

class Artist:
    all = []

    def __init__(self, name):
        self.name = name
        Artist.all.append(self)

    def __repr__(self):
        return f"Artist: {self.name}"

    def paintings(self):
        return [painting for painting in Painting.all if painting.artist == self]


class Museum:
    all = []

    def __init__(self, name):
        self.name = name
        Museum.all.append(self)

    def __repr__(self):
        return f"Museum: {self.name}"

    def paintings(self):
        return [painting for painting in Painting.all if painting.museum == self]


class Painting:
    all = []

    def __init__(self, title, genre, artist, museum):
        self.title = title
        self.genre = genre
        self.artist = artist
        self.museum = museum
        Painting.all.append(self)

    def __repr__(self):
        return f"Painting: {self.title} by {self.artist.name}, {self.genre}, located at {self.museum}"

Many to Many Relationships

Many-to-many refers to relationships where an object of type A can be associated with multiple instances of type B and vice versa. There are many real world examples that fall under this category, such as students and teachers, employees and projects, and actors and movies.

Because artists can have multiple paintings, any of which potentially belonging to different museums, it makes sense to say that an artist may be featured at multiple museums. Similarly, museums contain multiple paintings that may belong to different artists, so we can also say that museums feature multiple artists. This relationship between Artist and Museum would be considered a many-to-many relationship.

Implementing a Many-to-Many Relationship

Many-to-many object relationships can be implemented with intermediary classes where two classes are related to each other through the intermediary class. Because artists cannot be featured at museums without a painting and vice versa, Painting will serve as our intermediary class. Other options include creating intermediary classes for the primary purpose of connecting two other classes, or storing relationships in list attributes.

NOTE: If you are not using an intermediary class, be sure to store the many-to-many relationship in just one class to maintain a single source of truth. Without the Painting class, Artist might have a property called museums which is a list containing its associated museums. The Museum class should not include an artists property. Museum can instead include an artists() method that finds all artists which contain the current museum in its museums list.

In this example, we should be able to view all of an artist's museums by finding its paintings, then accessing the museums that those paintings belong to.

We already have a paintings() method in our Artist class so we can make another short method to access the corresponding museums.

class Artist:
    all = []

    def __init__(self, name):
        self.name = name
        Artist.all.append(self)

    def __repr__(self):
        return f"Artist: {self.name}"

    def paintings(self):
        return [painting for painting in Painting.all if painting.artist == self]

    # New method
    def museums(self):
        return [painting.museum for painting in self.paintings()]

If we look at an Artist example, we can now access all of the museums they're featured at.

vangogh = Artist("Vincent van Gogh")
met = Museum("The MET")
npg = Museum("The National Portrait Gallery")
starry_night = Painting("Starry Night", "post-impressionism", vangogh, met)
sower = Painting("The Sower", "post-impressionism", vangogh, npg)

print(vangogh.museums())
# LOG: [Museum: The MET, 
#       Museum: The National Portrait Gallery]

To complete the relationship, we need to add a similar method in the Museum class to access its featured artists through its paintings.

class Museum:
    all = []

    def __init__(self, name):
        self.name = name
        Museum.all.append(self)

    def __repr__(self):
        return f"Museum: {self.name}"

    def paintings(self):
        return [painting for painting in Painting.all if painting.museum == self]

    def artists(self):
        return [painting.artist for painting in self.paintings()]

Now if we have multiple artists featured at one museum, we can access them directly from the Museum object.

met = Museum("The MET")
vangogh = Artist("Vincent van Gogh")
pollock = Artist("Jackson Pollock")
starry_night = Painting("Starry Night", "post-impressionism", vangogh, met)
convergence = Painting("Convergence", "abstract expressionism", pollock, met)

print(met.artists())
# LOG: [Artist: Vincent van Gogh,
#       Artist: Jackson Pollock]

Conclusion

As you expand your knowledge of OOP, you may use object relationships in the context of databases. While this is a simple example only involving python, your future object methods may include queries to a database to access and maintain up-to-date information. Modeling object relationships allows us to build scalable, flexible, and complex systems.

Intro to State in React - Example Walkthrough

Kyra HP — Mon, 06 Nov 2023 14:57:58 +0000

Table of Contents:

React data flow
Definition of state
Deciding where to hold state
Setting up state
Updating state
Working demo

I've spent the last few weeks getting a handle on React and can already see how much easier my life as a developer will be because of it. While there are myriad topics I could delve into regarding React, today I'll focus on one of the most important - state. If you already have a general understanding of React components (read here if not), this post will provide an introduction on how to take advantage of the power of state in your application. I will also be using destructuring throughout my code snippets.

React's data flow

React's data flow runs one way down the component hierarchy, from Parent to Child component. Props are pieces of data that are passed from Parent to Child component. For example, say you have an App that contains two child components- SongTitles and SongArtists. App might have a songs array of objects representing each song, where keys are the song titles and values are the corresponding artists. If we want to render the titles and artists in their respective components, we might want to pass that information as props to SongTitles and SongArtists. This might not be the most elegant design, but here's a snippet of what our components could look like:

//App.js
function App() {
  const songs = [
    { "Blank Space": "Taylor Swift" },
    { "Tiffany Blews": "Fall Out Boy" },
    { "Knee Socks": "Arctic Monkeys" },
  ];

  const titles = songs.map((song) => Object.keys(song)[0]);
  const artists = songs.map((song) => Object.values(song)[0]);

  return (
    <div className="App">
      <h1>React State Demo</h1>
      <SongTitles titles={titles} />
      <SongArtists artists={artists} />
    </div>
  );
}

//SongTitles.js
function SongTitles({ titles }) {
  const songList = titles.map((title) => (
    <p key={title}>
      <button>X</button> {title}
    </p>
  ));
  return (
    <div className="titles">
      <h2>Song Titles</h2>
      {songList}
    </div>
  );
}

//SongArtists.js
function SongArtists({ artists }) {
  const artistList = artists.map((artist) => <p key={artist}>{artist}</p>);
  return (
    <div className="artists">
      <h2>Song Artists</h2>
      {artistList}
    </div>
  );
}

Here's what the App looks like:

Definition of state

This looks good, but what happens if we want to change the songs object dynamically and remove a song from the screen when we click a delete button? Here's where state comes in. State data can change throughout a component's lifetime as the user interacts with the app, unlike props. If we want to be able to delete a song (and its corresponding artist) from inside the SongTitles component, we can easily do this by setting state. If we make the songs array stateful rather than static, it will update dynamically and we won't have to refresh the page each time we want to render a change.

Deciding where to hold state

Before we create our state variables, we should figure out where to hold songs's state. To figure out where state should live, it's helpful to decide which components need access to that state. In this case, SongTitles and SongArtists both need access to songs to render information. Sibling components can't pass data to each other (remember the data flow) so we should store songs's state in a common parent component (App in this case). This means that songs can continue living in App, but you can imagine that without the SongArtists component, we could just store this state directly in SongTitles.

Setting up state

Now that we've decided where the songs state will live, let's import React's useState hook in App.js: import {useState} from "react"

The useState function takes in the initial value of our state variable as a parameter and returns two things:
1) the state's current value
2) a function that can be used to set (or change) that state

To use state with our songs array, we can replace our old array with the following lines inside of our App function:

// App.js
function App() {
  const [songs, setSongs] = useState([
    { "Blank Space": "Taylor Swift" },
    { "Tiffany Blews": "Fall Out Boy" },
    { "Knee Socks": "Arctic Monkeys" },
  ]);
//...
}

Here, songs is initially set to the the same 3 songs from our initial array, but we also now have a function to dynamically change songs called setSongs.

NOTE: This is the naming convention for setter functions, but you could name it something other than setSongs if you prefer.

Updating state

Our next step is to create a function in App that will remove a song from songs. Given a song title that we want to delete, our function could look like this:

// App.js
function App() {
//...
  function handleDeleteSong(title){
    const updatedSongs = songs.filter(song=>!(title in song));
  }
//...
}

Right now this function is creating a new array of songs. It contains all of our original songs except for the one with the title we want to delete. Your first thought might be to just set songs equal to updatedSongs. However, because we want to modify an internal state living in App, this is where our setter function comes in handy.

// App.js
function App() {
//...
  function handleDeleteSong(title){
    const updatedSongs = songs.filter(song=>!(title in song));
    setSongs(updatedSongs); //Updating songs state using our new songs array
  }
//...
}

We are using setSongs to update our internal state to a new array of songs, with our deleted song removed.

We're not quite done yet! We haven't actually called this function anywhere. We want handleDeleteSong to run when we click the delete button next to a song's title. We'll need to access this function from within SongTitles and use it as a callback in a click event listener. We can pass a reference to handleDeleteSong as a prop down to SongTitles. I'm going to call this prop onDeleteSong.

// App.js
function App() {
//...
  return (
    <div className="App">
      <h1>React State Demo</h1>
      <SongTitles titles={titles} onDeleteSong={handleDeleteSong}/>
      <SongArtists artists={artists} />
    </div>
  );
}

Now within SongTitles, we can call onDeleteSong every time we click a delete button.

//SongTitles.js
function SongTitles({ titles, onDeleteSong }) {
  //Added onDeleteSong prop
  const songList = titles.map((title) => (
    <p key={title}>
      {/* Adding click event listener below, passing in title we want to delete */}
      <button onClick={(e) => onDeleteSong(title)}>X</button> {title}
    </p>
  ));
  return (
    <div className="titles">
      <h2>Song Titles</h2>
      {songList}
    </div>
  );
}

This inverses the data flow and triggers a state change in App from its child component SongTitles. This is generally a good strategy to use when you want to update a parent's state from a child.

One great thing about React is that it automatically re-renders a component when its state changes. This means that when we click a delete button, App and its children, SongTitles and SongArtists, will re-render with the updated state.

NOTE: This works because updatedSongs from our handleDeleteSong function is an entirely new array. Because we used the filter method, updatedSongs points to a different place in memory than songs. React does not re-render a component if you attempt to set state with a shallowly unchanged object. If we tried to set state by directly modifying songs (e.g. by using splice() to remove a song from songs), setSongs(songs) would be unsuccessful. Even if we successfully removed an element from songs this way, state would not update and therefore our screen would not be updated to reflect our changes.

Here's a quick demo of our working app:

If you'd like to see the source code for our 3 components, you can check out this github repository.

You can read more about state here.

Beginner's Guide to Debugging (JavaScript)

Kyra HP — Wed, 27 Sep 2023 18:11:13 +0000

Table of Contents:

Printing to the Console
Node Debugger
Chrome Developer Tools Debugger

If you're reading this, you might be a fellow Flatiron School student (👋 hello!) or staring anxiously at your code trying to figure out where it went wrong. Or, perhaps, you're just hoping to discover some useful techniques for debugging your code in the future. In this blog post, I'll review a few methods that I have used to debug my code along with some simple examples to follow along with.

But first, what is debugging and how will it be applicable to you?

Debugging is the process of determining why you are experiencing unexpected results or errors in your code. Regardless of whether you are a student trying to pass unit tests on an assignment or an experienced web developer, debugging will be a critical component of your coding journey. You should not expect all of your code to work on the first try, and errors do not mean that you are a bad developer! In fact, learning how to find bugs is an invaluable skill that will make you a better developer.

A few tips to make your code easier to debug

Make your code as expressive, or as easy to understand, as possible. This could mean labeling variables and functions according to what they do (e.g. using variable names like firstName and lastName rather than string1 and string2). It could also mean using built-in methods (such as Array's map) that hint at what return value to expect.
Similarly, try to have your functions fulfill one main purpose. This will reduce errors and make your code easier to follow.
Declare variables and functions only where they're needed. If variables and functions are accessible by code that doesn't need them (e.g. if they were declared in the global scope unnecessarily), it will be much harder to trace bugs.
Avoid mutating when possible. There are times when you will want to modify an Array or Object's state, but when possible, it's best to nondestructively update them (e.g. by creating copies before modifying). On a related note, it's also safest to declare your variables with const unless you already know that you will reassign the variable throughout your code. This will prevent unintentionally changing the value of a variable, and might instead produce a helpful error like this: Uncaught TypeError: Assignment to constant variable.
Test your code often as you write it. It's much harder to find a bug when you're working with many untested features at a time.

Ok, so now that we've gotten that out of the way, here are a few debugger options. I'll be showing examples using a simple for-loop. Check out the MDN documentation if you need a refresher.

Printing to the Console

You can test your assumptions throughout your code using console.log() statements.

Let's say we have a function that's intended to take an array of students and return a new array with only the students whose names start with 'J'.

const allStudents = ["Alex", "Bill", "Josh", "Sarah", "Joseph", "Jamie"];

function startsWithJ(array) {
  const jStudents = [];
  for (let i = 0; i < array.length; i++) {
    const currentStudent = array[i];
    const firstLetter = currentStudent[1];
    if (firstLetter === "J") {
      jStudents.push(currentStudent);
    }
  }
  return jStudents;
}

startsWithJ(allStudents); 
// => []

When we run our function with our allStudents array passed in, it's returning an empty array. That's not what we were expecting - we wanted it to return ['Josh', 'Joseph', 'Jamie']. You might quickly see where we went wrong, or you might not (and that's ok!). Either way, bear with me while we add console.log() statements to debug this function.

One assumption I have about this code is that it's correctly accessing each element in the allStudents array. I can use console.log() to print each student's name in our original array, like so:

const allStudents = ["Alex", "Bill", "Josh", "Sarah", "Joseph", "Jamie"];

function startsWithJ(array) {
  const jStudents = [];
  for (let i = 0; i < array.length; i++) {
    const currentStudent = array[i];
    console.log(currentStudent); //ADDED LINE
    const firstLetter = currentStudent[1];
    if (firstLetter === "J") {
      jStudents.push(currentStudent);
    }
  }
  return jStudents;
}

startsWithJ(allStudents);
// LOG: Alex
//      Bill
//      Josh
//      Sarah
//      Joseph
//      Jamie 
// => []

Each student's name is correctly being printed to the console, so we know that our for-loop is set up correctly. Let's test another assumption - that we are correctly checking the first letter of each student's name. We can "see what the machine is thinking" (great quote courtesy of Flatiron School) when we access the first letter by printing our firstLetter variable.

const allStudents = ["Alex", "Bill", "Josh", "Sarah", "Joseph", "Jamie"];

function startsWithJ(array) {
  const jStudents = [];
  for (let i = 0; i < array.length; i++) {
    const currentStudent = array[i];
    const firstLetter = currentStudent[1];
    console.log(firstLetter); //ADDED LINE
    if (firstLetter === "J") {
      jStudents.push(currentStudent);
    }
  }
  return jStudents;
}

startsWithJ(allStudents);
// LOG: l
//      i
//      o
//      a
//      o
//      a 
// => []

Here we can see that our assumption was wrong. We are accidentally checking the second letter of each name, and therefore firstLetter === 'J' is never true. We need to change the firstLetter assignment to currentStudent[0] instead of currentStudent[1]. Here's our final result:

const allStudents = ["Alex", "Bill", "Josh", "Sarah", "Joseph", "Jamie"];

function startsWithJ(array) {
  const jStudents = [];
  for (let i = 0; i < array.length; i++) {
    const currentStudent = array[i];
    const firstLetter = currentStudent[0];
    if (firstLetter === "J") {
      jStudents.push(currentStudent);
    }
  }
  return jStudents;
}

startsWithJ(allStudents);
// => [ 'Josh', 'Joseph', 'Jamie' ]

Although this is a fairly simple example, using console.log() to see values of variables, function calls, etc. is a valid way to trace more complex code.

Node Debugger

Now we are moving on to debug tools which allow us to "pause" our code and take a closer look at what's going on at each step. We'll start with the one provided by Node for the terminal (make sure Node is installed!).

First, use your terminal to navigate to the directory where your code is stored. I will use the same function from above, but this time with a different error.

const allStudents = ["Alex", "Bill", "Josh", "Sarah", "Joseph", "Jamie"];

function startsWithJ(array) {
  const jStudents = [];
  for (let i = 0; i <= array.length; i++) {
    const currentStudent = array[i];
    const firstLetter = currentStudent[0];
    if (firstLetter === "J") {
      jStudents.push(currentStudent);
    }
  }
  return jStudents;
}

startsWithJ(allStudents);

When we run this, we get the following error:

const firstLetter = currentStudent[0]; TypeError: Cannot read properties of undefined (reading '0')

Similar to using console.log(), we will choose a place in the code where we want to peek inside and see what's happening. In this case, we'll use the debugger keyword. Because we're seeing that one of the currentStudents is undefined, let's place the debugger statement near the currentStudent variable declaration.

function startsWithJ(array) {
  const jStudents = [];
  for (let i = 0; i <= array.length; i++) {
    const currentStudent = array[i];
    debugger; //ADDED LINE
    const firstLetter = currentStudent[0];
    if (firstLetter === "J") {
      jStudents.push(currentStudent);
    }
  }
  return jStudents;
}

From there, you can start the debugger with the command node inspect index.js in your terminal (use your file's name in place of index.js).

Now run cont at the debug prompt to start the loop. It will pause at your debugger breakpoint. Now we see something like this in our terminal:

break in index.js:7
  5   for (let i = 0; i <= array.length; i++) {
  6     const currentStudent = array[i];
> 7     debugger;
  8     const firstLetter = currentStudent[0];
  9     if (firstLetter === "J") {
debug>

At this debug prompt, let's open the REPL by running repl. From there, we can check the values of variables by entering their names in the terminal. I'll start by checking the value of i and currentStudent.

debug> repl
Press Ctrl+C to leave debug repl
> i
0
> currentStudent
'Alex'

This makes sense! We are in our first iteration of the for-loop, where i should be 0 and currentStudent should be 'Alex' (the first student in our allStudents array). So far so good. To continue stepping through the code to our next iteration, press Ctrl+C to exit the REPL and enter cont at the debug prompt again.

Now when I enter the REPL again, I should be in the second iteration of our for-loop. I can confirm this by checking the values of i and currentStudent again.

debug> repl
Press Ctrl+C to leave debug repl
> i
1
> currentStudent
'Bill'

This also looks correct. I'm going to fast forward to the 6th iteration of our for-loop, where the currentStudent should be 'Jamie'.

debug> repl
Press Ctrl+C to leave debug repl
> i
5
> currentStudent
'Jamie'

All of the is and currentStudents were as expected in each iteration. We still haven't reached an undefined currentStudent. If I step through the code again, I would expect the function to finish as we reached the last person in our allStudents array.

debug> cont
break in index.js:7
  5   for (let i = 0; i <= array.length; i++) {
  6     const currentStudent = array[i];
> 7     debugger;
  8     const firstLetter = currentStudent[0];
  9     if (firstLetter === "J") {
debug> repl
Press Ctrl+C to leave debug repl
> i
6
> currentStudent
undefined

But that's not what happened. Here, the Node debugger showed us that there was another iteration left in our for-loop, which caused the i of 6 to be out of bounds. This is why currentStudent[0] was undefined - because there is no currentStudent at index 6. We can fix our code by removing the = from our for-loop condition.

const allStudents = ["Alex", "Bill", "Josh", "Sarah", "Joseph", "Jamie"];

function startsWithJ(array) {
  const jStudents = [];
  for (let i = 0; i < array.length; i++) {
    const currentStudent = array[i];
    const firstLetter = currentStudent[0];
    if (firstLetter === "J") {
      jStudents.push(currentStudent);
    }
  }
  return jStudents;
}

startsWithJ(allStudents);
// => [ 'Josh', 'Joseph', 'Jamie' ]

The Node debugger is a great tool to check and debug your code, especially if you don't want to make your code messier with console.log() statements.

Chrome Developer Tools Debugger

Chrome's developer tools offer another debug tool that you can use, so long as you have an HTML file connected to your JavaScript file. You can make a basic HTML file that has the sole purpose of attaching your JS file. I attached my JS file by including the following line in my HTML file: <script type="text/javascript" src="index.js"></script>.

For this example, we'll use the same code as above with a slightly different error.

const allStudents = ["Alex", "Bill", "Josh", "Sarah", "Joseph", "Jamie"];

function startsWithJ(array) {
  {const jStudents = [];
    for (let i = 0; i < array.length; i++) {
      const currentStudent = array[i];
      const firstLetter = currentStudent[0];
      if (firstLetter === "J") {
        jStudents.push(currentStudent);
      }
    }
  }
  return jStudents;
}

startsWithJ(allStudents);

I'm going to open the HTML page in Chrome, then access the developer tools by pressing F12.

Dev tools has its own console, which is showing us an error right off the bat: Uncaught ReferenceError: jStudents is not defined. This is occurring at the end of our code where we're trying to return jStudents. Just like with the Node debug tool, I'm going to place a debugger statement in my code where I want to pause and take a closer look. I'll put it towards the beginning of my function.

function startsWithJ(array) {
  {const jStudents = [];
    debugger; //ADDED LINE
    for (let i = 0; i < array.length; i++) {
      const currentStudent = array[i];
      const firstLetter = currentStudent[0];
      if (firstLetter === "J") {
        jStudents.push(currentStudent);
      }
    }
  }
  return jStudents;
}

Now, with the dev tools still open, I'm going to refresh the page. If not already open, go to the Source pane to see your code. The debugger should have paused the code at your debug statement.
If you look to the right, you should see your variable values and information on the call stack.

We can look here to see how the values of our variables (like jStudent) change as we proceed through the code. Instead of typing cont at a debug prompt in terminal, the nice UI of Chrome's debug tool allows us to press buttons to step through the code.

You should be able to see the values of currentStudent, firstLetter, i, and jStudent change as you move through the iterations.

Fast forwarding to the last iteration, jStudents is correctly assigned ['Josh', 'Joseph', 'Jamie']. We know that our for-loop is working properly. But when we continue stepping through each line and we exit the for-loop, you'll notice that jStudents disappeared from our scope tab. jStudents was listed as a block-level variable previously, which suggests it may have accidentally been declared in a scope that we no longer have access to.

Taking a closer look at our code, we can see that our return statement is outside of the code block ({}) where jStudents was declared. To fix our problem, we can put our variable declaration and return statement in the same scope by removing the unnecessary {}.

function startsWithJ(array) {
  const jStudents = [];
  debugger; //ADDED LINE
  for (let i = 0; i < array.length; i++) {
    const currentStudent = array[i];
    const firstLetter = currentStudent[0];
    if (firstLetter === "J") {
      jStudents.push(currentStudent);
    }
  }
  return jStudents;
}

startsWithJ(allStudents);
// => [ 'Josh', 'Joseph', 'Jamie' ]

Wrapping Up

The Chrome debugger is my personal favorite out of these options. I appreciate not having to clear out a bunch of console.log()s when I'm finished, and I think it's a lot more intuitive to use than Node's debugger. Any of these are valid ways to debug your code. You may even want to look into using a debugger built into your development IDE.

You now have the tools to tackle your bugs and thoroughly examine your code. Thanks for reading and good luck!