DEV Community: caseyconlan

The Journey to My Capstone: A Glimpse Into My Time at Flatiron School

caseyconlan — Fri, 30 Jun 2023 16:25:21 +0000

The clock has been ticking down on my time at Flatiron School, and as I stand on the brink of the next chapter of my life, I can't help but feel a mix of excitement and nostalgia. The past weeks have been nothing short of a whirlwind. Between the exhaustive late-night coding sessions and a strict regime of time management, my journey culminated in the creation of my Capstone project—an application that not only allowed me to apply the skills I've acquired but also provided a tangible representation of my journey thus far.

Breaking the Ice with Time Management
During my capstone journey, the principle that stood out as a cornerstone for me was time management. One of the most effective techniques I adopted was the 50/10 rule, a strategy where I would commit myself to an undisturbed 50 minutes of work, followed by a rejuvenating 10-minute break. I found this method not only kept me focused during work periods, but also helped maintain my energy levels.

The essence of these 10-minute breaks was movement. A quick walk on the treadmill, a few jumping jacks, a brisk yoga stretch, or a couple of minutes of wild dancing were more than enough to get my blood flowing and refresh my brain. This simple method kept me sharp and invigorated throughout my coding sessions.

Mapping Out the Workflow
Another pillar of my success was effectively mapping out my workflow. With a clear, precise plan, I felt equipped to tackle the myriad challenges that the project presented. This strategy was especially useful given the size and complexity of my capstone project.

To begin, I created a comprehensive list of all the features I wanted my app to include. Then, I drafted out how these different features would fulfill the project requirements. I also created mock-ups of my site designs to better visualize my ideas. The final step was the creation of a detailed timeline for small deliverables, acting as stepping stones to achieve the larger goal.

One of the most vital things I learned from the process was that when a piece of code was not working within the allocated 50 minutes, it was best to leave it with a note to revisit later in the day. This allowed me to maintain productivity and often, when I returned to the problematic code later, I had less trouble resolving the issue. I realized that being stubbornly fixated on a problem didn't equate to perseverance. Sometimes, stepping away was not quitting, but rather, a strategic move towards finding a solution.

A Heartfelt Farewell to Flatiron
Flatiron School has been the launchpad for my career in software development, and I could not be more thankful for the experiences I've had, the lessons I've learned, and the people I've met. The rigor, the challenges, the ups and downs, all contributed to my growth and prepared me for the real world of programming.

As I move forward, I take with me a profound sense of gratitude for the Flatiron experience and a head brimming with knowledge and skills that I'm eager to put to use. I am now prepared to embrace the next chapter of my life as a software developer, to continue learning, exploring, and growing in this dynamic, ever-evolving field.

In conclusion, I encourage all aspiring developers to adopt effective time management strategies, map out their workflows meticulously, and above all, remember that stepping back can often be the best way forward. On this journey, there's no giving up, only learning and progressing.

Pivoting to Plantables: A Coding Journey

caseyconlan — Mon, 12 Jun 2023 16:55:52 +0000

During the fourth phase of our coding bootcamp, my group and I embarked on a journey of creation. Our project, originally conceptualized as an interactive game called Plantables, transformed into something much different but just as meaningful – an online storefront for a plant shop. This pivot and the work that followed became a potent lesson in managing expectations and sizing project scopes in alignment with deadlines.

Understanding the Project Management Triangle
The key learning point from this experience can be summarized through the lens of the Project Management Triangle. For those unfamiliar, this concept, also known as the Iron Triangle, includes three key dimensions: scope, cost, and time. The scope entails what needs to be accomplished, the cost refers to the resources required, and the time indicates the deadline or timeframe for completion.

The triangle is "iron" because changing one dimension often impacts the others. For instance, if we increase the scope, we might need more resources (increasing cost) or more time to accomplish the goal. As budding software engineers, it's crucial for us to be well-versed with this concept, as it impacts our ability to deliver successful projects within realistic constraints.

In our case, our original idea for Plantables was too ambitious – a larger scope than we could manage within our given timeframe. Realizing this, we had to pivot our idea and turn it into a plant shop storefront, which was more manageable but still allowed us to apply the skills we learned throughout the bootcamp.

Working with CRUD Operations
As we built the Plantables storefront, we faced a significant hurdle when implementing CRUD (Create, Read, Update, and Delete) capabilities for our app. Specifically, we wanted to apply CRUD to account creation, allowing users to create an account, review account details, update passwords, and delete accounts.

We initially attempted to embed our CRUD operations within the main component, Main.js. However, it didn't work as intended. After much thought and troubleshooting, we decided to move our CRUD operations to the Login component, Login.js, which turned out to be an effective resolution to our problem.

Here's a look at the code we placed on the Login.js component:

const handleNewPlayer = (e) => {
    e.preventDefault();
    if (password !== passwordConfirmation) {
      console.log("Password and confirmation do not match");
      return;
    }
    console.log(`New Player ${firstName} ${lastName} Created! Username: ${username}`);

    const requestData = {
      first_name: firstName,
      last_name: lastName,
      email,
      username,
      password,
    };

    const headers = {
      "X-CSRF-Token": csrfToken,
      "Content-Type": "application/json",
    };

    if (csrfToken) {
      headers["X-CSRF-Token"] = csrfToken;
    }

    axios
      .post("/owners", requestData, {
        withCredentials: true,
        headers: headers,
      })
      .then((response) => {
        // Handle the new player creation response
        setLoggedIn(true); // Assuming that creating a new player logs them in
      })
      .catch((error) => {
        // Handle the new player creation error
      });
  };

  const renderLoginForm = () => (
    <form onSubmit={handleLogin}>
      <label>
        Username:
        <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
      </label>
      <label>
        Password:
        <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      </label>
      <button type="submit">Log In</button>
      <button className="button-1" role="button" onClick={handleForgotPassword}>Forgot Password</button>
      <button className="button-1" role="button" onClick={handleDeleteAccount}>Delete Account</button>
  </form>
  );

  const handleForgotPassword = (e) => {
    e.preventDefault();

    axios
        .post("/forgot-password", { username }, {
            headers: {
                "X-CSRF-Token": csrfToken,
                "Content-Type": "application/json",
            },
        })
        .then((response) => {
            // Prompt the user to enter a new password
            const new_password = window.prompt('Enter a new password:');

            // Update the password on the server
            axios
                .patch("/update-password", { username, new_password }, {
                    headers: {
                        "X-CSRF-Token": csrfToken,
                        "Content-Type": "application/json",
                    },
                })
                .then((response) => {
                    console.log(response.data);
                })
                .catch((error) => {
                    console.log(error);
                });
        })
        .catch((error) => {
            console.log(error);
        });
};

const handleDeleteAccount = (e) => {
  e.preventDefault();

  const requestData = {
    username,
    password,
  };

  const headers = {
    "X-CSRF-Token": csrfToken,
    "Content-Type": "application/json",
  };

  axios
    .post("/delete-account", requestData, {
      headers,
      withCredentials: true,
    })
    .then((response) => {
      if (response.data.message === 'Account deleted successfully') {
        setLoggedIn(false);
      } else {
        console.log('Invalid username or password');
      }
    })
    .catch((error) => {
      console.log('Delete account error:', error);
    });
};

  const renderNewPlayerForm = () => (
    <form onSubmit={handleNewPlayer}>
      <label>
        First Name:
        <input
          type="text"
          value={firstName}
          onChange={(e) => setFirstName(e.target.value)}
        />
      </label>
      <label>
        Last Name:
        <input
          type="text"
          value={lastName}
          onChange={(e) => setLastName(e.target.value)}
        />
      </label>
      <label>
        Email:
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </label>
      <label>
        Username:
        <input
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
      </label>
      <label>
        Password:
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </label>
      <label>
        Confirm Password:
        <input
          type="password"
          value={passwordConfirmation}
          onChange={(e) => setPasswordConfirmation(e.target.value)}
        />
      </label>
      <button type="submit">Create New Player</button>
    </form>
  );

  return (
    <>
      <div className="title">Welcome to Plantables!</div>
      <div className="description">Grow your plants with love</div>
      <div>
        <button className="button-1" role="button" onClick={() => handleFormType("login")}>Returning Customer</button>
        <button className="button-1" role="button" onClick={() => handleFormType("newPlayer")}>New Customer</button>
        {formType === "login" && renderLoginForm()}
        {formType === "newPlayer" && renderNewPlayerForm()}
      </div>
    </>
  );
};

In this component, we handled the creation of new players, rendering of the login form, the 'forgot password' functionality, account deletion, and the form for new players. All the functions are well encapsulated, easy to follow, and now placed in an appropriate component.

Through this exercise, we learned the importance of appropriate component architecture, and how that can significantly impact the functioning and usability of our application.

Wrapping Up
Our journey with the Plantables project was enlightening and challenging, but it was well worth it. We grappled with project management principles, wrestled with the intricacies of component placement and CRUD operations, and learned to adapt our ambitions to meet the constraints of time.

Ultimately, this project was a testament to the iterative nature of software development. It emphasized that the initial idea, though important, is not set in stone. Instead, it can, and often should, evolve based on the constraints and opportunities that become apparent as we delve into the process of bringing it to life.

The real achievement lies not in clinging to the original idea but in creating something functional, learning new skills, and growing as a developer. And that, indeed, is a valuable lesson for all of us in this coding bootcamp.

We encountered and overcame challenges in implementing CRUD functionalities to our app, but through those hurdles, we expanded our understanding of proper component placement and the efficient application of CRUD operations. This experience not only bolstered our technical skills but also reinforced the importance of resilience and adaptability in the face of challenges.

This iterative process of planning, coding, testing, and refining is the heart of software engineering. It's what turns a good idea into a great application, and it's what turns a coding bootcamp student into a future-ready software engineer.

To wrap up, the Plantables project was a challenging but rewarding ride. It served as a reminder of the importance of realistic project scope and time management, and it solidified our understanding of core principles in software development. It was a truly enriching experience that we'll carry forward in our journey as budding software engineers.

How to Survive Phase III of Flatiron School

caseyconlan — Fri, 19 May 2023 18:33:42 +0000

Another month, another phase of Flatiron! This time around, we studied Python. This took the place of the Ruby phase in Flatiron. In a way, we learned along with the professors. It was a lot of trial and error, but I think we adapted, overcame, improvised. It was definitely helpful that I had a knack for Python from the bat, where I greatly struggled with JavaScript and React before. Python came a lot more naturally. Maybe it is my data background, or perhaps I remembered more from my 1 semester in grad school using Python than I realized. Either way, I'm not questioning it, I just took the W and ran.

I passed the coding challenge on my first attempt, more on that later. The project has also been going well. I find that with the Flatiron projects, it is paramount to start with a project outline before even setting up an environment. But that's just good project planning. I recommend to anyone going into coding to also study best practices in project management. Even if you do not want to be a project manager in the traditional or formal sense, it's invaluable skills that will make your life as a student and professional immensely easier. Use the table I have provided below to plan your projects. Also, see the list of phases in the project life cycle. You may think project planning is intuitive, but I think most people will find there are skills and steps they would not have thought of prior to researching it.

Initiation:
In this phase, the project is conceptualized and defined. The project's purpose, objectives, feasibility, and potential risks are assessed.
The project sponsor or stakeholders provide the initial authorization and resources to proceed.
The project team is identified, and a project manager may be appointed.

Planning:
This phase involves creating a detailed plan outlining project objectives, deliverables, timelines, resources, and budget.
The project scope is defined, requirements are gathered, and a work breakdown structure (WBS) is developed.
Risk assessment and management strategies are established.
The project plan is documented and shared with the stakeholders for approval.

Execution:
The execution phase is where the actual project work takes place.
Resources are allocated, tasks are assigned, and the project team begins executing the project plan.
Regular communication and collaboration among team members and stakeholders are crucial during this phase.
Progress is monitored, and adjustments are made as necessary to keep the project on track.

Monitoring and Control:
This phase involves tracking and monitoring project progress, performance, and quality against the planned objectives.
Key performance indicators (KPIs) are measured, and project data is collected and analyzed.
Changes and deviations from the project plan are identified, and corrective actions are taken to address issues and risks.
Regular project status updates and reporting are provided to stakeholders.

Closure:
The closure phase signifies the completion of the project.
Final deliverables are reviewed and verified against the project's requirements and objectives.
Project documentation, lessons learned, and best practices are documented and archived for future reference.
Formal project closure reports are prepared, and project stakeholders are notified.
Resources are released, contracts are closed, and the project team is disbanded.

Once these steps are taken, you are ready to start your Python project! Funny enough, I think the most difficult part of this project was the set up of the environment. My group ran into a lot of issues with it. We asked the professor for more help in the initial setup than we did for actual coding issues. To help you avoid that headache, I have provided the steps that I follow to setup Python environments in VSCode here. These are the steps I'm taking for all Python projects going forward:

Step 1: Install Python
First, ensure that Python is installed on your computer. You can download the latest version of Python from the official Python website (https://www.python.org/downloads/) and follow the installation instructions for your operating system.

Step 2: Choose an Integrated Development Environment (IDE)
An IDE provides a comprehensive environment for coding, debugging, and managing projects. There are several popular options available, including:
PyCharm (https://www.jetbrains.com/pycharm/)
Visual Studio Code (https://code.visualstudio.com/)
Atom (https://atom.io/)
Sublime Text (https://www.sublimetext.com/)
Choose an IDE that suits your preferences and install it on your computer.

Step 3: Create a Project Directory
Decide on a location on your computer where you want to create your project. This will serve as the root directory for your project.
Create a new folder/directory in the chosen location. Give it a meaningful name that represents your project.

Step 4: Set Up a Virtual Environment (optional but recommended)
A virtual environment provides an isolated space to work on your project, separating its dependencies from the system Python installation and other projects.
Open a command prompt/terminal and navigate to your project's directory.
Run the following command to create a virtual environment:
python -m venv myenv
Replace myenv with a name of your choice.

Activate the virtual environment:
For Windows:
myenv\Scripts\activate

For macOS/Linux:
source myenv/bin/activate

Step 5: Install Packages and Dependencies
Depending on your project's requirements, you may need to install additional packages or dependencies. You can use the package manager pip to install packages.
With your virtual environment activated, run the following command to install a package:
pip install package_name

Replace package_name with the name of the package you want to install. Repeat this step for each package you need.

Step 6: Start Coding
Open your chosen IDE and create a new file within your project directory.
Write your Python code in the file and save it with a .py extension.
You can now start coding, building your project, and running your Python scripts.

Step 7: Managing Project Structure
As your project grows, you may want to organize your code into multiple files or directories.
Create additional directories and files within your project directory to structure your code in a logical manner.
For example, you can create a directory for modules, a directory for tests, and so on.

Once you have this, you are off to the races! Combine your knowledge from your learning with this tutorial to create the best Python project you can. Happy coding!

How to Survive Phase 2 of Flatiron School Software Engineering

caseyconlan — Fri, 28 Apr 2023 14:56:11 +0000

As an aspiring web developer, my journey with the Flatiron School has been both challenging and fulfilling. In Phase 1 of the program, I learned JavaScript, which was a difficult but necessary foundation for what was to come in Phase 2.

In Phase 2, we delved into ReactJS, a popular JavaScript library for building user interfaces. To my surprise, learning ReactJS went much smoother than learning JavaScript in Phase 1. Perhaps it was because I had a better grasp of the basics, or maybe it was because the Flatiron instructors had honed their teaching techniques. Either way, I was excited to dive deeper into the world of web development.

During Phase 2, I particularly enjoyed learning about the most efficient ways to store code to manage it. This involved breaking up different JavaScript files and utilizing components in React. It was fascinating to see how everything could be organized and streamlined to make it easier to read and maintain.

However, even with these newfound skills, I still had some challenges to overcome. In the first challenge, I struggled to weave everything together. While I had picked up the concepts, I found it difficult to apply them in a practical setting. As a result, I had to retake the challenge.

But here's the thing: I thrived on the code challenge retake. I took what I had learned and applied it with renewed vigor. And it paid off. I was particularly proud of my code for the form because I had to do some troubleshooting for it. It was a small victory, but it gave me the confidence boost I needed to continue on.

An interesting issue I ran into, which I have not encountered before, came with the form component of the challenge. For the life of me, I could not get the entries of the form to appear in the transactions list without refreshing the page. It was not until the last 10 minutes of the challenge that I solved the problem. Below is a list of the steps I took to solve it, and the code that was produced:

Adding a new state variable latestTransactionId that initially has a value of 0
Updating the useEffect that fetches the transactions to also set the latestTransactionId state variable to the ID of the latest transaction
Updating the addTransaction function to also set the latestTransactionId state variable to the ID of the newly added transaction
Adding a new useEffect that fetches transactions whenever the latestTransactionId state variable changes
In the new useEffect, checking that latestTransactionId is greater than 0 before fetching transactions, to avoid fetching transactions unnecessarily on the initial render
In the new useEffect, fetching transactions from the API using the _start parameter to only get transactions with an ID greater than latestTransactionId, and updating the state with any new transactions fetched

import React, { useState, useEffect } from "react";
import TransactionsList from "./TransactionsList";
import Search from "./Search";
import AddTransactionForm from "./AddTransactionForm";

function AccountContainer() {
  const [transactions, setTransactions] = useState([]);
  const [searchTerm, setSearchTerm] = useState("");
  const [latestTransactionId, setLatestTransactionId] = useState(0);

  useEffect(() => {
    fetch("http://localhost:8001/transactions")
      .then((response) => response.json())
      .then((data) => {
        setTransactions(data);
        setLatestTransactionId(data[data.length - 1].id);
      });
  }, []);

  const addTransaction = (formData) => {
    fetch("http://localhost:8001/transactions", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(formData),
    })
      .then((response) => response.json())
      .then((data) => {
        setTransactions([...transactions, data]);
        setLatestTransactionId(data.id);
      });
  };

  useEffect(() => {
    if (latestTransactionId > 0) {
      fetch(`http://localhost:8001/transactions?_start=${latestTransactionId}`)
        .then((response) => response.json())
        .then((data) => {
          if (data.length > 0) {
            setTransactions([...transactions, ...data]);
            setLatestTransactionId(data[data.length - 1].id);
          }
        });
    }
  }, [latestTransactionId]);

  const handleSearch = (searchTerm) => {
    setSearchTerm(searchTerm);
  };

  const filteredTransactions = transactions.filter((transaction) =>
    transaction.description.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div>
      <Search handleSearch={handleSearch} />
      <AddTransactionForm addTransaction={addTransaction} />
      <TransactionsList transactions={filteredTransactions} />
    </div>
  );
}

export default AccountContainer;

import React, { useState } from "react";

function AddTransactionForm({ addTransaction }) {
  const [formData, setFormData] = useState({
    date: "",
    description: "",
    category: "",
    amount: "",
  });

  const handleInputChange = (event) => {
    setFormData({ ...formData, [event.target.name]: event.target.value });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    const { date, description, category, amount } = formData;
    const newTransaction = { date, description, category, amount: Number(amount) };
    addTransaction(newTransaction);
    setFormData({
      date: "",
      description: "",
      category: "",
      amount: "",
    });
  };

  return (
    <div className="ui segment">
      <form className="ui form" onSubmit={handleSubmit}>
        <div className="inline fields">
          <input
            type="date"
            name="date"
            value={formData.date}
            onChange={handleInputChange}
          />
          <input
            type="text"
            name="description"
            placeholder="Description"
            value={formData.description}
            onChange={handleInputChange}
          />
          <input
            type="text"
            name="category"
            placeholder="Category"
            value={formData.category}
            onChange={handleInputChange}
          />
          <input
            type="number"
            name="amount"
            placeholder="Amount"
            step="0.01"
            value={formData.amount}
            onChange={handleInputChange}
          />
        </div>
        <button className="ui button" type="submit">
          Add Transaction
        </button>
      </form>
    </div>
  );
}

export default AddTransactionForm;

All in all, Phase 2 of the Flatiron course has been a valuable learning experience for me. I'm excited to see what's next in store and can't wait to continue honing my skills as a web developer.