DEV Community: Matt Tran

How to Start a React Project from Scratch with Git and GitHub

Matt Tran — Thu, 23 Jan 2025 17:05:24 +0000

Setting up a React project from scratch can seem daunting, but with this guide, you’ll have a clean and organized workflow that’s easy to replicate for any new project. Follow these steps for a structured and efficient setup.

Step 1: Prepare Your Environment

Before starting, ensure you have:

Node.js and npm installed: Download Node.js
A GitHub account to host your remote repository.
A terminal or command prompt for commands.

Step 2: Create a New React Project

Navigate to Your Working Directory: Open your terminal and move to the directory where you want to create your project:

   cd /path/to/your/projects

Create the React App Using Vite: Run the following command to set up a React project with Vite:

   npm create vite@latest project-name -- --template react

Replace project-name with the desired name for your project.

Navigate Into Your Project Directory:

   cd project-name

Install Dependencies:

   npm install

Step 3: Initialize Git Locally

Initialize Git:

   git init

Stage All Files: Add all project files to Git’s staging area:

   git add .

Commit the Changes: Commit the files with an initial message:

   git commit -m "Initial commit"

Step 4: Create a Remote Repository on GitHub

Log in to your GitHub account.
Click the + icon in the top-right corner and select New Repository.
Fill out the details:
- Repository Name: Match it with your project name.
- Visibility: Choose Public or Private.
- Do NOT initialize with a README or .gitignore to avoid conflicts.
Click Create Repository.
Copy the repository’s SSH or HTTPS URL (e.g., git@github.com:yourusername/repository-name.git).

Step 5: Link Local Repository to Remote

Add the Remote Repository: Link your local project to the remote repository:

   git remote add origin git@github.com:yourusername/repository-name.git

Verify the Remote Link: Check if the remote is set up correctly:

   git remote -v

You should see something like this:

   origin  git@github.com:yourusername/repository-name.git (fetch)
   origin  git@github.com:yourusername/repository-name.git (push)

Push Your Local Repository to GitHub: Push your code to the remote repository:

   git push -u origin main

Step 6: Project Structure

After the setup, your project folder should look like this:

project-name/
├── node_modules/     # Dependencies
├── public/           # Static assets like images
├── src/              # React source code
│   ├── App.jsx       # Main App component
│   ├── main.jsx      # React entry point
│   ├── App.css       # Component-specific styles
│   ├── index.css     # Global styles
├── .gitignore        # Files to ignore in Git
├── package.json      # Project metadata and dependencies
├── README.md         # Project description
├── vite.config.js    # Vite configuration

Step 7: Start the Development Server

Run the Development Server: Start your React app:

   npm run dev

Open Your App in a Browser: Vite will display a URL in the terminal (e.g., http://localhost:5173). Open it in your browser to see your app running.

Step 8: Next Steps

Customize Your App:
Edit src/App.jsx to create your homepage and App.css or index.css for styling.
Commit Changes Regularly:
Follow this workflow to keep your project updated on GitHub:

  git add .
  git commit -m "Describe your changes"
  git push origin main

Collaborate or Share: Invite collaborators to your repository or share the GitHub link for feedback.

With this guide, you’ll always have a quick reference to start new projects efficiently. Feel free to adapt and expand it as needed!

Using Flask-SQLAlchemy Validations

Matt Tran — Sun, 17 Dec 2023 22:07:43 +0000

Flask, the lightweight web framework for Python, empowers developers to create dynamic and feature-rich web applications. When it comes to managing data and ensuring its integrity, Flask-SQLAlchemy plays a pivotal role. In this tutorial, we'll explore how to implement validations using Flask-SQLAlchemy, safeguarding your web application against incorrect or malicious data.

Prerequisites

Before diving into validations, make sure you have Flask and Flask-SQLAlchemy installed. You can install them using:

bash

pip install Flask Flask-SQLAlchemy

Additionally, set up a basic Flask application and configure Flask-SQLAlchemy to connect to your database.

Defining Models

In Flask-SQLAlchemy, models are Python classes that represent database tables. Start by defining your models, specifying the fields and data types. For example:

python

from flask_sqlalchemy import SQLAlchemy

db = SQLAlchemy()

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True, nullable=False)
    email = db.Column(db.String(120), unique=True, nullable=False)

Here, we've created a User model with id, username, and email columns.

Adding Validations

To enforce data integrity, add validations to your model fields. Flask-SQLAlchemy supports a range of validation options. Let's explore a few:

Required Fields Ensure that certain fields are not empty. For example, to make the email field required, modify the User class:

python

from sqlalchemy.orm import validates

class User(db.Model):
    # ... (previous fields)

    @validates('email')
    def validate_email(self, key, email):
        if not email:
            raise ValueError("Email cannot be empty.")
        return email

Unique Constraints Prevent duplicate entries in specific columns. To enforce uniqueness on the username field:

python

class User(db.Model):
    # ... (previous fields)

    @validates('username')
    def validate_username(self, key, username):
        existing_user = User.query.filter(User.username == username).first()
        if existing_user:
            raise ValueError("Username must be unique.")
        return username

Custom Validations Implement custom validations based on your application's requirements. For instance, validating the length of the username:

python

class User(db.Model):
    # ... (previous fields)

    @validates('username')
    def validate_username_length(self, key, username):
        if len(username) < 4 or len(username) > 20:
            raise ValueError("Username must be between 4 and 20 characters.")
        return username

Applying Migrations

After you add the validations, apply the changes to the database using Flask-Migrate:

bash

flask db init
flask db migrate -m "Adding validations to User model"
flask db upgrade

Doing this you'll be able to initialize the migration, create the script, and make those changes to the database.

Lets Test Validations

Now it's time to create tests and make sure our validations work! Use testing libraries like unittest or pytest to write test cases that cover various scenarios.

python

import unittest
from your_flask_app import app, db, User

class TestUserModel(unittest.TestCase):
    def setUp(self):
        app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///:memory:'
        app.config['TESTING'] = True
        db.init_app(app)
        with app.app_context():
            db.create_all()

    def tearDown(self):
        with app.app_context():
            db.session.remove()
            db.drop_all()

    def test_email_validation(self):
        with app.app_context():
            with self.assertRaises(ValueError):
                user = User(username='test_user', email='')
                db.session.add(user)
                db.session.commit()

    # Add more test cases for other validations...

if __name__ == '__main__':
    unittest.main()

Make sure your tests covers different validations cases and behaves the way you want it to.

Conclusion

Overall, validations will help ensure data integrity. Therefore, adding validations to your Flask-SQLAlchemy models is crucial if you want to create a foundation that can handle and store data securely!

How to Create a CLI App in 5 Steps

Matt Tran — Thu, 30 Nov 2023 05:25:21 +0000

In Phase 3 of my learning journey at Flatiron, we began to learn about Python. As we approach the end of this phase, our project of the phase was to create a CLI app. Our group decided to make a Fitness Tracker CLI, and here's a five-step skeleton of how we did it!

Step 1 - Plan
Before beginning to plan, we set clear goals for what we wanted to accomplish. We value the gym, so we wanted to create an app that allowed users to add or remove exercises and workouts.

Step 2 - Data Models
After deciding what we wanted our app to do, we needed to decide what classes we would add and what their relationships would be. We agreed on our project's three classes (exercise, workout, and user). For their relationships, we wanted "workout" to have a one-to-many relationship with "exercise" and "workout" to belong to a user.

Step 3 - ORM
During this step, we used SQLAlchemy to interact with our database. During this step, we created modules for the ORM methods we wanted.

STEP 4 - CLI
After setting up SQLAlchemy and our ORM, we focused on creating the CLI. To help with this process, we used Click to generate the command-line interface (CLI). At this point, we also defined our commands for the CLI.

Step 5 - Implementing CLI Commands
Here, we wrote functions for our CLI commands and added information for error messages. We also used this step to implement PrettyTable, Figlet, and animations as embellishments to our CLI app to give it some more pizzazz.

Overall, it was a fun experience to create our first CLI app!

Navigating the Power of React.js: A Phase-2 Discovery

Matt Tran — Sun, 12 Nov 2023 22:05:15 +0000

As I continue my journey into Phase 2 of the Flatiron software engineering program, React has become the central focus, showcasing its transformative capabilities in my coding journey.

In Phase 1, vanilla JavaScript took center stage, but there was a big change following the introduction of React's declarative syntax. As I used React, I appreciated React's declarative syntax for fostering readability and resilience against bugs. With this, I noticed a great reduction in debugging issues.

Now, let's discuss the benefits of components, which are coding's equivalent to a conveniently reusable unit. These components help to keep codes well-organized and scalable, which is a huge convenience during coding.

Lastly, the performance boost provided by React's virtual DOM deserves a spotlight. By constructing a virtual counterpart of the DOM, updates occur swiftly, optimizing the application's overall performance.

As I continue navigating the complexities of React.js in Phase 2, the journey becomes increasingly captivating. From mastering declarative syntax to harnessing the power of modular components and the virtual DOM, learning React.js has significantly enriched my web development toolkit. Stay tuned for more enlightening revelations as Phase 2 unfolds!

3 Things You Need to Know About JavaScript Functions

Matt Tran — Thu, 19 Oct 2023 23:41:24 +0000

What should I know about JavaScript functions? Well you're in luck because today we'll go over 3 core topics seen in JavaScript functions.

1. Fundamentals

Q: What is a JavaScript function?
A: A JavaScript function is a block of code that performs specific tasks when called.
Q: Why are JavaScript functions important?
A: JavaScript functions are important because they help keep code organized and efficient.
Q: How are functions declared?
A: Functions are declared with the "function" keyword followed by a function name and parentheses. Functions can then be invoked(also known as "called") by using the function name followed by parentheses, which executes the function.

2. Parameters and Return Values

Q: What are parameters?
A: Parameters are what is written inside the parentheses of a function.
Q: What is the purpose of parameters?
A: Parameters give functions the ability to use values and different inputs for calculations and other tasks.

Q: What are return values?
A: Return values are values that are returned after a function finishes its task.
Q: What is the purpose of return values?
A: Return values are used to get information and execute further actions from the functions output.

3. Callback Functions and Arrow Functions

Q: What is a callback function?
A: A callback function is a function that you use as input to another function.
Q:How are callback functions used?
A: Callback functions are used to specify what happens after another task is completed.
Q: What are arrow functions?
A: Arrow functions are used to make code more concise when defining functions.
Q: How do you write an arrow function in JavaScript?
A: Use the following syntax when writing arrow functions:

const function = (parameter) => {

return result;
};

In this example,

'const' declares the variable for the function
'function' is the function you use
'parameter' is the parameter of the function used
'=>' is the arrow function
'return' is the output of the function

If you've followed along, I trust you've grasped the core of JavaScript functions. Best of luck with your coding journey ahead! Happy coding!