DEV Community: cesaruseche18

How to optimize your GatsbyJS Website to crush the LightHouse Google Report

cesaruseche18 — Fri, 17 Dec 2021 18:15:03 +0000

I created a website for one of my clients as a freelance and they are a traveling agency located in South America, the website was created using GatsbyJS as the front end and Strapi as the Backend, were the content manager is going to be able to handle all the content of the Website dynamically.

On this Tutorial I want to explain how to have a very high score on the Lighthouse report, this is going to help your website to rank much better and have a very high performance value, and users are going to have a great experience on your website.

How to handle images and lazy Loading with Gatsby?

You will need to use these plugins (gatsby-plugin-sharp, gatsby-transformer-sharp, gatsby-plugin-image).

This last plugin called gatsby-plugin-image it's very essential to handle lazy loading since you can specify which kind of lazy loading placeholder you want. Also images are going to render as a webp which google recommends having to improve your image performance. Here is an example how the image are going to render.

Also, I want to explain how to use the plugin. as the Gatsby documentation states "if you are using an image that will be the same each time the component is used, such as a logo or front page hero image, you can use the StaticImage component. The image can be a local file in your project or an image hosted on a remote server. Any remote images are downloaded and resized at build time." Here's an example.

        <StaticImage
          src="../images/Background-pic.jpg"
          className="hero-style"
          alt="omega homepage background picture"
          layout="fullWidth"
          placeholder="tracedSVG"
        />

But if you are using Dynamic images you will need to use GatsbyImage.

First, Add the image to your page query.

Then, Configure your image using childImageSharp

Finally, Display the image. Here's an example.

export const query = graphql`
  query getSingleDestino($titulo: String) {
    strapiDestinos(titulo: { eq: $titulo }) {
      descripcion
      imagen {
        localFile {
          childImageSharp {
            gatsbyImageData(placeholder: TRACED_SVG, layout: FULL_WIDTH)
          }
        }
      }
    }
  }
`;

const DestinosTemplate = ({ pageContext: { titulo }, data }) => {
  return (
    <>
      <GatsbySeo
        title={`Destino ${titulo}`}
        description={`Destino de Viaje ${titulo} con los mejores precios`}
        canonical={`https://omega-agencia.netlify.app/destinos/${titulo}`}
      <section>
        <div>
          <div className="destinos-single-page-title">
            <Title title={titulo} />
          </div>
          <div className="destinos-single-page-align">
            <div className="destinos-single-page-description">
              <div
                className="destinos-description"
                dangerouslySetInnerHTML={{
                  __html: data.strapiDestinos.descripcion,
                }}
              ></div>
            </div>
            <div className="destinos-single-page-image">
              <GatsbyImage
                image={getImage(data?.strapiDestinos.imagen.localFile)}
                alt={titulo}
                className="destinos-single-page-image-description"
                formats={["AUTO", "WEBP", "AVIF"]}
                fadeIn="false"
              />
            </div>
          </div>
          <CTAComponent />
          <ContactForm />
        </div>
      </section>
    </>
  );
};

One last thing to mention about optimizing images is that Google request that all the images have a width and height specify for each image, if not that would hurt your lighthouse performance score.

Finally, Please don't forget to always add an alternative text to each image that you have if you don't it could hurt your lighthouse score report and you SEO significantly.

How to minimize bundle size and page loading speed?

Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Total Blocking Time (TBT) are 3 performance metrics that google takes into account when scoring a site performance, it is very important to score very well on these 3 to have a high score.

Total Blocking Time (TBT) is defined as the total amount of time between First Contentful Paint (FCP) and Time to Interactive (TTI).

TBT is a measurement of how long the browser's main thread is blocked by long tasks, such as parsing JavaScript (JS).

To improve it there's a great solution to the JS execution time and the bundle size of your dependencies and that is called Preact.

Preact is a small (3kb), fast alternative to React. And thanks to gatsby-plugin-preact, switching your Gatsby-site from running on React to Preact is incredibly easy.

You just need to run the following command and you will be set to go after listing the 'gatsby-plugin-preact' under you plugin list on the gatsby-config.js

npm install --save gatsby-plugin-preact preact preact-render-to-string

If you want to check a dependency size before you install it to your project, this site (bundlephobia) it's a great tool to compare dependencies, find out the size of any dependency and find similar dependencies that weigh less to the ones that you want to install.

How to minimize the size Material UI, TailwindCSS, Boostrap5?
These are very big libraries and they could hurt your loading time since they are very big, the solution to minimize the size is using PurgeCSS to remove any unused classes.

Here's the website if you want to have a look, the content it's not finalize yet :) and the agency is buying a new domain at the moment of this article

https://omega-agencia.netlify.app/

I hope you will find this tutorial helpful, if you have any questions or you need any help please comment or send me a DM through Linkedin or Github.

Follow me on Github & Connect with me on LinkedIn

https://github.com/cesareuseche
https://www.linkedin.com/in/cesar-useche-profile/

How to build an SMTP email server for your React App

cesaruseche18 — Sun, 19 Sep 2021 22:31:46 +0000

Today, I want to share a small tutorial about how to create an email server using express that will work with your React app.

First, we will start with getting all the dependencies that we need to build the email server using ExpressJs.

Express: Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. APIs.
Nodemailer: Nodemailer is a module for Node.js applications to allow easy as cake email sending.
dotenv: dotenv is a zero-dependency module that loads environment variables from a .env file into process.env.
Body Parser: Node.js body parsing middleware.
Cors: CORS is a node.js package for providing a Connect/Express middleware that can be used to enable CORS with various options.

Inside your email server directory run the following on your terminal

npm install express nodemailer dotenv cors body-parser

Now let's start building the server establishing all the required dependencies for the server.

require('dotenv').config()

// routes.js
const router = require('express').Router()
const path = require('path')
const bodyParser = require("body-parser")
const nodemailer = require('nodemailer')

Then, we will create our server using cors, and that it will run on port 5000.

app.use(cors())
app.use(express.json())
app.use("/", router)
app.listen(5000, () => console.log("Server Running"))

Next, we will set up the authentication using our Gmail account credentials, it is really important that you remember .env file in the root directory instead of the current location.

const contactEmail = {
    //this is the authentication for sending email.
host: 'smtp.gmail.com',
port: 465,
secure: true, // use TLS
//create a .env file and define the process.env variables 
    with the credentials you want to use for your email server.
auth: {
    user: process.env.SMTP_TO_EMAIL,
    pass: process.env.SMTP_TO_PASSWORD,
},
}

const contactEmail = nodemailer.createTransport(contactEmail)
    transporter.verify((error, success) => {
if (error) {
    //if error happened code ends here
    console.error(error)
} else {
    //this means success
    console.log('Ready to send mail!')
}
})

Now lets build the API. We are also defining the schema for our JSON object (email).

Also, we are telling Nodemailer about the form data it will be receiving from the front-end and how it should translate said data into a structured email.

router.post("/contact", (req, res) => {
  from: process.env.SMTP_FROM_EMAIL,
    to: process.env.SMTP_TO_EMAIL,
    subject: 'New Contact Form Submission',
    text: `
      from:
      ${req.body.name}

      contact details
      email: ${req.body.email}
      phone: ${req.body.tel}

      message:
      ${req.body.message}`,
    }
contactEmail.sendMail(mail, error => {
    if (error) {
      res.json({ status: "ERROR" })
    } else {
      res.json({ status: "Message Sent" })
    }

Finally, we will connect the backend server with the React front end contact form component.

const ContactForm = () => {
const handleSubmitForm = async e => {
    e.preventDefault()
    setStatus("Sending...")
    const { name, email, phone, message } = e.target.elements
    let details = {
      name: name.value,
      email: email.value,
      phone: phone.value,
    }
    let response = await fetch("http://localhost:5000/contact", {
      method: "POST",
      headers: {
        "Content-Type": "application/json;charset=utf-8",
      },
      body: JSON.stringify(details),
    })
return (
    <>
       <form
          onSubmit={handleSubmitForm}
        >
        <input type="text" name="name" placeholder="Full Name" />
        <input type="email" name="email" placeholder="Email"/>
        <input type="phone" name="phone" placeholder="Phone number"/>
      </form>
   </>
)
}

I hope you can find this tutorial really helpful, please let me know if you have any questions, I would love to help!

Follow me on Github & Connect with me on LinkedIn

https://github.com/cesareuseche
https://www.linkedin.com/in/cesar-useche-profile/

How to build a React FAQ accordion

cesaruseche18 — Thu, 16 Sep 2021 23:22:05 +0000

Today, I want to share how to build an FAQ accordion using react. The FAQ section it's a really important section of an app or a website, since you have an opportunity to have important questions and answers about your product or even your industry and rank better organically in Google.

I hope I'm able to help anyone who wants or needs to build an FAQ section for their website or their app.

I'm leaving the URL of the code and styles at the end of the article and also a working demo if you want to check it out.

We will use 3 different hooks. useState, useRef and useEffect Hooks.

First, we will use the useState hook to change the state of the accordion, like so.

Then, we will use the useRef hook that allow us to mutate the useRef object.

Finally, we will use the useEffect hook to determine the height of the accordion dynamically once the user clicks on the accordion

const [active, setActive] = useState(false);

  const contentRef = useRef(null);

  useEffect(() => {
    contentRef.current.style.maxHeight = active
      ? `${contentRef.current.scrollHeight}px`
      : "0px";
  }, [contentRef, active]);

  const toggleAccordion = () => {
    setActive(!active);
  };

Then we have the JSX part of the code using an onClick and ternary operators, like so

return (
    <>
      <div className="App">
        <div>
          <button
            className={`question-section ${active}`}
            onClick={toggleAccordion}
          >
            <div>
              <div className="question-align">
                <h4 className="question-style">
                  Why do you like web developemnt
                </h4>
                <FiPlus
                  className={active ? `question-icon rotate` : `question-icon`}
                />
              </div>
              <div
                ref={contentRef}
                className={active ? `answer answer-divider` : `answer`}
              >
                <p>Because I love coding</p>
              </div>
            </div>
          </button>
        </div>
      </div>
    </>
  );

I hope you can find this short tutorial helpful, remember that here you have the url of the code and styles if you want to check it out.

Code: https://codesandbox.io/s/infallible-cloud-wiy4y?file=/src/App.js:465-1258

Demo: https://wiy4y.csb.app/

Follow me on Github & Connect with me on LinkedIn

https://github.com/cesareuseche
https://www.linkedin.com/in/cesar-useche-profile/

How to build a React Video Modal with Hooks

cesaruseche18 — Wed, 15 Sep 2021 23:14:29 +0000

I want to share with other Front End developers how to build a React Video modal from scratch.

I hope everyone finds this small tutorial really helpful.

I'm leaving the url of the working modal and code at the end of the tutorial if you want to test it and and check out the code

First, we need to use the useState Hook to change the state of the modal once the user clicks the modal button and clicks the close modal button.

Second, we will do the same to build a loader icon once the modal is open and waits to fetch the video from YouTube like so.

const [modal, setModal] = useState(false);
  const [videoLoading, setVideoLoading] = useState(true);

  const openModal = () => {
    setModal(!modal);
  };

  const spinner = () => {
    setVideoLoading(!videoLoading);
  };

Third, we will start working on the JSX part of the code setting up an onClick event to the button and using the ternary operator for the modal and the loader icon like so.

return (
    <div className="App">
      <button onClick={openModal} className="">
        Click Me!
        {modal ? (
          <section className="modal__bg">
            <div className="modal__align">
              <div className="modal__content" modal={modal}>
                <IoCloseOutline
                  className="modal__close"
                  arial-label="Close modal"
                  onClick={setModal}
                />
                <div className="modal__video-align">
                  {videoLoading ? (
                    <div className="modal__spinner">
                      <BiLoaderAlt
                        className="modal__spinner-style"
                        fadeIn="none"
                      />
                    </div>
                  ) : null}
                  <iframe
                    className="modal__video-style"
                    onLoad={spinner}
                    loading="lazy"
                    width="800"
                    height="500"
                    src="https://www.youtube.com/embed/4UZrsTqkcW4"
                    title="YouTube video player"
                    frameBorder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen
                  ></iframe>
                </div>
              </div>
            </div>
          </section>
        ) : null}
      </button>
    </div>
  );

Here I'm leaving the url of the code if you also want to check out the CSS styles and also the live demo.

Code: https://codesandbox.io/s/nkwxb?file=/src/App.js:423-1898
Live Demo: https://nkwxb.csb.app/

I hope I'm able to help anyone that wants to build a React Modal Video from scratch without using any library.

Follow me on Github & Connect with me on LinkedIn

https://github.com/cesareuseche
https://www.linkedin.com/in/cesar-useche-profile/

Caesar Text Cipher Solution CS50 Problem set 2

cesaruseche18 — Thu, 10 Jun 2021 17:51:59 +0000

On this week Problem set I had to make a text cipher solution made with C, this was a great challenge and it was very fun because you get used to working with arrays and ASCII values test a few solutions before finding the right solution to this problem.

If you are starting to Program with C and you are researching for a solution for this problem here I'm sharing how I made my solution that passed the CS50 check command.

Before starting remember that:

Every letter has an ASCII value
This is a great example to have a look before starting to code your solution.

First we start with a main function that it will take 2 arguments, first one takes number of arguments, and the second one takes an array of strings, like so.



int main(int argc, string argv[])

Then, we need to checked if the user inputs less than or more than two arguments the user should be re-prompt. The second check we need to do if one of the arguments that the user inputs is alpha if it not alpha the user needs to e re-prompt again, we are going to loop through the string and we are going to check if the argument isalpha.



int main(int argc, string argv[])
{
    if (argc != 2)
    {
        printf("Usage: ./ceasar k");
        return 1;
    }

    // checking if one of the arguments isalpha (we need an integer) - Looping through the string of integers
    for (int key = 0; key < strlen(argv[1]); key++)
    {
        if (isalpha(argv[1][key]))
        {
            printf("Usage: ./caesar key\n");
            return 1;
        }
    }

Now, we are going to use a function called atoi, atoi it takes a string and transform that string into an integer. Then, we ask the user to input the plaintext and we need to loop through each letter of the plaintext, if it's not alpha we are going to print the current element of the array.



 // iterates over the plain text with a for loop
    for (int i = 0, length = strlen(plaintext); i < length; i++)
    {
        if (!isalpha(plaintext[i]))
        {
            //prints the current element of the array if it's not alpha
            printf("%c", plaintext[i]);
            continue;
        }

Then, we are going to check if the current letter is uppercase and we calculate how far the current element is from lowercase "a" or uppercase "A".

Finally, we apply the formula that it was giving to us so we can know exactly the index of the ciphering of the letter that we want to cipher and we print the final result



 // index of the letter cyphering
        int ci = (pi + key) % 26;

        // printing the new character cyphered
        printf("%c", ci + offset);
    }


    printf("\n");
    return 0;

I hope this is helpful and as always I'm leaving the whole solution down below if you want to have a look. Keep coding, Keep learning!



#include <stdio.h>
#include <cs50.h>
#include <stdlib.h>
#include <string.h>
#include <ctype.h>


// main function takes 2 arguments, first one takes number of arguments, and the second one takes an array of strings
int main(int argc, string argv[])
{
    if (argc != 2)
    {
        printf("Usage: ./ceasar k");
        return 1;
    }

    // checking if one of the arguments isalpha (we need an integer) - Looping through the string of integers
    for (int key = 0; key < strlen(argv[1]); key++)
    {
        if (isalpha(argv[1][key]))
        {
            printf("Usage: ./caesar key\n");
            return 1;
        }
    }

    int key = atoi(argv[1]) % 26; // converts the ASCII to an integer from "20" to 20 as an interger

    // takes the plaintext from the user
    string plaintext = get_string("plaintext: ");

    printf("ciphertext: ");

    // iterates over the plain text with a for loop
    for (int i = 0, length = strlen(plaintext); i < length; i++)
    {
        if (!isalpha(plaintext[i]))
        {
            //prints the current element of the array if it's not alpha
            printf("%c", plaintext[i]);
            continue;
        }
        // checking if the current element it's uppercase
        int offset = isupper(plaintext[i]) ? 65 : 97;
        // calculating how far the current element is from lowercase "a" or uppercase "A"
        int pi = plaintext[i] - offset;
        // index of the letter cyphering
        int ci = (pi + key) % 26;

        // printing the new character cyphered
        printf("%c", ci + offset);
    }


    printf("\n");
    return 0;


}

Follow me on Github & Connect with me on LinkedIn

https://github.com/cesareuseche
https://www.linkedin.com/in/cesar-useche-profile/

React Navbar Change Background Color on Scroll - React JS - Gatsby

cesaruseche18 — Fri, 28 May 2021 03:10:04 +0000

Currently I'm developing a new website for a client that I have that is a travel agency located in Caracas, Venezuela. I'm using GatsbyJS and Strapi CMS to build the website.

On this tutorial I want to explain how to build a React Navbar smooth scroll background and logo change with GatsbyJS.

Prerequisite:

Knowledge of useState() React Hooks.
Knowledge of useEffect() React Hooks.

Create your `Navbar.js` Component.

In my case I created a Navbar.js components and a Navbar.css file where all the styles of the Navbar will live.

After you have your component boiler plate ready and Imported the useState and useEffect Hooks, create a state with the first element in my case I called navbar as an initial state having a value of false and the second element as function setNavbar() for updating the state.

Then create a function I called by changeBackground which sets the value of the state navbar to true when we scroll down the page equal to or more than 66px that in my case that is the height of my navbar. This is done with the help of window.scrollY function. I have used this 66px value in accordance with the value of our navbar’s height (66px). Otherwise the state value remains false.

/navbar scroll changeBackground function
  const changeBackground = () => {
    console.log(window.scrollY)
    if (window.scrollY >= 66) {
      setNavbar(true)
    } else {
      setNavbar(false)
    }
  }

To create the rendering of the background color change of the navbar you will have to create a useEffect where you will pass the changeBackground function and an event listener that will be on scroll and passing the changeBackground function, like so.

useEffect(() => {
    changeLogo()
    // adding the event when scroll change Logo
    window.addEventListener("scroll", changeLogo)
  })

Finally you will need to add a conditional statement to your navbar tag className like the following.

 <nav className={navbar ? "navbar active" : "navbar"}>

I hope this helps you, if you want to do the same with your navbar logo you will be able to see it since I'm attaching my whole navbar component down below. Keep coding, keep learning!

import React, { useState, useEffect } from "react"
// importing navbar styles
import "../assets/css/navbar.css"
import logo from "../assets/images/logo.svg"
import logoBlue from "../assets/images/logo-blue.svg"
// responsive menu toggle icon
import { FaAlignRight } from "react-icons/fa"
// all the navbar links coming from the links constants
import pageLinks from "../constants/links"
// Link from gatsby
import { Link } from "gatsby"
const Navbar = () => {
  //navbar scroll when active state
  const [navbar, setNavbar] = useState(false)

  //logo scroll when active
  const [navbarLogo, setNavbarLogo] = useState(logo)

  //navbar scroll changeBackground function
  const changeBackground = () => {
    console.log(window.scrollY)
    if (window.scrollY >= 66) {
      setNavbar(true)
    } else {
      setNavbar(false)
    }
  }

  useEffect(() => {
    changeBackground()
    // adding the event when scroll change background
    window.addEventListener("scroll", changeBackground)
  })

  //logo scroll function
  const changeLogo = () => {
    if (window.scrollY >= 60) {
      setNavbarLogo(logoBlue)
    } else {
      setNavbarLogo(logo)
    }
  }

  useEffect(() => {
    changeLogo()
    // adding the event when scroll change Logo
    window.addEventListener("scroll", changeLogo)
  })

  return (
    <nav className={navbar ? "navbar active" : "navbar"}>
      <div className="nav-center">
        <div className="nav-header">
          <Link to="/">
            <img src={navbarLogo} alt="logo" />
          </Link>
          <button type="button" className="toggle-btn">
            <FaAlignRight />
          </button>
        </div>
        <div className="nav-links">
          {pageLinks.map(links => {
            return (
              <Link key={links.id} to={links.url}>
                {links.text}
              </Link>
            )
          })}
        </div>
      </div>
    </nav>
  )
}

export default Navbar

Follow me on Github & Connect with me on LinkedIn

https://github.com/cesareuseche
https://www.linkedin.com/in/cesar-useche-profile/

CS50 Mario Problem set1 Solution

cesaruseche18 — Sun, 23 May 2021 23:34:56 +0000

I graduated a few months back from the 4Geeks Academy Full Stack Development Bootcamp, it was a great experience.

I have to say that attending a bootcamp helped me improve my coding skills quite a lot even though I had 10 months of previous experience as a Front End developer at the company I currently work for, I was able to gain a lot of knowledge in Back End development as well as Front End development.

After graduating the bootcamp and building a few Full Stack apps and decided to learn more about computer science, and I decided to enroll in the CS50 Computer Science Course from Harvard. I have to say that the classes are amazing the assignments are quite challenging and very interesting. I have to say that I'm learning quite a lot.

When I was doing the first week Lab and Problem set I decided that I will share my solutions on my blog and here I'm sharing and explaining my solution for the Mario Problem set #1.

Mario Problem set 1

Recreate the Mario Pyramid in C, albeit in text, using hashes (#) for bricks, a la the below. Each hash is a bit taller than it is wide, so the pyramid itself is also be taller than it is wide.

My Solution

It is good practice to create a pseudocode.txt file before you start coding any solution. This will help you to visualize and think for the solution of the problem before jumping to your IDE. Here I'm sharing my pseudocode.txt file.

1 - First I need to ask the user to input the height 

2 - The user needs to input a height between 1 and 8. No less than 1 or greater than 8

3 - If the user input it's not between 1 and 8 it reprompts the user to step one and ask the user to input a new height 

4 - The program iterates from 1 through the height that it was input by the user

4.1 - For loop to create the height of the row

4.2  // for loop create the width of the pyramid

4.3 - On that iteration i%\n prints the integer hashes on a new line

Create a mario directory and inside create a mario.c file then write only the C code that prompts (and re-prompts, as needed) the user for input. The user must input a value between 1 and 8.

If the user inputs a value less than 1 or greater than 8 the user must be re-prompt until it inputs a value between 1 and 8. For this we will create a "do while loop".

int main(void)
{
    int height;

    //Asking the user to input a Height
    do
    {
    height = get_int("Height: \n");
    }

     // The user can only input a Height between 1 and 8
    while 
    ((height < 1) || (height > 8)); 
}

Then you will need to do a for loop for the rows that will iterate from 1 through 8 depending on the input value from the user, and inside of the brackets you will need to create another for loop for the columns of the pyramid that will determine the width of the pyramid.

  // for loop to create the height of the row
    for (int row = 0; row < height; row++)
    {
        // for loop create the width of the pyramid
        for (int column = 0; column < height; column++)
        {
          // if else statement 
        }
    }

Finally, you will need to create and if else statement and print the result that will do the following:

If row plus column is greater than or equal than height -1 space print the hashes (to create the hashes)
Else add blank spaces to create the Pyramid form.

 {
            // if row plus column is greater than or equal than height -1 space print the hashes
            if (row + column >= height - 1) 
                printf("#");

            // adding spaces
            else 
            printf(" ");
 }
        printf("\n");

Here I'm leaving my full solution.

#include <cs50.h>
#include <stdio.h>

int main(void)
{
    int height;

    //Asking the user to input a Height
    do
    {
    height = get_int("Height: \n");
    }

     // The user can only input a Height between 1 and 8
    while 
    ((height < 1) || (height > 8)); 

    // for loop to create the height of the row
    for (int row = 0; row < height; row++)
    {
        // for loop create the width of the piramid
        for (int column = 0; column < height; column++)
        {
            // if row plus column is greater than or equal than height -1 space print the hashes
            if (row + column >= height - 1) 
                printf("#");

            // adding spaces
            else 
            printf(" ");
        }
        printf("\n");
    }
}

I hope this solution will help you to understand better the problem and how to solve it.

I will encourage anyone who is thinking about starting your coding career to check out the Harvard CS50 program certificate, it will give you a great tools to start your career and also the assignments and projects are very challenging and interesting.

Follow me on Github & Connect with me on LinkedIn

https://github.com/cesareuseche
https://www.linkedin.com/in/cesar-useche-profile/

Front-End React Native Tesla App Store

cesaruseche18 — Sun, 10 Jan 2021 18:25:46 +0000

What I built

Tesla Front-End App using React Native. Fully scrollable Front-End Tesla shop app.

Category Submission:

React Native App & Mobile App

Screenshots

Description

This is my first React Native App, it was very fun building this Front End Native app, it took me around 3 hours to finish this project, I'm very happy with the end project considering that this is my first build in React Native.

Link to Source Code

https://github.com/cesareuseche/tesla-app-native

Background

I wanted to start building React Native Apps and this is my first project using React Native, it is a very simple Front-End App, but it was a great opportunity to learn more about React Native. I always liked Tesla so That's why I choose to do this Front-End app

How I built it

This Project includes the following:

React Native
Custom Styles
Flatlist
Dimensions
snapToAlignment
decelerationRate
snapToInterval

DEV Community: cesaruseche18

How to optimize your GatsbyJS Website to crush the LightHouse Google Report

How to handle images and lazy Loading with Gatsby?

How to minimize bundle size and page loading speed?

How to build an SMTP email server for your React App

How to build a React FAQ accordion

How to build a React Video Modal with Hooks

Caesar Text Cipher Solution CS50 Problem set 2

React Navbar Change Background Color on Scroll - React JS - Gatsby

Prerequisite:

Create your Navbar.js Component.

CS50 Mario Problem set1 Solution

Mario Problem set 1

My Solution

Front-End React Native Tesla App Store

What I built

Category Submission:

Screenshots

Description

Link to Source Code

Background

How I built it

Create your `Navbar.js` Component.