DEV Community: Renardo Williams

Final Project A Journey with React-Bootstrap and Flask-SQLAlchemy

Renardo Williams — Sun, 08 Oct 2023 22:11:05 +0000

Embarking on the journey of creating my Final project was both exciting and challenging. In this blog post, I will share my experience of using React-Bootstrap and Flask-SQLAlchemy to create my final project. These two libraries significantly enhanced my development process by providing a set of pre-built components and an efficient way to interact with the database.
Before diving into the technical details, let me provide some context about my final project. The goal was to develop a dynamic and user-friendly web application that could handle data management efficiently.
Both Flask and React were covered in the Flatiron school's curriculum . So using Flask along with Python for the backend framework due to its simplicity and flexibility.
To enhance the UI, I opted for React-Bootstrap, a widely-used library that combines the power of React and Bootstrap, providing a rich set of components.

Backend First:

My main focus was the backend, with Flask as my framework and Flask-SQLAlchemy, an extension for Flask that simplifies using SQLAlchemy by automatically handling creating, using, and cleaning up the SQLAlchemy objects you’d normally work with. While it adds a few useful features, it still works like SQLAlchemy. This powerful combination allowed me to define my data models as Python classes and easily interact with the database using SQLAlchemy's expressive query language. Flask-SQLAlchemy was instrumental in managing the database operations of my project. It provided an efficient way to interact with the database using Pythonic domain language. I used it to define my database schema, perform CRUD operations, and handle database migrations. The library’s support for complex queries and transactions made it easy for me to implement advanced features in my application.

The Frontend:

React-Bootstrap is a popular front-end framework that has been rebuilt for React. It replaces the Bootstrap JavaScript, allowing you to use Bootstrap components as React components. This means you can leverage the power of Bootstrap’s UI components directly within your React application. I used React-Bootstrap extensively in my project. The library’s wide range of pre-built components helped me create a clean and responsive user interface without having to write much CSS. For instance, I used the Navbar component to create a navigation bar, the Card component to display information, and the Button component for user interactions. Buttons, forms, navigation bars, and modals are just a few examples of the components I utilized. The ability to customize these components made it easy for me to achieve the desired look and feel for my application.

Connecting the Dots:

The real magic happened when I integrated the frontend, built with React-Bootstrap, with the backend powered by Flask-SQLAlchemy. Establishing a smooth communication channel between the two involved creating API endpoints with Flask and consuming them in my React components. Fetching and displaying data from the backend became a straightforward process thanks to the modular structure of my project. React-Bootstrap components seamlessly interacted with the Flask API, providing users with a seamless experience as they interacted with the application.

Conclusion

Building my final project with React-Bootstrap and Flask-SQLAlchemy was a rewarding experience. These libraries not only streamlined my development process but also allowed me to focus more on implementing the core functionalities of my application. I highly recommend these tools for anyone looking to build a web application with React and Flask. I hope this blog post inspires others to explore the potential of React-Bootstrap and Flask-SQLAlchemy in their projects. Happy coding!

Final Project

Hashed Password for User login in Python

Renardo Williams — Sun, 27 Aug 2023 01:00:06 +0000

Hello everyone! My name is Renardo Williams and this blog is about using hashed password for user login in Python.

Whenever there is an app or program that requires users to have a profile or anything similar. Login and verification is almost always necessary. To do this we must store login credentials for login and for verifying a user in a database, But imagine if we stored this data as plain text, then an attacker finds a database of plaintext passwords, they can easily be used in combination with matching emails to login to the associated site/account and even used to attempt to log into other accounts since a lot of people use the same password.

To hide this sensitive data we can hash passwords when a password is provided. By doing this we ensure that passwords are securely stored in the database by using encrypting hashing techniques.

I will be going over a few blocks of code for implementing a simple login system using hashed password in Python and SQLAlchemy. This system ensures that passwords are securely stored in the database by using hashlib library.

hashlib:

This is a Python library that provides interfaces for various secure hash and message digest algorithms, including SHA-256.

Hashing:

This is a one-way function that transforms a password into a fixed-length string of characters, making it computationally infeasible to reverse-engineer the original password.

@classmethod    
    def register_user(cls,email,password):
        hashed_password = cls.hash_password(password)        
        user = User(email=email, hashed_password=hashed_password)
        session.add(user)
        session.commit()

@classmethod
    def hash_password(cls,password):
        return sha256(password.encode()).hexdigest()

In the code above register_user() This class method for registering a new user. It takes the class itself, email and a password. After getting a email and password it calls the hash_password() method with the password as an argument. This method then uses the hashlib.sha256() method to hash the password and returns the hashed password as a hexadecimal string. A new user object is then created and initializes it with the provided email and hashed password. Adds the new user object to a session using SQLAlchemy. Commits the session to persist the new user in the database.

`encode()`:

This method converts the password from a string to bytes using the UTF-8 encoding. Because hash functions works on byte sequences and not strings.

`hexdigest()`:

This method is applied to the SHA-256 hash object. It converts the binary digest (hash value) into a hexadecimal string representation. Storing the hash as a hexadecimal string makes it easy to store in databases and transmit over networks.

@classmethod
def verify_password(cls, plain_password, hashed_password):
    return cls.hash_password(plain_password) == hashed_password

@classmethod
def authenticate_user(cls,email,password):
    user = session.query(User).filter(User.email == email).first()
    if user and cls.verify_password(password, user.hashed_password):
       return user

The code above is used to verify and user for login, verify_password(): This method takes a password and a hashed password as parameters. It uses the hash_password() class method (which computes the SHA-256 hash of a password) to hash the plain password and then compares the resulting hash with the provided hashed password. If they are the same the method returns True if the passwords match and False otherwise.

authenticate_user(): This class method is used for user authentication. It takes an email and a password as parameters. It queries the database for a user with the provided email using the session object. If a user is found and the password verification using verify_password() is successful it returns the user object, Thus authenticating the user.

These code snippets were taken from my Phase-3 Flatiron project https://github.com/Renardo1985/phase-3-python-cli-project. I used this simple implementing of hashed passwords in my user login system. By hashing passwords, you can significantly reduce the impact of data breaches and ensure your users' information remains confidential.

Credits

https://nitratine.net/blog/post/how-to-hash-passwords-in-python/
https://docs.python.org/3/library/hashlib.html
https://www.w3resource.com/python-exercises/cybersecurity/python-cybersecurity-exercise-1.php
https://saturncloud.io/blog/whats-the-recommended-hashing-algorithm-to-use-for-stored-passwords/#:

Project - MMO Games

Renardo Williams — Fri, 30 Jun 2023 23:44:20 +0000

Hello everyone! My name is Renardo Williams and this blog is about my web application MMO Games.

MMO games app is a catalog of (MMO) games that are currently live and thriving. The paged is developed using React JavaScript, React Bootstrap, and CSS, the MMO Games project brings you a focused list of engaging titles. Whether you are a seasoned player or a curious newcomer you can use this app to discover your next MMO experience.

MMO games was created using JavaScript React. This is a framework and library that is open-source which is developed by Facebook. It is used for building interactive user interfaces and web applications quickly and efficiently with significantly less code than you would with vanilla JavaScript.

To create a new React app, you may choose one of the following methods:

npx create-react-app my-app
npm init react-app my-app
yarn create react-app my-app

Behind the scenes of my web application is a db.json file which uses JSON (JavaScript Object Notation) API is an application programming interface designed for lightweight data interchange (text-based data exchange format) between two computer applications operating on the same hardware device or between different computers in different geographical areas.

In the context of MMO games, I used API to retrieve a list of games to populate the app. A modified version of the public MMO Games API was used to make phase-2-project-server. The API used for the page.

fetch(`http://localhost:3001/games/`)
   .then(data => data.json())

Benefits of React JavaScript

Components

let you split the UI into independent, reusable pieces, and think about each piece in isolation. Components can do many things, but their end goal is always the same: they all must contain a snippet of code that describes what they should render to the DOM.
Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

Hooks

useState is used majority of the time in MMO games app, talk about what state is in React. State is data that is dynamic in your component: it changes over time as users interact with your application. A component's state, unlike a component's props, can change during the component's life.

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Here, useState is a Hook . We call it inside a function component to add some local state to it. React will preserve this state between re-renders. useState returns a pair: the current state value and a function that lets you update it. You can call this function from an event handler or somewhere else.

The useEffect Hook lets you perform side effects in function components:

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates. In this effect, we set the document title, but we could also perform data fetching or call some other imperative API.

Client Side Routing

MMO games app utilizes "client side routing" using React Router.

In traditional websites, the browser requests a document from a web server, downloads and evaluates CSS and JavaScript assets, and renders the HTML sent from the server. When the user clicks a link, it starts the process all over again for a new page.

Client side routing allows your app to update the URL from a link click without making another request for another document from the server. Instead, your app can immediately render some new UI and make data requests with fetch to update the page with new information.

This enables faster user experiences because the browser doesn't need to request an entirely new document or re-evaluate CSS and JavaScript assets for the next page. It also enables more dynamic user experiences with things like animation.

Client side routing is enabled by creating a Router and linking/submitting to pages with Link and

import * as React from "react";
import { createRoot } from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
  Route,
  Link,
} from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: (
      <div>
        <h1>Hello World</h1>
        <Link to="about">About Us</Link>
      </div>
    ),
  },
  {
    path: "about",
    element: <div>About</div>,
  },
]);

createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);

The link to my project Repo is here:

https://github.com/Renardo1985/Phase-2-Project.git

MMO Games is my Phase-2 Flatiron School project. I always plan to add features and upgrades as I learn more. I appreciate feedback on projects. looking forward to growing and doing a lot more projects in the future! Thank you and enjoy!

Credits
https://legacy.reactjs.org/docs/components-and-props.html
https://create-react-app.dev/docs/getting-started/
https://my.learn.co/courses/652/pages/react-components-basics?module_item_id=86197
https://my.learn.co/courses/652/pages/react-state?module_item_id=86213
https://legacy.reactjs.org/docs/hooks-effect.html
https://reactrouter.com/en/main/start/overview
https://www.pcgamesn.com/10-best-pc-mmos

Project Iconic-Desserts

Renardo Williams — Sun, 14 May 2023 16:42:49 +0000

Hello everyone! My name is Renardo Williams and this blog is about my web application Iconic Desserts. Iconic Desserts is a work in progress eCommerce web application that I am building for my wife. She has started a pastry company and wanted me to build a web page for her. The main purpose for web application is to View, Rate and order different desserts in different categories.

In the context of Iconic Desserts, I used API to retrieve data for the different Dessert categories

fetch(`http://localhost:3000/${key}`)
   .then(data => data.json())

I also use API to record and update the ratings on items the db.json file using a PATCH.

function updateRating(item, key) 
fetch(`http://localhost:3000/${key}/${item.id}`, { method: "PATCH", headers: { "Content-Type": "application/json", Accept: "application/json" }, body: JSON.stringify({ "rating": item.rating

Now, that we have data from our .json file we can go ahead and display each item on the webpage. I do this by storing each element of the db.json in an array of objects. Then from there I can Loop through this array using a forEach() method and create each card to display on the webpage.

.then((item) => { item.forEach(item => generateItem(item, key)); })

Once we have all our items showing on the webpage we can view an image, brief description, rating and price. we are also able to add the item to a cart for a checkout process.

I used an array of objects to store each element in the Cart. If an item is added to the cart the item will have an attribute quantity with a value of 1, if the same item is added again instead of duplicating the item test is run to see if the item already exist in the array and then increments the quantity value by 1.

let index = -1
for (let i = 0; i < cart.length; i++) {
    if (cart[i].name === data.name) { index = i }
    }
    if (index >= 0) { cart[index].quantity += 1; }
    else { data.quantity = 1; cart.push(data); }

With the combination of API and JSON this has giving me the opportunity to create this beautiful website.
The link to my project Repo is here:

https://github.com/Renardo1985/project-iconic-desserts.

I always appreciate feedback on my project as this is my very first project. looking forward to growing and doing a lot more projects in the future! Thank you and enjoy!

Credits
https://rapidapi.com/blog/api-glossary/what-is-json-api-json-vs-graphql-vs-rest-api-comparison/#:~:text=JSON%20(JavaScript%20Object%20Notation)%20API,computers%20in%20different%20geographical%20areas.

Javascript map() vs forEach()

Renardo Williams — Tue, 04 Apr 2023 16:26:05 +0000

During the course of working with Arrays specifically the need to iterate through them will be inevitable. Thus we have the for loop which to me seems like its married to arrays.

Then I learnt that arrays in JavaScript has methods and these methods included the likes of the map() method and the forEach() method these are both used to iterate over an array. However they were both so similar so they had me confused at first as to why are both these methods made to do the same thing.

Then I realized the difference is that the map() method has a return while forEach() does not, not only that but the map() method also allocates memory to store it's return while it iterates over the original array, forEach() does not do this it always returns nothing (undefined).

map()

This is an example of how map() works:const numbers = [10, 20, 30, 40, 50]; const doubleNumbers = numbers.map((number) => number * 2); console.log(doubleNumbers);

the code returns an array looking like this:(5) [20, 40, 60, 80, 100]

So above we see that the map() code creates an array of the doubled values of the original array numbers which is then allocated to doubleNumbers.

forEach()

While this is how forEach() works:const numbers = [10, 20, 30, 40, 50]; numbers.forEach((number) => console.log(number * 2));

the forEach() code will output:20 40 60 80 100

We then use the forEach() method to iterate over the same numbers array and double each item plus logging in to the console.

..

Neat! right no for-loops needed. To make this even more interesting we could use the forEach() method to accomplish the same results as the map() just by adding a few lines of code:
const numbers = [10, 20, 30, 40, 50]; const doubleNumbers = [] numbers.forEach((number) => doubleNumbers.push(number * 2)); console.log(doubleNumbers);

result:(5) [20, 40, 60, 80, 100]

There you go in the end they both have there purpose.Hope this helps. Good luck with JavaScript!!.

My New Adventure with Flatiron School

Renardo Williams — Wed, 22 Mar 2023 17:56:26 +0000

Beginning a new venture in web advancement might be an entertaining and rewarding experience. With the spreading significance of on-line presence, businesses of all sizes are always in need of web growth services. If you have the talents and skill in web development, there's a high chance that you might make a designation for yourself in the industry. In this blog I will explore the experiences I faced plus some tips for fellow classmates in web development.

Most if not all of us in the flatiron boot camp are looking to make a career change or boost your talents in web development, Flatiron's boot camp is perhaps one of the best options to do this. It offers a focused and intensive curriculum, typically lasting 32 weeks, constructed to mentor you the talents wanted to develop a web developer.

STEP ONE

My first advice is to find your comfort zone, Flatiron offers two options for their web development bootcamp Front-end and Full-stack. You need to identify the areas of web development that you are interested in and focus on those areas for now at least. I chose to go with full-stack, because I wanted to be involved with all aspects of web application. So ask yourself what do I want to be a front-end developer, or full-stack developer?

STEP TWO

Learn the basics before diving into more complex topics such as Conditional ternary make sure you have a strong foundation in the basics of whatever language in web development you are working on. These are some of the websites I use along with Google search when i find myself in a pickle ;
Codecademy
FreeCodeCamp
W3Schools

STEP THREE

Web development will constantly evolve, so it is important to stay up-to-date on language changes and changes in technologies. It is good to read blogs and newsletters, and network with fellow classmates. It is very important to practice as this is the best way to reinforce what we will learn during our cohort with Flatiron School. Start working on your portfolio, create your own projects and practice building websites and applications.

...

Leaving your comfort zone to start a boot camp in web development can be challenging and difficult, but in the long run I believe it will be incredibly rewarding. By setting clear goals, choosing the right paths, learning the basics, practicing regularly, and staying up-to-date, we will be on your way to mastering this exciting field of web development. Good luck!