DEV Community: kareem_sulaimon

Create a Movie App With React and TMDB API

kareem_sulaimon — Sun, 24 Sep 2023 13:28:28 +0000

In this tutorial, we will walk you through the process of creating a movie app using React.js and the TMDB API, ensuring a beginner-friendly and well-explained approach.

Table Of Contents:

What is TMDB API
Install React and Set up React App
Generate TMDB API
Create .env file
Create context folder and stateContext.jsx file 6.0Create Navbar.jsx and paste this code

1. What is TMDB API

The TMDB API provides a comprehensive list of available methods for movies, TV shows, actors, and images. For more information about the API, click here.

2. Install React and Set up React App

a. Create a React app using Vite:

   npx create-vite your_app_name --template react

Once created, run:

   npm install react-icons --save
   npm i react-router-dom

Access the final code on GitHub - KareemSulaimon/movieApp.

3. Generate TMDB API

Follow this link and sign up for an account.
Choose JavaScript as your preferred language and click "Get API Key."
Continue, input your data and URL path (GitHub or personal website link).
Check your notifications for your API Key.

4. Create .env file

Outside the src folder, in your root directory, create

   touch .env

Inside the .env file:

   VITE_REACT_APP_API_URL=https://api.themoviedb.org/3/
   VITE_REACT_APP_API_KEY=put your generated API key here

Note: We are starting the naming with VITE_REACT because we created it with a React app. It would have been REACT_ .... if we created it for React only.

5. Create context folder and stateContext.jsx file

touch context/stateContext.jsx

Context provides a way to pass data through the component tree without having to pass props down manually at every level. Read more here: React Context.

In your 'stateContext.jsx' file, copy and paste this code:

import React, { createContext, useContext } from 'react';

const Context = createContext();

const StateContext = ({ children }) => {
  const baseImageUrl = 'https://image.tmdb.org/t/p/original';
  const apiUrl = import.meta.env.VITE_REACT_APP_API_URL;
  const apiKey = import.meta.env.VITE_REACT_APP_API_KEY;

  return (
    <Context.Provider
      value={{
        baseImageUrl,
        apiUrl,
        apiKey
      }}
    >
      {children}
    </Context.Provider>
  );
};

export const useStateContext = () => useContext(Context);

6.Create Navbar.jsx and paste this code

import React from 'react';
import { BiSearch } from 'react-icons/bi';
import menu from '../assets/menu.png';
import logo from '../assets/logo.png';
import { useStateContext } from '../context/StateContext';
import { Link, Form } from 'react-router-dom';

function Navbar() {
  const { handleFormSubmit , query, handleInputChange } = useStateContext();

  return (
    <div className="flex flex-col sm:flex-row w-full justify-center sm:justify-around gap-4 items-center z-20 absolute top-10" data-testid="navbar">
          <Link to={"/"} className='flex items-center' data-testid="logo-link">
              <img src={logo} alt="logo icon" data-testid="logo-img" />
          </Link>
          <Form onSubmit={handleFormSubmit } className="flex w-3/5 sm:w-2/5 h-4 items-center border-white border-2 p-4 rounded-lg shadow-md" data-testid="search-bar">
            <input
              type="text"
              placeholder="What do you want to watch?"
              value={query}
              onChange={handleInputChange}
              className="w-full placeholder-white bg-transparent border-none outline-0 text-sm text-white sm:text-lg"
              data-testid="search-input"
            />
            <BiSearch className="text-white font-bold" data-testid="search-icon" />
    </Form>
    <div className="flex items-center" data-testid="menu-icon">
      <img src={menu} alt="menu icon" />
    </div>
  </div>
  );
}

export default Navbar;

Then, in Navbar.jsx:

The images are located in the assets folder.
The Form and the Link components are imported from react-router-dom, which was previously installed. When the Form is submitted, the onSubmit method calls handleFormSubmit, a function that will be defined later in stateContext.jsx. Likewise, the onChange method calls handleInputChange whenever a change is made to the query value.

What is BEM ?

kareem_sulaimon — Sat, 22 Apr 2023 23:46:23 +0000

As a front-end developer,have you ever heard of BEM?
What comes to mind when you first heard it? Some kind of complicated principle? No isn't.
In this write-up, I will be taking you through the basics ofBEM, which stands for Block, Element, Modifier, is a methodology for naming and organizing CSS classes that have gained popularity among front-end developers in recent years. The goal of BEM is to create a more structured, maintainable, and scalable codebase that is easier to understand and work with.

At its core, BEM is a simple concept. It is a naming convention that describes the relationship between different parts of an HTML element. The three parts of the BEM naming convention are as follows:

Block: The block is the highest level of the BEM hierarchy. It represents a self-contained unit of functionality or content on a web page. Examples of blocks could be a header, a menu, or a footer. Blocks are named using a single word or phrase that describes their function.

Element: element is part of a block that performs a specific function or has a specific role. Examples of elements could be a button, a title, or a logo. Elements are named using the block name, followed by two underscores (__), and then the element name.

Modifier: modifier is a variation of a block or element. It is used to change the appearance or behavior of a block or element without changing its basic structure. Examples of modifiers could be a disabled button or a highlighted menu item. Modifiers are named using the block or element name, followed by two hyphens (--), and then the modifier name.
Here is an example of how BEM can be applied to an HTML element:

<div class="block">
  <h2 class="block__element">Title</h2>
  <button class="block__element--modifier">Button</button>
</div>

<div class="block">
  <h2 class="block__title">Title</h2>
  <ul class="block__list">
    <li class="block__list-item">Item 1</li>
    <li class="block__list-item block__list-item--featured">Item 2</li>
    <li class="block__list-item block__list-item--highlighted">Item 3</li>
  </ul>
</div>

    <div class="detail">  
        <span class="detail_frame_3 frame--3">
                <h5>{{post._embedded["author"][0].name}} </h5>
                <small>{{ post.date.slice(0,10) }}</small>
        </span>

        <div class="detail_frame-9 frame-9">
         <h5>{{ post.title.rendered }} </h5>
         <div class="detail_frame-9_paragraph paragraph ">
            <div>
                {{ selectedParagraph }}
            </div>
         </div>
        </div>

    <div class="detail_image">
      <img :src="post._embedded['wp:featuredmedia'][0]?.source_url" >
   </div>


    <div class="detail_paragraph paragraph " v-for="(paragraph, index) in paragraphs" :key="index" > 
      {{ paragraph}}
        </div>



    </div>

In this example, "block" is the highest-level container, "element" is a part of the "block," and "modifier" is a variation of the "element." By using this naming convention, it becomes easy to understand the structure of the HTML element and to make changes to the CSS styles that are applied to it.

One of the key benefits of using BEM is that it helps to create more maintainable and scalable CSS code. By following a consistent naming convention, developers can more easily understand how different parts of the code relate to each other and avoid creating duplicate styles or conflicting selectors. Additionally, the structure of BEM makes it easier to organize and manage large CSS codebases, making it ideal for complex projects.

In conclusion, BEM is a powerful methodology that can help frontend developers create more maintainable, scalable, and understandable CSS code. By following a consistent naming convention, developers can create code that is easier to read, manage, and maintain over time, making it a valuable addition to any frontend development workflow.

All You Need To Know About The Console Object Method

kareem_sulaimon — Fri, 03 Mar 2023 09:27:44 +0000

The console object is a powerful tool in the world of web development. It is a built-in object in JavaScript that provides developers with a way to interact with the browser console. The console object is used to log, display, and manipulate data in the console, making it an essential tool for debugging 🐞 and troubleshooting code.

In this article, we will take a closer look at the console object and its various features, as well as some of its drawbacks.

📌 The console.log() method can accept argument or multiple arguments, making it possible to log several messages or variables at once.Here is an example.

console.log("Hello, world 🌍!");

Here is another example

const name = "John";
const age = 30;
console.log("My name is", name, "and I am", age, "years old.");

📌 console.assert() is a debugging tool that helps you find bugs in your code by asserting that a certain condition is true. If the condition is false, the assertion will throw an error and display a message in the console.Here is an example

let numbers = [1, 2, 3, 4];
console.assert(numbers.length === 5, 'Numbers array should have a length of 5.');

📌 The console.clear() clears the console.Here is an example

setInterval(() => {
  console.clear();
}, 5000);

This code will clear the console every 5 seconds using setInterval(). This can be useful for keeping the console from getting too cluttered during long-running processes.

📌 The console.warn() outputs a warning message ⚠️ to the console.

let x = 10;
if (x > 5) {
  console.warn("The value of x is greater than 5");
}

In the example above, if the value of x is greater than 5, the console.warn() method will be called with the message "The value of x is greater than 5". This will log a warning message to the browser console, indicating that something unexpected or potentially problematic may have occurred in the code.

📌 console.error log out error to the console. It is similar to console.log(), but it is typically used for logging error messages or exceptions.

Here's an example of how to use console.error():

try {
  // some code that might throw an error
} catch (error) {
  console.error('An error occurred:', error);
}

In this example, the try block contains some code that might throw an error. If an error is thrown, the catch block will be executed and the error parameter will contain information about the error. The console.error() method is then used to log the error message to the console.

📌 console.group() is a method of the console object that allows you to group related console messages together in a collapsed group. This can be helpful when you have a lot of console output and want to organize it in a more structured way.

Here's an example of using console.group() to group related console messages together:

console.group("User Information");
console.log("Name: John Doe");
console.log("Email: john.doe@example.com");
console.log("Phone: 123-456-7890");
console.groupEnd();

📌 The console.info() method is used to log information to the console. It takes one or more arguments, which can be strings, numbers, or objects.

const name = "John";
const age = 25;
const job = "Developer";

console.info("Name:", name);
console.info("Age:", age);
console.info("Job:", job);

When you run this code in a browser console, you'll see the following output:

Name: John
Age: 25
Job: Developer

📌 console.time() is a method in JavaScript that starts a timer ⏳ in the browser's console. It takes one argument, which is a string that will be used to label the timer while

📌 console.timeEnd() is a method in JavaScript that is used to stop the timer ⌛ that was started by the console.time() method.

Here is an example of how to use console.time() and console.timeEnd():

console.time('myTimer');

// Code to be timed here
for (let i = 0; i < 1000000; i++) {
}
console.timeEnd('myTimer');

In this example, console.time('myTimer') starts the timer labeled "myTimer", and console.timeEnd('myTimer') stops the timer and outputs the elapsed time in milliseconds to the console.

📌 console.count() is a method in JavaScript that allows you to count the number of times it has been called. It takes one argument, which is an optional label that will be used to identify the count in the console output.

Here is an example of how to use console.count():

function greet(name) {
  console.count('greetings');
  console.log(`Hello, ${name}!`);
}

greet('Alice');
greet('Bob');
greet('Charlie');
greet('Bob');

The Drawbacks of the Console Method
While console methods can be very useful for debugging and troubleshooting JavaScript code, there are a few drawbacks to consider:

📌 Compatibility issues: Not all browsers and environments support the console object and its methods, and some may have limitations or differences in their implementation. This can make it difficult to rely on console methods for debugging in all situations.

📌 Security concerns: It's important to be careful with the information that is logged to the console, as sensitive data such as passwords or authentication tokens can be exposed if not handled properly. In addition, console logs left in production code can make it easier for attackers to find and exploit vulnerabilities.

📌 Overuse: While console methods can be helpful for debugging, excessive use of console.log() statements can clutter up the console and slow down the performance of the application. It's important to use console methods judiciously and only when necessary.

📌 Inaccurate measurements: The accuracy of console.time() and console.timeEnd() can be affected by external factors such as network latency and system load. In addition, the time taken to execute a particular block of code can vary depending on the hardware and software environment, making it difficult to compare performance across different systems. Therefore, it's important to use console methods in conjunction with other profiling tools to get a more accurate picture of performance.

Conclusion
The console method is a feature in programming languages that allows developers to output messages and debug their code. Check out w3school for more information on the console method. Thanks for reading

How To Dynamically Import Image in Vue Vite

kareem_sulaimon — Sat, 28 Jan 2023 03:37:06 +0000

The JavaScript function below takes a parameter name and returns a URL for an image file with the specified name. It uses the URL constructor to create a new URL object, with the first argument being the path to the image file, which is constructed by concatenating the directory name "./dir/", the name passed as a parameter, and the file extension ".png". The second argument passed to the URL constructor is import.meta.url, which is a property that contains the base URL of the current module.

You can read more about importing statics assets at
https://vitejs.dev/guide/assets.html

function getImageUrl(name) { return new URL(../assets/images/${name}, import.meta.url).href }

By calling the href property of the returned URL object, the function will return a string containing the full URL of the image file, including the protocol (e.g. "https:"), the hostname (e.g. "www.example.com"), and the path to the file.

This function can be used in your Vue component to set the image url. For example, you can create a computed property that returns the import statement for the image you want to use as the background, and then bind that property to the "style" binding of a div element.
Here is an example for static image:

<template>
      <img :src="getImageUrl(img )">
    </div>
</template>

<script>
 setup() {
const getImageUrl{
    new URL(`../assets/images/image.jpg`, import.meta.url)
      } 
return {
getImageUrl 
}
}
</script>

Here is an example for dynamic image using option api:

<template>
  <div id="bg" 
     :style="{background:`url(${getImageUrl(ImageNow) })` + `no-repeat center  center/cover`}">
</div>
</template>

<script>
  export default {
    data () {
      return {
        images: ['city.jpg', 'house3.jpg','family.jpg'],
         currentImage: 0,
         interval: null
 }
},

  methods: {
  changeImage () {
  this.interval = setInterval(() => {
  this.currentImage++
  }, 10000);
    },

   getImageUrl(name) {
     return new URL(`../assets/images/${name}`,import.meta.url).href
      }
  },
 computed: {
      ImageNow () {
      return this.images[Math.abs(this.currentImage)% this.images.length] 
      }
  } 
}
</script>`

With Dynamic URL & absolute Path using composition api:

<template>
 <div class="gallery">
        <img v-for="img in gallery" :key="img " :src=" getImageUrl(img )">
    </div>
</template>

<script>
import {ref} from 'vue';

export default {
 setup() {
 const gallery= ref([
  'gallery1.jpg' ,'gallery2.jpg',
 'gallery3.jpg','gallery 4.jpg',
 'gallery5.jpg' ,'gallery6.jpg',
    ] ) ,

function getImageUrl(name) {
     return new URL(`../assets/images/${name}`, import.meta.url).href
      } ,

return {
getImageUrl , summary 
}
}
}
</script>

Summary

It's important to declare the getIamgeUrl function in script. Then pass parameters from data. The parameters(image URL) can either be loop using Vue v-for, computed or pass directly incase of single image path.
Read more about handling statics assets at
https://vitejs.dev/guide/assets.html

How To Import Dynamically Image in Vue Vite

kareem_sulaimon — Fri, 27 Jan 2023 04:11:06 +0000

This is a JavaScript function takes a parameter name and returns a URL for an image file with the specified name. It uses the URL constructor to create a new URL object, with the first argument being the path to the image file, which is constructed by concatenating the directory name "./dir/", the name passed as a parameter, and the file extension ".png". The second argument passed to the URL constructor is import.meta.url, which is a property that contains the base URL of the current module.

function getImageUrl(name) { return new URL(`../assets/images/${name}`, import.meta.url).href }
By calling the href property of the returned URL object, the function will return a string containing the full URL of the image file, including the protocol (e.g. "https:"), the hostname (e.g. "www.example.com"), and the path to the file.

setup() {
const getImageUrl{
new URL(../assets/images/image.jpg, import.meta.url)
}

return {
getImageUrl
}
}

:style="{background:`url(${getImageUrl(ImageNow) })` + `no-repeat center center/cover`}">

`

` export default { data () { return { images: ['city.jpg', 'house3.jpg','family.jpg'] }, methods: { getImageUrl(name) { return new URL(<code>../assets/images/${name}</code>,import.meta.url).href } }, computed: { ImageNow () { return this.images[Math.abs(this.currentImage)% this.images.length] } } } `

here is another example:
`

import {ref} from 'vue';

setup() {
const gallery= ref([
'gallery1.jpg' ,'gallery2.jpg',
'gallery3.jpg','gallery 4.jpg',
'gallery5.jpg' ,'gallery6.jpg',
] )

function getImageUrl(name) {
return new URL(../assets/images/${name}, import.meta.url).href
}

return {
getImageUrl , summary
}
}
}

How to Use Swiper JS in Vue Vite

kareem_sulaimon — Wed, 18 Jan 2023 02:11:43 +0000

Vue.js is a popular JavaScript framework for building web applications, and Vite is a lightweight development server that makes it easy to get started with Vue.js projects
Swiper is a popular JavaScript library for building touch-enabled, mobile-first carousels and sliders. swiper document here. For more in depth info, click the the below

https://swiperjs.com/vue

Create Vue Vite Application

In this section we will introduce how to scaffold a Vue Single Page Application on your local machine. The created project will be using a build setup based on Vite and allow us to use Vue Single-File Components (SFCs)

#npm init vue@latest

You will be presented with prompts for several optional features such as TypeScript and testing support.
If you are unsure about an option, simply choose NO by hitting enter for now.
Then follow the instructions.

cd <your-project-name>
npm install
npm run dev

Installing Swiper

Before we can start using Swiper, we need to install it in our project.
We can install Swiper from NPM

$ npm install swiper

 // import Swiper JS

Setup

Now that you have the Swiper library and its Vue.js wrapper installed, you need to configure your project to use them.
You will have to import the library and the styles in your main.js file.

import {swiper, swiperSlide} from 'swiper/vue';
import swiperCore, (/* { default global options } */) from "swiper";

import "swiper/swiper.min.css";
import "swiper/css/ (/*{ default global options }*/)

swiperCore.use([/* default global options */])

Usage

In your template, you can now use the swiper component to create a slider. The swiper component accepts a number of props that allow you to customize the slider, such as options and slidesPerView.

<div id="app">
    <swiper :options="swiperOptions" :slides-per-view="3">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
    </swiper>
  </div>
</template>

And you can define the options in your script part as

<script>
export default {
  name: 'App',
  data() {
    return {
      swiperOptions: {
        loop: true,
        pagination: {
          el: '.swiper-pagination',
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        autoplay: {
          delay: 5000,
        },
      },
    }
  },
}
</script>

Configuring the Slider

There are many options available for configuring the Swiper slider, including options for navigation, pagination, and autoplay. Here are a few examples of options that you can use to customize the slider:

slidesPerView: This option sets the number of slides that are visible at one time.

loop: This option enables the "loop" mode, which allows the slider to loop continuously.

Pagination: This option enables the pagination feature, which allows users to navigate through the slides by clicking on a pagination button.

autoplay: This option enables the autoplay feature, which automatically advances the slides at a set interval.

speed: This option sets the duration of the transition between slides.

You can check more here
https://swiperjs.com/vue