Forem: Kanny Mohamad

KMarket

Kanny Mohamad — Sun, 04 Aug 2024 17:02:32 +0000

Welcome to KMarket, your one-stop destination for a seamless online shopping experience. Whether you are a user looking to browse and purchase items or an admin managing the marketplace, KMarket has got you covered with robust features and an intuitive interface.

User-Friendly Authentication

At KMarket, we prioritize security and ease of access. Our platform offers a straightforward login system that allows users to access their accounts effortlessly. If you don’t have an account, creating one is a breeze. Simply sign up with your email and a password, which will be securely hashed to ensure your data remains protected.

Explore and Select Products

Once logged in, users are greeted with an array of products displayed with vibrant images, detailed descriptions, and competitive prices. Our user interface is designed to make browsing enjoyable and straightforward. See something you like? Simply select the products you are interested in and add them to your selection.

Personalized Profile Page

After selecting your desired products, navigate to your profile page to review your choices. Here, you can view your personal details, including your name, email, and phone number, as well as the images of the products you have selected. The profile page provides a clear and concise summary of your selections, ensuring you have all the information you need before making a purchase.

Manage Your Selections

KMarket gives you full control over your selections. If you change your mind about a product, you can easily remove it from your list. This flexibility ensures that you only purchase items you truly want.

Admin Capabilities

For users with admin privileges, KMarket offers a comprehensive set of tools to manage the marketplace. Admins can perform full CRUD (Create, Read, Update, Delete) operations on the user table. This means you can add new users, update existing user information, delete users, and view a detailed table of all users.

Seamless Navigation

Navigating KMarket is designed to be intuitive and user-friendly. For admins, a convenient back button allows you to return to the home page effortlessly, ensuring you can manage the marketplace without any hassle.

Technical Overview

I want to introduce you to my K-Market project. This platform is built with Flask and SQLAlchemy for the backend, featuring many-to-many relationships and models. The frontend uses React Router for client-side routing and Tailwind CSS for styling. It supports full CRUD operations, follows REST conventions, and includes validation and error handling, built with useContext.

Here is the structure of my project:

Client Folder: Contains the main components, pages, and useContext.
Server Folder: Contains the instance (including the database), models (including the tables), config, and seed for seeding the tables with data.

Generating a React Application

To get started, let's spin up our React application using create-react-app:

npx create-react-app client --use-npm

Creating the Server Application

With the environment set up, let's get started on building our Flask application!

Setting Up the Virtual Environment

Navigate to the root directory of your project.
Run the following command to create and activate a virtual environment using Pipenv:
pipenv install && pipenv shell
$ tree -L 2
$ # the -L argument limits the depth at which we look into the directory structure
.
├── CONTRIBUTING.md
├── LICENSE.md
├── Pipfile
├── README.md
├── client
│ ├── README.md
│ ├── package.json
│ ├── public
│ └── src
└── server
├── app.py
├── config.py
├── models.py
└── seed.py
Then enter the commands to create the instance and migrations folders and the database app.db file:
flask db init flask db upgrade head

Tools that have been used:
react-router-domv6
React Context

Client side:

Building the Client Side with UseContext to Prevent Prop Drilling
To manage state and prevent prop drilling, we'll use the useContext hook. This allows us to share state across components without having to pass props down through multiple levels.

Using React Router Dom v6 with Nested Routes
We will use React Router Dom v6 to handle routing in our application. Nested routes can be defined using the children property. To render these nested routes, you need to include the Outlet component in your parent component.

Using Formik and Yup for Form Validation
To install Formik, run the following command:

npm install --save formik

To install Yup, run the following command:

npm install yup

Client side:

Run pipenv install to install the dependencies and pipenv shell to enter your virtual environment before running your code.

pipenv install
pipenv shell
Change into the server directory and configure the FLASK_APP and FLASK_RUN_PORT environment variables:

cd server
export FLASK_APP=app.py
export FLASK_RUN_PORT=5555
Let's create the database app.db with an empty user table:

flask db init
flask db migrate -m "Initial migration."
flask db upgrade head
And for delete the db

rm -rf migrations

For adding new model we following to perform a migration:

flask db migrate -m 'add review'
flask db upgrade head
Implement validations and error handling
we can add to the column when we first create a column nullable=False that is mean it can not be no value

name = db.Column(db.String, nullable=False)
we are going to import validates from sqlalchemy.orm and use validates decorator,

@validates('email')
def validates_email(self, key, email_input):
if '@' not in email_input:
raise ValueError("wrong email format")
return email_input
we can test that through flask shell

Werkzeug
it is WSGi library It includes a number of features that will come in handy as we start to build our first Python web applications:

An in-browser debugger.
Robust classes for requests and responses.
Routing, auto-generation and management of URLs.
A development server.
A testing framework that does not require a running server.

Serializer we import Serializer from SerializerMixin

from sqlalchemy_serializer import SerializerMixin
By using SQLAlchemy-Serializer, programmers can create faster and more efficient programs that can easily share data with others, we can include and not include some key, value pair from json file and also using .to_dict() to make it easier to loop on the data in the table as en example: in model.py
class Goods(db.Model, SerializerMixin): __tablename__ = 'goods'

in the app.py

class Goodss(Resource): def get(self): goods = Goods.query.all() goods_list = [good.to_dict() for good in goods] return make_response(jsonify(goods_list), 200)

Seeding the database
Here is an example of how to add a user to the database:

users.append(Admin(name="admin", email="admin@gmail.com", password="1234"))
db.session.add_all(users)
db.session.commit()
then run

python seed.py

One-To-Many Relationships

A single User can have multiple Login entries. This is indicated by the logins attribute in the User class, which is a list of Login objects associated with the user.

`class User(db.Model, SerializerMixin):
tablename = 'users'

id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String, nullable=False)
email = db.Column(db.String, unique=True, nullable=False)
_password = db.Column(db.String, nullable=False)
phone_number = db.Column(db.String, nullable=True)
admin = db.Column(db.Boolean, default=False)

logins = relationship('Login', backref='user', lazy=True)

class Login(db.Model, SerializerMixin):
tablename = 'logins'

id = db.Column(db.Integer, primary_key=True)
email = db.Column(db.String, unique=True, nullable=False)
_password = db.Column(db.String, nullable=False)
user_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False)`

Password:

import bcrypt in the config and invoke it, and we need to run

pip install flask-bcrypt
Session
hold user info for us, allow some information between requests, no need to make query every time

Secret Key
to get the secret ket just run in the terminal

$ python -c 'import os; print(os.urandom(16))'
then in the config file

app.secret_key = b'Z\x9e&T\x87\xe5\xc1Q6|\xdaJ\xc7I\x87\xe6'
Tailwindcss
Tailwind CSS
Folder Structure
src/
style.css
public/dist/
style.css
index.html
Setup
npm run build:css

Step 1: Update package.json
Make sure your package.json includes the following script:

"scripts": {
"start": "react-scripts start",
"build:css": "tailwind build src/style.css -o dist/style.css",
"test": "react-scripts test",
"eject": "react-scripts eject"
}

Conclusion

KMarket is more than just an online marketplace; it is a platform designed with the user in mind. From secure authentication to a personalized shopping experience, and powerful admin tools, KMarket ensures that both users and admins have everything they need at their fingertips. Join KMarket today and discover a better way to shop and manage your online marketplace.

CLI Project

Kanny Mohamad — Tue, 19 Dec 2023 19:35:25 +0000

Title: A CLI Project with ORM Integration
Date: Dec 19 2023
Author: Kanny Mohammed

Introduction:
In the world of software development, efficiency and usability often dictate the success of a project. As a passionate developer, I am thrilled to share my latest project: a Command Line Interface (CLI) application integrated with Object-Relational Mapping (ORM). This project not only showcases my technical skills but also my commitment to creating practical, user-friendly solutions.

The Genesis of the Project:
The idea for this project stemmed from my desire to streamline database interactions in a way that's both intuitive and powerful. Traditional database management often involves complex SQL queries, which can be both time-consuming and prone to errors. With my CLI project, I aimed to abstract these complexities, allowing users to interact with a database through simple commands and actions.

Project Highlights:

CLI Simplicity: At its core, the project is a CLI application. This means it operates through a command-line interface, offering a clear, text-based input method. Users can perform various operations by typing commands, making the process straightforward and accessible.
ORM Integration: One of the project's standout features is its integration with ORM. This approach maps database tables to classes in Python, allowing for more intuitive data handling. It means that users can manage database records as if they were dealing with regular Python objects - no need for complex SQL!
Efficient Data Handling: With features like create, read, update, and delete, the application efficiently manages data. Whether it's adding new records or modifying existing ones, the process is seamless and user-friendly.
Robust Database Structure: The project includes two primary models - Parent and Children. These models represent the database structure and are pivotal in handling relational data effectively.

Technical Deep Dive:
The project is structured with a clear separation of concerns:

Models Directory: Contains ORM models (children.py and parent.py) that mirror the database structure.
CLI Interface (cli.py): The heart of the application, where users interact and perform operations.
Helper Functions (helpers.py): Includes auxiliary functions that support the CLI operations.

Challenges and Learnings:
Developing this project was a journey filled with both challenges and learnings. One significant challenge was ensuring the ORM correctly mapped to the database schema, especially when handling relationships between tables. This process taught me the importance of careful planning and testing in database design.

The Road Ahead:
As I continue to refine and expand this project, my focus will be on enhancing its capabilities and user experience. Future updates might include more complex data models and additional features based on user feedback.

Conclusion:
This CLI+ORM project is more than just a piece of software; it's a testament to the power of innovative thinking in technology. By bridging the gap between command-line interfaces and database management, it opens up new possibilities for efficient data handling. I invite fellow developers and tech enthusiasts to explore this project and join me on this exciting journey of continuous learning and development.

React

Kanny Mohamad — Sat, 21 Oct 2023 18:25:38 +0000

By Kanny Moahmmed, Flatiron School Software Engineering Bootcamp Student

We will dive into one of the most dynamic and vital phases of the curriculum: the React phase. By the end, you'll have an understanding of what React is, why it's vital to modern web development, and how to think in components.

Why React?
React is, without a doubt, one of the hottest tools in the web development world. Initially developed by Facebook, React has gained immense popularity due to its component-based architecture, performance optimizations, and robust ecosystem.
In the era of dynamic websites and single-page applications, React stands out by allowing developers to build fast and scalable applications without sacrificing usability or maintainability. The reason Flatiron School emphasizes React in its curriculum is to prepare students for the real-world challenges of building modern web applications.

Thinking in React
One of the first things you learn in the React phase is the concept of "components." A React component can be thought of as a reusable piece of UI that can have its behavior and appearance. The beauty lies in how these components can be nested, reused, and managed.
For instance, consider a website header. Instead of repeatedly coding the header for every page, you can create a Header component and reuse it everywhere.

By thinking in components, you start seeing applications as a collection of building blocks that can be orchestrated in harmony.

React introduces a revolutionary approach to managing state and side effects in functional components using hooks. Two of the primary hooks you delve deep into during this phase are useState and useEffect.
useState allows you to add state management to a functional component, enabling it to remember information between re-renders.

useEffect, on the other hand, lets you handle side effects. Whether you need to fetch data when a component mounts or clean up listeners when it unmounts, useEffect is your tool.

Nested Routing: Nested routing has become more straightforward. Your components now define their child routes, making the structure of your application clearer.
Use of Hooks: React Router v6 embraces the hooks pattern wholeheartedly. Hooks like useNavigate, useParams, and useLocation make it easier to access the router's API without having to wrangle with props.
Simplified Redirection: Redirecting users has become more intuitive, with the use of the useNavigate hook and the component.

const navigate = useNavigate();
 if (user) {
      navigate("/product");
    } else {
      alert("Invalid Credentials");
    }

To Do List

Kanny Mohamad — Sun, 20 Aug 2023 16:44:52 +0000

Exploring JavaScript Methods and Building a Recipe Tracker web App

JavaScript is a dynamic and versatile programming language that powers many interactive features on the web. In this blog post, we'll delve into the world of JavaScript methods and explore how they can be used to create a recipe tracker application. We'll cover the essential concepts and provide an in-depth look at a practical project that demonstrates the power of JavaScript methods.

Understanding JavaScript Methods:

JavaScript methods are functions that are associated with objects and are designed to perform specific tasks. They can be called on objects to manipulate data, modify properties, or retrieve information. Methods provide a structured way to interact with objects and simplify complex operations.

Project Overview: Building a Recipe Tracker:

Imagine you want to create a web application that helps users manage and track their favorite recipes. You want users to be able to add, edit, and delete recipes. Additionally, the application should allow users to change recipe names and view detailed information about each recipe.

Getting Started: Event Listeners and DOM Manipulation:

To begin building our recipe tracker, we use the document.addEventListener('DOMContentLoaded', function () {...} block. This ensures that our JavaScript code runs after the DOM has fully loaded. Within this block, we set up event listeners and manipulate the DOM to create the user interface.

document.addEventListener('DOMContentLoaded', function () {
// javaScript code
}

We retrieve elements from the DOM using document.getElementById and querySelector to target specific HTML elements.
We create new HTML elements using document.createElement to dynamically generate the date picker and other elements needed for our application.

Adding Recipes and Using Fetch:

We implement the functionality to add recipes by listening for the "click" event on the "Add" button. When the button is clicked, a new list item is created with the provided recipe name. We also utilize the Fetch API to make a POST request to our server, storing the new recipe data.

Enhancing Recipe Display:

For recipes with the name "cook," we provide additional interactivity. When users click on the "How about Christmas pie?" button, the application fetches recipe data from the server and dynamically creates recipe cards. We use JavaScript methods to iterate through the fetched data and generate HTML elements for each recipe, including ingredients and method steps.

Updating Recipe Names:

Users can change the name of a recipe by entering a new name and clicking the "Change Recipe Name" button. We utilize the Fetch API again, this time with a PATCH request, to update the recipe name on the server. JavaScript methods assist in dynamically updating the UI with the new name.

Conclusion: Putting JavaScript Methods to Work:

In this blog post, we've explored the world of JavaScript methods and applied them to a practical project: a recipe tracker application. From event listeners and DOM manipulation to Fetch API calls and dynamic UI updates, JavaScript methods play a crucial role in creating interactive and user-friendly web applications. By understanding these concepts and applying them creatively, you can build powerful and engaging web experiences that delight users.

Call to Action: Try It Yourself!

Feeling inspired? Why not give it a try? Create your own version of the recipe tracker application using the concepts and code provided in this article. Experiment with different methods, explore new features, and expand your JavaScript skills. Don't forget to share your experiences and results in the comments below!