DEV Community: Devincb93

Creating a Project from Start to Finish: A Step-by-Step Guide

Devincb93 — Tue, 01 Oct 2024 08:12:14 +0000

I recently had a conversation with a friend who was a bit confused about how to create a project from start to finish. We all know there are tons of templates out there, but it can get overwhelming trying to figure out which one to use. So, I thought I’d share my approach to simplify the process!

Step 1: Setting Up Your Project with Vite(I found out it's pronounced Vit not Veet)
I love using Vite to kick off my projects because it’s straightforward and efficient. Let’s create a project called Spice-Rack:

mkdir spice-rack
cd spice-rack

This will create an empty folder to start with. Now, let’s initialize our Vite project:

npm create vite@latest

You’ll be prompted to choose a framework; I usually go with React, but feel free to pick whatever suits your needs. Next, select your language of choice—I'll stick to simple vanilla JavaScript.

After that, your project folder will fill up with files. To keep things organized, let’s install the necessary dependencies:

npm install

Step 2: Organizing Your Project Structure
Now that our dependencies are installed, let’s organize our files. I like to create a folder named frontend to hold all my frontend components:

mkdir frontend

Drag all your installed files (except .gitignore) into this frontend folder for easier accessibility.

Step 3: Version Control with Git
Next, let’s ensure our project is version-controlled. Run:

git init

This command sets up a new Git repository in your project folder, allowing you to track changes effectively. Then, add all your files:

git add --all

Commit your changes with a message:

git commit -m 'initial commit'

Now, head over to your GitHub account, click the “+” in the top right corner, and select New Repository. You can choose to make it public or private and name it whatever you like. Make sure to uncheck "Initialize this repository with a README" since we already have one and click Create Repository.

Once created, copy the provided URL and run:

git remote add origin git@github.com:your-username/your-project-name.git

Finally, push your changes to GitHub:

git push -u origin main

Step 4: Setting Up the Backend
Now that our frontend is live on GitHub, let’s integrate our backend. Create a new folder named backend in your project directory:

mkdir backend

cd backend

Create a virtual environment using Pipenv:

pipenv install

Then, install Flask:

pipenv install Flask

Step 5: Configuring Your Flask App
Let’s create a config.py file to facilitate communication between our frontend and backend. Here’s a template you can customize:

from flask import Flask
from flask_cors import CORS
from flask_migrate import Migrate
from flask_restful import Api
from flask_sqlalchemy import SQLAlchemy
from sqlalchemy import MetaData

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

metadata = MetaData(naming_convention={
    "fk": "fk_%(table_name)s_%(column_0_name)s_%(referred_table_name)s",
})
db = SQLAlchemy(metadata=metadata)
migrate = Migrate(app, db)
db.init_app(app)

api = Api(app)

CORS(app, resources={r"/api/*": {"origins": "*"}})

Step 6: Creating Your First API Endpoint
Now, let’s create an endpoint that our frontend can use. Create an app.py file in the backend folder and add the following code:

from config import app

@app.route('/api/spices', methods=['GET'])
def get_spices():
    spices = [
        {"name": "Basil"},
        {"name": "Cilantro"},
        {"name": "Rosemary"}
    ]
    return {"spices": spices}

if __name__ == '__main__':
    app.run(debug=True)

This simple endpoint returns a list of spices, which can easily be fetched by your React app.

And there you have it! You’ve now set up a project from scratch with a frontend in React and a backend in Flask, complete with Git version control and a simple API endpoint.

I hope this helps demystify the process for those who might be feeling lost! If you have any questions or tips of your own, feel free to share in the comments! 💬

How to Set Up a Backend Server with Flask for Your Full Stack Application

Devincb93 — Thu, 05 Sep 2024 07:02:45 +0000

When building a full stack application, it's essential to understand that these apps have two main components: the frontend (what users see and interact with) and the backend (which handles the logic, database interactions, and communication between the frontend and the server).

In this post, I'll guide you through setting up the backend server using Flask, a lightweight and versatile Python web framework. While we won't cover the entire full stack setup, this will give you a solid foundation for building the backend of your application.

To get started, you'll need to install Flask. You can do this by running the following command in your terminal:

pip install Flask

A well-structured backend makes your application more maintainable and easier for other developers to understand. Here’s a basic structure I like to use:

app.py – The main entry point of your application.
config.py – For storing configuration settings.
models.py – Where your database models live.
seed.py – Optional, but useful for populating your database with initial data.

Let’s break down these files:

The config.py file is where you define the settings for your application. This includes setting up the database and enabling Cross-Origin Resource Sharing (CORS) for communication between your frontend and backend. CORS is crucial when your frontend and backend are hosted on different domains, allowing them to interact securely.

Here’s a basic example of what your config.py might look like:

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///app.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
app.config['SECRET_KEY'] = 'edikeyted'

account_sid = 'AC23debc44a9e96efddf2d1e91b210f9ec'
auth_token = '7b61474dd955a4b6a31a8ccde84d3bce'
client = Client(account_sid, auth_token)


app.json.compact = False

# Define metadata, instantiate db
metadata = MetaData(naming_convention={
    "fk": "fk_%(table_name)s_%(column_0_name)s_%(referred_table_name)s",
})
db = SQLAlchemy(metadata=metadata)
migrate = Migrate(app, db)
db.init_app(app)

# Instantiate REST API
api = Api(app)

# Instantiate CORS
CORS(app, resources={r"/*": {"origins": "*"}}, supports_credentials=True)

The app.py file is where you define the routes (or endpoints) that handle requests from the frontend. For example, if you have a table of dogs in your database and want to retrieve specific dogs based on their breed, you can create an endpoint like this:

class GetDogsByBreed(Resource):
    def get(self, breed):
        dogs = Dogs.query.filter(Dogs.breed == breed).all()
        dogs_dict_list = [dog.to_dict() for dog in dogs]  # Convert to JSON-friendly format
        return dogs_dict_list, 200

api.add_resource(GetDogsByBreed, '/dogs/<string:breed>')

if __name__ == '__main__':
    app.run(debug=True)

In the example above, the GetDogsByBreed class handles GET requests to fetch dogs of a specific breed from the database. It takes the breed as a parameter from the frontend, queries the database for matching records, converts them to a JSON format, and sends the data back to the frontend.

This is just one example of how you can structure your backend with Flask. Once you have this basic setup, you can expand it by adding more routes, integrating authentication, and connecting it to your frontend built with React.

Setting up the backend of a full stack application is a critical step in the development process. By organizing your code, properly configuring your application, and creating efficient endpoints, you’ll be well on your way to building a robust and scalable app. In future posts, you can expand on this by covering how to connect your Flask backend to a React frontend or deploy your full stack application.

Feel free to experiment with this setup and customize it to fit the needs of your specific project. Happy coding!

Serialization Rules: Your Secret Weapon Against Recursion Errors

Devincb93 — Fri, 16 Aug 2024 13:32:37 +0000

So, let's dive into serialization errors in models and explore how proper serialization rules can help us dodge those annoying recursion errors.

Recently, I kicked off a project involving four different models. It didn't take long to realize the critical role of serialization rules. Believe me, you can't afford to skip them! Let me break down why they’re absolutely essential.

The Issue with Circular References

Imagine you have two tables: User and Recipe. You set up a relationship where a User can create multiple Recipes, and each Recipe references back to the User who created it. This bi-directional relationship creates a circular reference between the two tables. The trouble starts when you try to serialize this data.

Here’s the catch: If you’re serializing the User, it includes a list of Recipes. Now, when serializing each Recipe, it refers back to the User. This creates a loop. The User references Recipes, and each Recipe references the User, which can keep going around in circles. This loop can lead to recursion errors, where your serializer gets stuck in an infinite loop trying to resolve these references.

How Serialization Rules Come to the Rescue

Serialization rules are designed to handle these kinds of issues. They prevent the serializer from falling into an infinite loop by managing how data is included and referenced. Here’s how they help:

Avoiding Redundant Data: Serialization rules allow you to specify which parts of the model should be included in the output. By carefully selecting fields and relationships to include, you prevent the serializer from repeatedly including the same data and causing a loop.

Limiting Depth: One common technique is to limit the depth of serialization. Instead of including nested relationships infinitely, you can define how deep the serializer should go. For example, you might serialize a User with basic information and a list of Recipe IDs, but not include the full details of each Recipe in the User’s serialization.

Custom Serialization: Many frameworks let you define custom serialization methods. These methods let you control exactly how each model is converted into JSON. For instance, you can create a serializer that explicitly excludes recursive relationships or formats data in a way that breaks the loop.

Serializer Libraries: Using libraries like Marshmallow in Python, you can define schemas that handle complex serialization scenarios. These libraries offer powerful tools to control how data is serialized and avoid recursion problems by specifying what to include and how to handle references.

In Summary

Serialization rules aren’t just a nice-to-have; they’re crucial for managing complex data relationships and avoiding recursion errors. By carefully designing your serialization logic, you ensure your data is efficiently and correctly serialized without running into endless loops. So, whether you’re working with a handful of models or a complex data schema, implementing these rules will save you from a lot of headaches down the road. Happy coding!

SQL

Devincb93 — Sat, 15 Jun 2024 23:50:26 +0000

SQL, or Structured Query Language, is a powerful programming language used primarily for managing and manipulating databases. It's an invaluable tool for inserting, modifying, and even deleting data within databases.

Recently, I embarked on a project to create a simple Library database system. This project highlighted the critical role SQL plays in database management. Without SQL, it wouldn't have been possible to efficiently handle the various data operations needed for the system. During my journey, I faced a few challenges when learning SQL—because who doesn't have trouble when they first start learning something?

The main issue I encountered was surprisingly related to using ORM (Object-Relational Mapping) methods. I kept trying to create new functions for methods that were already available in the ORM. It was like reinventing the wheel without realizing the tools already at my disposal. Once I took a step back and thought, "Why am I doing this?" I immediately started to see the true power in SQL and ORM. The 'Aha' moment finally clicked. My project suddenly became much easier to manage and create. I never knew it could be this easy; honestly, I wished I had figured it out sooner.

What are ORM Methods?
Object-Relational Mapping is a technique software developers use to interact with databases using their preferred programming language. In my case, it's Python. Instead of having to write redundant code, like the snippet below:

def grab_authors():
    authors = []
    for author in Author.all_authors:
        if author.name not in authors:
            authors.append(author.name)
    return authors

ORM bridges the gap between writing such repetitive code and being able to easily manipulate a database with simple methods. Developers can use these methods to create, read, update, and delete functions effortlessly. Let's break down CRUD, which stands for 'create, read, update, and delete', below:

Create Operation
The create operation simplifies the process of adding new objects or items to the database. With the power of SQL's 'INSERT' commands, ORM makes it easier and more efficient to manage databases. In many ORMs, the objects or items can be saved to the database using the save() method, which consists of the create operation.

Read Operation
The read operation consists of methods like get(), filter(), and all(). These methods make retrieving objects easier. For example, get() allows us to grab a single object based on a criterion; in the case below, it would be the name of the author:

author = Author.get(name="Christopher Paolini")
return author

The filter() method lets us retrieve objects based on certain criteria and can return more than one object. Suppose we have a library of books associated with our authors, and we want to grab all the books that have the ID connected to a specific author:

books_written = Book.filter(author_id=2)
return books_written

This code would return all the books with the author_id of 2, which we will say is Christopher Paolini.

Update Operation
The update operation helps update or modify existing data in the database. It is straightforward and typically involves retrieving the object, changing its attributes, and saving the changes.

Delete Operation
The delete operation is used for removing objects from the database. For example, we can first filter the author we want to delete:

filtered_author = Author.filter(id=1)

Then, we use the delete operation to remove it from our database:

Author.delete(filtered_author)

Conclusion
CRUD operations make managing databases much simpler, and I've gained a deeper appreciation for SQL and its capabilities. SQL simplifies complex data manipulations, making it easier to work with databases. It allows for powerful querying capabilities that streamline the handling of large datasets, which is crucial and useful for making tasks easier in the long run.

If you're working on any project involving data, mastering SQL is a game-changer. I hope someone out there finds this interesting and starts dabbling with SQL themselves.

Props Unpacked: The Magic Behind Data Flow in Components

Devincb93 — Sat, 24 Feb 2024 01:29:01 +0000

So, what's the deal with props? In the simplest terms, props, or properties if you're not into the whole brevity thing, are how you pass data from a parent component down to a child component. This is super handy for shuffling information between different sections of your project. But here's the kicker: props aren't just one-trick ponies; they're all about that reusability life, making them total rockstars in the component world.

Let's break it down with an example that's close to every gamer's heart: Pokémon. Say you've got your main App component that's keeping tabs on all your Pokémon. You can set up a state here and, like passing the baton in a relay race, hand off the setter function to a child component called PokemonContainer. This is where it gets interesting. PokemonContainer grabs that prop, runs with it, and sorts those Pokémon to display them just the way you want.

But wait, it gets better. That very same prop you handed off to PokemonContainer? You can pass it down further to a completely different component, or even a sub-component of PokemonContainer, without breaking a sweat.

Imagine we've got another component in the mix, dubbed PokemonSorter. This little wizard takes the prop straight from the App component, just like PokemonContainer did, and does its own magic trick. Maybe it sorts Pokémon by type, or power, or whatever criteria you fancy.

Now, I know what you're thinking. "Isn't that basically the same thing but with a different twist?" And yeah, you're not wrong. The outcome might seem similar, but that's exactly my point. Props are all about giving you the flexibility to manipulate and display your data in as many ways as you can dream up. They're like the Swiss Army knife in your development toolkit.

So, while my Pokémon example might not win any awards for originality, it perfectly illustrates the power of props. They're not just about passing data around; they're about opening up a world of possibilities for your components to interact, share, and thrive together. And that, my friends, is the true magic of props in the world of component-based development.

The Magic of Event Listeners

Devincb93 — Fri, 20 Oct 2023 02:45:44 +0000

As I delve further into the tech world, I've come to realize the vast array of functionalities that code can provide. Among these, event listeners stand out as a crucial tool that can be leveraged to enhance user interaction and engagement. In this blog post, we'll delve into the world of event listeners with a focus on the following key types:

1. Mouseover: The 'mouseover' event listener allows developers to create subtle interactive effects when a user hovers their cursor over an element. This is particularly useful for enhancing user experience on websites and applications, making them more intuitive and engaging.

2. Mouseout: Complementing the 'mouseover' event is 'mouseout,' which triggers actions when a user moves their cursor away from an element. This event can be employed to provide feedback or to restore an element to its initial state, contributing to a polished user interface.

3. Click: The 'click' event listener is a fundamental component of user interface design. It enables developers to respond to user input, creating interactive elements that respond with precision when users click on buttons, links, or other interactive components.

4. Submit: When it comes to forms and data submission, the 'submit' event listener is indispensable. It facilitates the handling of form submissions, ensuring that data is processed accurately and efficiently, which is crucial for businesses collecting user information or feedback.

Event listeners play a critical role in shaping user experiences and adding functionality to web applications. By mastering these tools, developers can create polished, user-friendly interfaces that meet the needs of businesses and their customers. Stay tuned as we explore further aspects of the coding world, uncovering valuable tools and techniques that can drive success in the competitive tech landscape.

The Thrills and Challenges of Learning to Code: A Journey of Discovery

Devincb93 — Sat, 07 Oct 2023 21:18:38 +0000

Embarking on a journey into the world of coding has been an exhilarating rollercoaster ride. While it hasn't always been a bed of roses, it's a journey filled with excitement, challenges, and the joy of solving complex problems. In this blog post, I'll share my experiences and thoughts on the process of learning to code, with some recent insights added to the mix.

The Joy of Uncovering Complexity:
First and foremost, let's be clear about one thing: coding is fun. The real thrill emerges when you begin to unravel the intricacies of this digital universe. With every concept you grasp, your interest in coding deepens. It's like putting together a complex puzzle, with each piece contributing to the grander picture of your coding expertise.

Learning Through Exploration:
One habit I've cultivated along this journey is spending countless hours on YouTube, immersing myself in coding tutorials and demonstrations. These videos are windows to the vast world of possibilities that coding offers. While I don't remember every detail from those videos, I get a rush from grasping the parts I do understand. It's akin to being a detective, peeling back the layers to reveal the inner workings of a complex machine.

Eureka Moments in My Journey:
Recently, a significant turning point occurred in my coding adventure. It was like a series of "Eureka" moments rolled into one. I was working on a project, and it acted as a catalyst for understanding many concepts that had been floating around in my head. It felt like these learnings were permanently etched into my brain.

I faced a particular challenge with code optimization. I wanted to make my code more concise and readable. This endeavor wasn't without its frustrations. I ended up restarting my code at least three times, which, believe me, was quite frustrating. However, with each fresh start, I delved deeper and acquired a little more knowledge.

In conclusion, my journey into the world of coding is marked by unending excitement, a fair share of challenges, and the immense satisfaction that comes from solving complex problems. Coding isn't always a straightforward path, and sometimes you have to rewrite your story from scratch. But with every rewrite, you dive deeper into the code, enhancing your understanding.

So, while the journey might not always be rosy, it's a thrilling and rewarding one. It's a continuous process of discovery and learning, and I can't wait to see what exciting projects I'll be able to create as I keep exploring this fascinating world of coding.