DEV Community: Tarek Hassan

Making API requests in Laravel

Tarek Hassan — Sun, 02 May 2021 19:28:21 +0000

Laravel has a very simple way to make APIs. This article will show you how to make these simple requests.

Get requests

To create a basic request, open routes/api.php and create get request, the syntax looks like that

Route::get('/articles', function() {
    return 'Articles';
});

This code will return a page with "Articles".

Return JSON

To return a simple JSON response simply use response()->json

Route::get('/user', function() {
    return response()->json([ 'name' => 'John', ]);
});

Adding environment variables to React

Tarek Hassan — Tue, 08 Dec 2020 06:36:56 +0000

This is a quick guide to adding environment variables to React apps, so let's get to it.

Step 1, Creating .env file

Create a file in your root folder and name it .env.

Step 2, Adding variables

Inside you .env create variable like this

REACT_APP_SECRET_TOKEN=TOKEN

Note: variables should start with REACT_APP

Step 3, Using variables inside your app

After you added .env file and variables re-build your app with npm start. Now you can use your environment variables by simply passing it inside your app {process.env.REACT_APP_SECRET_TOKEN}

State management boilerplate with context API

Tarek Hassan — Wed, 08 Jul 2020 22:50:09 +0000

For long time I struggled to manage state with React, but with the release of React Hooks it became so much easier.

If you are looking for something to grasp the idea and apply it in short time keep on reading.

Here is a complete example if you would like to check directly

Setting up context and context provider

To work with context you first setup context by using createContext() then you pass props to the provider and use props.chidren to pass components inside it.

Here is an example

import React from "react";

export const UsersContext = React.createContext();

export const UsersProvider = props => {
  const getUsers = async () => {
    return await fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(result => result)
      .catch(error => console.log("error happened", error));
  };

  return (
    <UsersContext.Provider value={{ getUsers }}>
      {props.children}
    </UsersContext.Provider>
  );
};

Wrapping components inside context

To pass value of context you need to wrap your component inside your context provider, after that you will have access to state in your context from your context. Remember that we passed props.children inside our context provider.

Here is an example of how this looks like

import React from "react";
import "./styles.css";
import Users from "./Users";
import { UsersProvider } from "../src/Context/UsersContext";

export default function App() {
  return (
    <UsersProvider>
      <div className="App">
        <h1>Hello Hoooooks</h1>
        <Users />
      </div>
    </UsersProvider>
  );
}

Using context and state inside our function

Now after you created context, and you wrapped your component inside provider, it is time to consume it.

To do this you need useEffect,useContext and useState.

useContext will pass value and functions to your component so you can have direct access to it.
useEffect will invoke your getUsers function to change local state users
useState is the new way to use state inside a functional component.

Here is the complete example

import React from "react";
import { UsersContext } from "./Context/UsersContext";

const Users = () => {
  const [users, setUsers] = React.useState([]);
  const { getUsers } = React.useContext(UsersContext);

  React.useEffect(() => {
    getUsers().then(result => {
      setUsers(result);
    });
  }, []);

  return (
    <div>
      {users.map(user => (
        <div key={user.id}>{user.name}</div>
      ))}
    </div>
  );
};

export default Users;

This is a summary of what you have done to use context

You created a file and called it UsersContext to return an API call to get users from JSONPlaceholder
You used createContext() to create context, then You created context provider and passed value object inside with our functions.
In App.js you passed provider to access context state and functions.
In Users.js you called context with useContext hook and passed users inside your component.

Creating Chrome extension in under five minutes

Tarek Hassan — Wed, 01 Jul 2020 17:37:31 +0000

Developing an extension for chrome is very easy and doable with just HTML, CSS and JavaScript.

What are we building

We are building simple extension that reads an API from Breaking Bad quotes and shows it, that is it.

Step 1

We need to create few files to have a chrome extension index.html, manifest.json ,script.js and a png file for your icon. You can add style.css file and link it but I am keeping this as simple as possible.

Step 2 - working with manifest.json

This is a JSON file that contains data about your extension.
Most of its attributes are self explanatory. Here is a full example of our extension manifest.json

{
  "manifest_version": 2,
  "name": "Breaking bad",
  "description": "The breaking bad quote extension",
  "version": "1.0",
  "browser_action": {
    "default_icon": "bb.png",
    "default_popup": "index.html"
  }
}

Please note that manifest_version, name and version are required.
Most important part here is browser_action. This is where you tell chrome where to find file to open and icon to have in chrome.

Step 3 - Markup

This markup is going to to have a header and a section to have our quote after API calling is done

<!DOCTYPE html>
<html>
  <head>
    <title>Breaking bad</title>
  </head>
  <body>
    <main style="text-align: center;" class="pt-20">
      <h1 class="text-center text-4xl font-bold leading-10 tracking-wide">
        Breaking bad quotes
      </h1>
      <section id="quote-section"></section>
    </main>
    <script src="script.js"></script>
  </body>
</html>

Step 4 - The JS part

In our index.html we have imported script.js file. This file is going to call https://breaking-bad-quotes.herokuapp.com/v1/quotes and get a random Breaking Bad quote.

Here is the script for our extension

var quoteSection = document.getElementById('quote-section');

fetch('https://breaking-bad-quotes.herokuapp.com/v1/quotes')
  .then((res) => res.json())
  .then((res) => {
    console.log(res);
    quoteSection.innerHTML = '<div>' + res[0].quote + '</div>' + '<h4>' + res[0].author + '</h4>';
  });

Step 5 - Uploading extension

This is s simple drag and drop step. But before make sure you have enabled developer mode in your browser. Then head to chrome://extensions/ and drag the folder where all files in and drop inside extensions tab.

That is it. The full code is found in this repo.

What is your experience with mentorship?

Tarek Hassan — Sat, 16 Nov 2019 00:17:04 +0000

If you have worked with a mentor, how was that? Did it help?

How to develop a digital wallet app?

Tarek Hassan — Fri, 20 Sep 2019 13:21:16 +0000

Hello Devs, I want to practice by building small digital wallet app like Paytm in India, how can I do that?
To build it, should I connect every user to a bank account? Or I should manage payments through my database? How this works?

Get to know CSS and Flexbox properly before getting into JS (and Bootstrap)

Tarek Hassan — Sun, 21 Jul 2019 14:38:17 +0000

I recently came to realize that CSS is very important before diving into JS. I have worked with different frameworks like Bootstrap and Vuetify. But recently I decided to take one step back and take a course on CSS only.

I had a project which I struggled for days to create styling and all CSS stuff. I used Bootstrap for it but I had issues here and there that I couldn't fix. After finishing 60% of this course I re-made this project design with help of Flexbox and pure CSS, this time it took me only few hours to achieve what I achieved in days before.

For example, I used to use px most of the time and I didn't know what is em and rem. I also didn't understand well what is position.

So as some advise juniors to start with Vanilla JS before frameworks, I think the same applies to CSS and frameworks. Understand CSS well before getting into Frameworks.

Happy coding.

How do you make balance between working and studying?

Tarek Hassan — Tue, 02 Jul 2019 08:57:02 +0000

I am wondering about this as I am very stressed nowadays because of it. I have 9-5 as Frontend developer but I would like to really improve my skills. I subscribed to Vue mastery but actually finding time to study is hard, especially that I want to improve in both Vue and JavaScript besides wanting to learn other skills like Graphql and Firebase.

So much things to learn but the day job simply eats your day and sometimes I have to work after 5 to finish something.

React js Contentful starting

Tarek Hassan — Tue, 13 Nov 2018 08:43:37 +0000

Contentful is headless CMS that you can use for building your content from its ready back-end and fetch your content with RESTFUL-API.

In this tutorial I am going to share with you how to start a simple project on Contentful and React js.

This tutorial assumes that you are already familiar with React and creating React project.

I will explain creating and connecting to Contentful in steps.

But first you need to have a Contentful account, simply go to https://www.contentful.com/sign-up/ and sign up then sign in.

4 simple steps for creating content on Contentful

First step: After you sign in go to the navbar to the left and choose to create a new space. This is where your data will be saved. For this tutorial I named the space 'Blog'.

Second step: is to make content type. If you are adding a structure for 'articles' make you content type as 'article'. When add content in next step you will find 'add article' button to add content.

Let's continue making the data model.

After you created your content type you can find 'add field'.

Add field -> text -> short text -> make the title 'post title'
Add field -> text -> long text -> make the title 'post content'
Add field -> text -> short text -> make the title 'post author'

If you are following you get the idea. You can add more fields of you would like to.

On the top NavBar click 'content'. Save and go to content.

Third step: Adding content should be so simple. Just click 'add article' in case you chose your content type as 'article'. Then you are adding content as you would do on WordPress. You can use Lorem ipsum generators like http://lorem-ipsum.perbang.dk/ to generate content for testing.

Last step: is fetching content you created.

You need to get your 'access token' and 'space ID' from Space setting -> API keys

import React, { Component } from "react";
import { render } from "react-dom";
import { createClient } from "contentful";


var client = createClient({
  space: "YOUR_SPACE_ID",
  accessToken:
    "YOUR_ACCESS_TOKEN"
});

class App extends Component {
  constructor() {
    super();
    this.state = {
      article: []
    };
  }

  componentDidMount() {
    client.getEntries().then(({ items }) => {
      this.setState({ articles: items });
    });
  }

  render() {
    return (
      <div>
        Content goes here
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));