Forem: ctaylor0326

My Journey as a Student Developer: Building an Online Plant Store with Flask-SQLAlchemy and React.js

ctaylor0326 — Tue, 13 Jun 2023 17:25:36 +0000

Introduction:
Hey there, fellow student developers! Today, I want to share my exciting journey of building an online plant store using Flask-SQLAlchemy as the backend and React.js as the frontend. Join me as I dive into the world of web development and share my experiences, challenges, and triumphs in creating this web application.

First I want to say, this was a team project, and I couldn't have accomplished it without the encouragement and support of my partner. A huge shoutout to Casey, thank you so much for your patience and guidance through this process!

Flask-SQLAlchemy: A Backend Adventure:
As a student developer, I was thrilled to discover the power of Flask-SQLAlchemy – a perfect combination of Flask, a lightweight Python web framework, and SQLAlchemy, a flexible SQL toolkit. Together, they offered me a solid foundation for building the backend of my online plant store.

In my project, I defined models to represent the plants in my inventory and the information about plant owners. With Flask-SQLAlchemy, I created routes to handle the CRUD (Create, Read, Update, Delete) operations, allowing me to focus on the logic of my application. I was able to create routes that enabled me to add new plants, display plant details, update inventory, and even delete plants if needed. The sample code below is the route to view the plant catalog.

class PlantCatalog(Resource):
    def get(self):
        plants = Plant.query.all()
        plant_data = [plant.to_dict() for plant in plants]
        return make_response(jsonify(plant_data), 200)

React.js: Unleashing Creativity on the Frontend:
It had been several weeks since I had been taught about React, so I was eager to refresh my memory and further explore React.js, a JavaScript library known for its reusable component-based architecture. It was the perfect choice for creating an engaging and dynamic frontend for my online plant store.

My partner took the lead on the front end of the project. Using React.js, she started by setting up the project and organizing the components. Drawing inspiration from the guidance of experienced mentors like OpenAI, she crafted UI elements such as plant listings, a shopping cart, and a garden curation form. Each component encapsulated its logic, allowing us to create reusable and efficient code.

Connecting the Dots: Building the API:
As student developers, we initially struggled with connecting our Flask-SQLAlchemy backend with the React.js frontend. However, with determination and the support of our mentors, we were able to build a robust API that acted as a bridge between the two.

We utilized a combination of JavaScript's built-in fetch function as well as the popular library Axios to make HTTP requests from our React.js components. These requests were directed to the appropriate endpoints on my Flask server, where I handled them using Flask-SQLAlchemy. We could retrieve plant data, update inventory, and provide a shopping cart tool to process orders.

Conclusion:
For someone new to web development, building an online plant store with Flask-SQLAlchemy and React.js was great learning experience. The challenges I faced along the way only fueled my determination to overcome them. With the support of my instructor and the knowledge I gained, I successfully created a web application that allows users to explore and curate their own gardens.

To all my fellow student developers out there, I encourage you to embark on your own projects, no matter how big or small. With patience, persistence, and the support of the developer community, you'll unlock your potential and create remarkable web applications. Happy coding, and may your software development journey be filled with exciting discoveries!

Building a Pharmacy App: A Journey into Software Engineering

ctaylor0326 — Mon, 22 May 2023 20:30:32 +0000

Introduction:

As a student at Flatiron School, I recently had the opportunity to dive into the exciting world of software engineering and develop a pharmacy app for a class project. This project challenged me and my teammates to apply our knowledge of programming concepts, user experience design, and database management to create a functional and user-friendly application. In this blog post, I will walk you through the process of creating this pharmacy app, highlighting the key steps and lessons learned along the way.

1. Understanding the Requirements:

The first step in any software development project is understanding the requirements. I collaborated with my classmates and instructors to identify the core features and functionalities the pharmacy app should have. This included basic user authentication, a medication product catalog, basic shopping cart functionality, and order management. We also needed to demonstrate the ability to work with database relationships using table associations and foreign keys, manage ORM using Alembic migrations, and design a CLI user interface with a seamless menu flow.

2. Planning and Designing the App:

Once we had a solid understanding of the project requirements, we began the planning and design phase. We outlined the app's architecture, planned our database structure and table relationships, and discussed the user interface and menu options and flow. This ensured that our team was aligned in terms of the overall app structure and user experience.

3. Setting Up the Development Environment:

Before launching into writing code for the app, we need to set up our development environment. This involved installing the necessary software tools, (Openai, Click, Faker, and Alembic to name a few), configuring a local development server, and establishing a version control repository on Git Hub to facilitate effective progress tracking and seamless collaboration.

4. Database Management:

To store and manage the app's data, we utilized a SQLAlchemy database. I designed the database schema, including tables for users, products, orders, and shopping carts. I leveraged SQL queries and database migrations to ensure data consistency and efficiency. We also created a separate database to store data pertaining to OTC medications. The separate databases were meant to reflect the pharmacy's need for separation of sensitive patient information to comply with HIPAA regulations. I was particularly proud of the fact that we managed to access and manipulate data from more than one database using multiple SQLAlchemy sessions at the same time.

5. Implementing User Authentication:

User authentication was an important aspect of our pharmacy app, but with limited time and knowledge, we decided to keep it simple. Our user authentication feature consists of the ability to create and store user login information and to validate user input to reference the correct patient data in the database. In future development we will include password encryption to make the app more secure.

6. Building the Patient Database and Medication Catalog:

The core of our pharmacy app lay in the tables we created to store patient data and the medication catalog. As a team, we collectively designed and implemented the database schema to store medication details such as name, type, dosage, quantity, and price. By leveraging SQLAlchemy, we collaboratively created a model class for the Patient and Medication tables, empowering us to perform essential CRUD operations and establish relationships with other tables. We also designed a join table called Prescriptions, and designed code that would generate prescription objects linking patients to various medications.

7. Developing the Shopping Cart Function:

To enhance the user experience, we built a basic shopping cart feature that allows patients to add OTC medications to their shopping cart and keep a running total of the price of their items. This feature is limited, but in future development we would like to implement a method to complete the sale of the selected items. We would also like to link the shopping cart to the selected prescription items to be filled, so that the user can purchase OTC medications and fill prescriptions all in one transaction.

8. Testing and Debugging:

Throughout the development process, we conducted rigorous testing and debugging to identify and fix any issues or bugs. We performed unit tests, integration tests, and end-to-end tests to validate the app's functionality and ensure a smooth user experience.

Conclusion:

I am so grateful for the amazing team I worked with on this project, and very proud of our end result. Building this pharmacy app was extremely challenging, but also extremely rewarding experience. It allowed me to test and expand on the knowledge and skills I have gained during my software engineering journey at Flatiron School. From understanding requirements to planning, designing, coding, and testing, each step was essential in creating a functional and user-friendly application. This project not only enhanced my technical proficiency but also reinforced the importance of collaboration, problem-solving, and attention to detail. Thank you to Matt and Derrick for all your hard work!

React routes

ctaylor0326 — Mon, 01 May 2023 15:20:51 +0000

As a student web developer, I have been learning firsthand the importance of having a solid understanding of React routes. With the rise of single-page applications, it has become essential to know how to navigate through different views and pages within a web application.

In this tutorial, I will be discussing React routes and how to implement them in your application. Before we dive in, let's first define what React routes are and why they are important.

React routes are essentially a way to map different URLs to different components in your application. This allows users to navigate between different views and pages without having to perform a full page refresh. React routes also make it easier to manage the state of your application and provide a better user experience.

So, how do we implement React routes in our application? Let's walk through the steps.

Step 1: Install React Router

To get started, you will need to install React Router in your application. You can do this by running the following command in your terminal:

npm install react-router-dom

Step 2: Set up Routes

Once you have installed React Router, you can begin setting up your routes. In your main component, you will need to import the necessary components from React Router:

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

The Router component is used to wrap your entire application and the Switch component is used to match a URL to a specific route. The Route component is used to define a specific route and the component that should be rendered for that route.

Here is an example of how you can set up your routes:

<Router>
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/contact" component={Contact} />
  </Switch>
</Router>

In this example, we have defined three routes: the Home component will be rendered for the root URL, the About component will be rendered for the /about URL, and the Contact component will be rendered for the /contact URL.

Step 3: Set up Navigation

Now that you have set up your routes, you will need to create a navigation menu to allow users to navigate between the different views and pages. You can use the Link component from React Router to create links to your different routes.

Here is an example of how you can set up your navigation:

<ul>
  <li>
    <Link to="/">Home</Link>
  </li>
  <li>
    <Link to="/about">About</Link>
  </li>
  <li>
    <Link to="/contact">Contact</Link>
  </li>
</ul>

In this example, we have created a navigation menu with links to our three routes.

Step 4: Test Your Routes

Once you have set up your routes and navigation, it's time to test your application. Open your application in your browser and click on the different links in your navigation menu to make sure that the correct components are being rendered for each route.

And that's it! You now have a basic understanding of how to implement React routes in your application. Remember, React routes are essential for building single-page applications and providing a better user experience. With a solid understanding of React routes, you can create more complex applications with multiple views and pages.

Using "forEach" versus other loops in JavaScript

ctaylor0326 — Sun, 09 Apr 2023 03:36:33 +0000

As a beginner software developer, one of the most common tasks you'll encounter is iterating over arrays and objects in JavaScript. One way to accomplish this is by using "for" statements, but there's another way that's often more efficient and easier to read: the "forEach" loop.

What is a "forEach" Loop?

A "forEach" loop is a built-in method in JavaScript that allows you to iterate over the elements of an array or the properties of an object. It takes a callback function as an argument and applies it to each element or property in the collection.

Here's an example of how to use a "forEach" loop to iterate over an array of numbers:

let numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
  console.log(number);
});

This code will output:

As you can see, the "forEach" loop applies the function to each element in the array, making it easy to iterate over the collection.

How Does it Compare to Other "For" Statements?

There are several other kinds of "for" statements you can use to iterate over arrays and objects in JavaScript, including "for", "for...in", and "for...of". Here's a quick overview of each:

"for" loop:

This is the most basic kind of loop, and it allows you to iterate over an array using a counter variable.

let numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

The loop starts with a variable "i" initialized to 0, and continues as long as "i" is less than the length of the numbers array. During each iteration of the loop, the console.log() method is used to output the element at the current index of the numbers array, accessed using bracket notation with numbers[i]. The loop then increments the "i" variable by 1 and continues with the next iteration.

The result of this loop would be the same as the forEach example above:

"for...of" loop:

This loop allows you to iterate over the elements of an array or other iterable objects.

let numbers = [1, 2, 3, 4, 5];
for (let number of numbers) {
  console.log(number);
}

In this example, the loop variable "number" is assigned the value of the first element in the numbers array, which is 1. The loop body then logs 1 to the console. The loop variable is then updated to the value of the next element in the array, which is 2. The loop body logs 2 to the console, and so on, until all of the elements in the numbers array have been processed.

Which would again generate:

"for...in" loop:

This loop allows you to iterate over the properties of an object.

let person = {
  name: 'John',
  age: 30,
  gender: 'male'
};

for (let property in person) {
  console.log(`${property}: ${person[property]}`);
}

During each iteration of the loop, the loop variable property is set to the name of the current property, and the console.log() method is used to output the property name and its corresponding value, accessed using bracket notation with person[property].

Which would return:

name: John
age: 30
gender: male

While these "for" statements all accomplish the same goal of iterating over a collection, there are some key differences between them.

The "for" loop is the most basic kind of loop, and it's useful when you need to iterate over an array using a counter variable. However, it's less readable than the other kinds of loops and can be more prone to errors.

The "for...in" loop is useful for iterating over the properties of an object, but it can also include properties that are inherited from the object's prototype, which may not be what you want.

The "for...of" loop is the most modern of the "for" statements, and it's useful for iterating over the elements of an array or other iterable objects. However, it can't be used to iterate over object properties.

Why Use "forEach" Loops?

So why should you use "forEach" loops instead of other "for" statements? There are a few key reasons:

Readability:

"forEach" loops are more readable than other "for" statements because they use a callback function to specify the action to perform on each element or property.

Simplicity:

"forEach" loops are simpler than other "for" statements because you don't need to manually create a counter variable or worry about the syntax of the loop.

Efficiency:

"forEach" loops are often more efficient than other "for" statements because they're optimized for performance by the JavaScript engine. One reason for this is that "forEach" loops are often implemented using lower-level code than traditional "for" loops, which can make them faster. Additionally, "forEach" loops can be parallelized by the JavaScript engine, which means that the engine can run multiple iterations of the loop at the same time, further improving performance.

However, it's worth noting that there are some cases where traditional "for" loops may be more efficient than "forEach" loops. For example, if you need to exit the loop early based on a certain condition, a "for" loop with a break statement may be faster than a "forEach" loop.