DEV Community: angela300

A SIMPLE SMART CONTRACT

angela300 — Mon, 01 Apr 2024 07:05:48 +0000

This contract is a basic example of a cryptocurrency token contract, and it is written in Solidity, the programming language commonly used for Ethereum smart contracts.

This contract is a simple implementation of the ERC20 token standard, which is a widely adopted standard for fungible tokens on the Ethereum blockchain. It allows for basic token transfers, approvals, and allowance mechanisms.

Deploying smart contracts involves interacting with the Ethereum blockchain and requires a solid understanding of blockchain technology and smart contract development. Always ensure proper testing and auditing before deploying any smart contract to the mainnet or any public blockchain.

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

// Simple ERC20 Token Contract
contract SimpleToken {
    string public name;
    string public symbol;
    uint8 public decimals;
    uint256 public totalSupply;
    mapping(address => uint256) public balanceOf;
    mapping(address => mapping(address => uint256)) public allowance;

    event Transfer(address indexed from, address indexed to, uint256 value);
    event Approval(address indexed owner, address indexed spender, uint256 value);

    constructor(
        string memory _name,
        string memory _symbol,
        uint8 _decimals,
        uint256 _initialSupply
    ) {
        name = _name;
        symbol = _symbol;
        decimals = _decimals;
        totalSupply = _initialSupply * 10**uint256(_decimals);
        balanceOf[msg.sender] = totalSupply;
    }

    function transfer(address _to, uint256 _value) public returns (bool success) {
        require(_to != address(0), "Invalid recipient address");
        require(balanceOf[msg.sender] >= _value, "Insufficient balance");

        balanceOf[msg.sender] -= _value;
        balanceOf[_to] += _value;
        emit Transfer(msg.sender, _to, _value);
        return true;
    }

    function approve(address _spender, uint256 _value) public returns (bool success) {
        allowance[msg.sender][_spender] = _value;
        emit Approval(msg.sender, _spender, _value);
        return true;
    }

    function transferFrom(address _from, address _to, uint256 _value) public returns (bool success) {
        require(_to != address(0), "Invalid recipient address");
        require(balanceOf[_from] >= _value, "Insufficient balance");
        require(allowance[_from][msg.sender] >= _value, "Allowance exceeded");

        balanceOf[_from] -= _value;
        balanceOf[_to] += _value;
        allowance[_from][msg.sender] -= _value;
        emit Transfer(_from, _to, _value);
        return true;
    }
}

Login with Google on React Native Expo

angela300 — Mon, 18 Mar 2024 02:52:38 +0000

This will work for web, IOS and Adnroid
Create a new expo project:
npx create-expo-app tutorial-google
Install dependencies that we will need
Expo auth session will manage the sign in with Google
Expo-crypto and expo-web-browser are core dependencies of expo-auth-session
We will also need react-native-web, react-dom and @expo/webpack-config
We will also need react native async storage
npx expo install expo-auth-session expo-crypto expo-web-browser react-native-web react-dom @expo/webpack-config @react-native-async-storage/async-storage
Create a project in Google cloud:

Select the project
We are going to create an OAuth client ID
Go to API’s and services and click on OAuth consent screen

On enable APIs & services, click on Create credentials:

After clicking on Create credentials, on the dropdown screen that comes up, click on OAuth Client ID
Next click on configure consent screen

Click on External - availabe to any User with a Google test account and click on create.
This is the consent screen

Under app name, fill in ‘google-tutorial’ or your preferred name
Under user support email, provide one
You can specify a logo, app domain, which are all optional
Under developer contact information, add another email
Hit on save and continue
Under scopes, you can add users if you want.
Click on save and continue
Now we have a consent screen.
Lets get a client id for the web:
Click on credentials, and under application type, click on Web application:
Under authorized Javascript Origins, we need to add some URL’s, which are the URL’s for the application
To get the URL, run the project on the web:
npx expo start –web –https
The app will open in the web, copy that URL and add it:
https://localhost:19006
This is the same link under Authorized Redirect URI’s
Click on ‘Create’
On the screen that pops up, Copy the Client ID

On the App.js file in your Expo app, paste the client ID on there for later use.
Lets also get the ID’s for IOS:
Click on create credentials, Click on OAuth Client ID, the select IOS under Application type
For IOS, we will need the bundle ID.
On your app’s root folder:
Run the command, npx expo prebuild
Under the package name add: com.betomoedamo.tutorialgoogle
We also have the IOS Identifier which is going to be the same as package name above
Hit Enter
Once this is completed, we can see that the bundle identifier has been added under IOS:

Copy that bundle Identifier and paste it in the Bundle ID field under Create OAuth Client ID:
Hit create, and on the popup screen that comes up, copy the client ID.
Paste for later use in your App.js file, just as you did with the client ID for the web
Create a credential for Android
Click on create credentials, Click on OAuth Client ID, the select Android under Application type
Under package name, paste the name attached to “package” under android in app.js. It will the same as the Bundle ID for IOS
We will also need a SHA-1 certificate fingerprint
To obtain this for android,
run this command in your app’s root folder: expo credentials:manager
Under platform, select Android
Under ‘You are currently in a directory with @betomoedano/tutorial-google experience. Do you want to select it?...’, Select Yes
Under ‘What do you want to do?’ Select Update upload Keystore
Then select Generate new keystore
Select on Go back to the experience overview, and here, we have the SHA-1 fingerprint

Copy the SHA-1 certificate fingerprint and paste it under the required field in creating credentials.
Hit create and on the pop up screen that comes up, copy the client ID an paste it your App.js file for later use
That was the most difficult part, now we can start creating the code for the application
In app.js, import WebBrowser:
Import * as WebBrowser from “expo-web-browser”
Initialize the WebBrowser with this command:
WebBrowser.maybeCompleteAuthSession();
Also add this import in your app.js:
Import * as Google from “expo-auth-session/providers/google”
To save the information of the user when they sign in so that they do not have to sign in again, we will use async storage:
Import AsyncStorage from “@react-native-async-storage/async-storage”
Also add this to the imports section:
Import * as React from “react”
Add a variable userInfo and initialize it to null:
Const [userInfo, setUserInfo] = React.useState(null);
Next, lets create a hook that is going to enable us to signin in all of our applications:
Here will now add the client ID’s we had saved for later use.



Const [request, response, promptAsync] = Google.useAuthRequest({
})

Populate the above array to appear as this:

We will need to prompt the user to signin with Google, by adding this button in the app:

Let’s now run the app on the web and see:

This is working, though it’s not handling the response,
Let’s go back to the application and handle the response
We will need to create a get userinfo function and a handlesigninwithgoogle function:

The getuserinfo function is called inside the signinwithgoogle function.

To run the signinwithgoogle function, we will now need to create a useEffect hook:

To enable sign out, lets add a button to delete local storage:

We added the json.Stringify(userInfo) above to test if the sign in and delete local storage are working. You can test them out and see.
Test on the web
On a successful sign in with google, we have all the information about the user:

Also test if its working on IOS and android:
To test it in android and IOS, we need to provide a scheme, which will help us redirect the user back to the application
Add the scheme into your app.json as shown below:

You can name the scheme as you want. In my case, I named it ‘myGoogleApp’
A) Test on IOS
Next we need to build the app:
To build for IOS, run the command, npx expo run:ios
With no user signed it yet, the userInfo will be null:

On proceeding to signin with google, you might encounter this error:

To remove the error, edit your sign in with google button to appear as this:

To also ensure the userinfo appears in a nice format, edit the text stringify to appear as this:

b) Test on android:
Now also text if its working on android.
We need to create the actual build for android: npx expo run:android
Before sign in, it will appear like this in android:

Upon a successful sign in, it will appear as follows:

Thanks for reading through!

Getting Started with Blockchain Programming: A Beginner's Guide

angela300 — Mon, 18 Mar 2024 02:28:49 +0000

Blockchain programming involves developing applications that leverage the decentralized and immutable nature of blockchain technology. In this guide, we'll explore the fundamental concepts of blockchain programming, discuss the popular blockchain platforms, and provide a step-by-step approach to start building blockchain applications.

Understanding Blockchain Technology:

What is blockchain?
Core principles: decentralization, transparency, immutability, and security.
Components of a blockchain: blocks, transactions, consensus mechanisms.
Exploring Blockchain Platforms:

Ethereum: A leading blockchain platform for decentralized applications (DApps) and smart contracts.
Hyperledger Fabric: An enterprise-grade permissioned blockchain framework.
Binance Smart Chain (BSC): A blockchain platform compatible with Ethereum Virtual Machine (EVM) for deploying smart contracts.
Solana: A high-performance blockchain platform designed for scalability and low transaction fees.
Polkadot: A multi-chain blockchain platform interoperable with other blockchains.
Learning Blockchain Programming Languages:

Solidity: A high-level language for writing smart contracts on Ethereum.
JavaScript: Used for frontend development and interacting with blockchain networks via web3.js or ethers.js.
GoLang: Preferred for building blockchain infrastructure and core blockchain protocols.
Rust: Used in projects like Polkadot for building blockchain runtime environments.
Setting Up Your Development Environment:

Installing necessary software: Node.js, npm, Git, IDE (e.g., Visual Studio Code).
Choosing a blockchain platform and setting up a development environment.
Installing development tools and libraries specific to your chosen platform.
Writing Your First Smart Contract:

Understanding the structure of a smart contract.
Writing a simple smart contract using Solidity.
Compiling and deploying the smart contract to a local blockchain network.
Interacting with Blockchain Networks:

Using web3.js or ethers.js to interact with Ethereum and Ethereum-compatible blockchains.
Sending transactions, querying data, and listening to events.
Developing frontend interfaces for blockchain applications.
Testing and Debugging:

Writing unit tests for smart contracts using testing frameworks like Truffle or Hardhat.
Using debugging tools and techniques to identify and fix issues in smart contracts.
Deploying Blockchain Applications:

Deploying smart contracts to testnets and mainnet.
Considerations for gas fees, transaction confirmation times, and network congestion.
Upgrading and managing deployed contracts.
Security Best Practices:

Understanding common security vulnerabilities in smart contracts (e.g., reentrancy, integer overflow).
Implementing security measures such as access control, input validation, and code audits.
Following best practices for secure smart contract development.
Resources and Further Learning:

Official documentation and developer guides for blockchain platforms.
Online courses and tutorials on blockchain programming.
Community forums, developer communities, and hackathons.
Books and research papers on blockchain technology and programming.

Blockchain programming offers a unique opportunity to build decentralized, transparent, and secure applications that can revolutionize various industries.

Let's take a look at one of blockchain's core programming languages, Solidity

Solidity is a high-level programming language specifically designed for writing smart contracts on blockchain platforms like Ethereum. Smart contracts are self-executing contracts with the terms of the agreement between the buyer and the seller directly written into code. They automatically enforce and execute these terms when predefined conditions are met. This guide will provide a step-by-step introduction to Solidity, covering the basics of smart contract development for Ethereum.

Understanding Smart Contracts:

What are smart contracts?
Advantages of smart contracts.
Applications of smart contracts in various industries.
Setting Up Your Development Environment:

Installing Node.js and npm.
Installing Solidity compiler (solc).
Choosing an Ethereum development framework (e.g., Truffle, Hardhat).
Setting up a local blockchain network for testing (e.g., Ganache).
Basics of Solidity:

Syntax and structure of Solidity code.
Data types: uint, int, address, string, bool, etc.
Variables and constants.
Functions: declaration, parameters, return values.
Control structures: if-else statements, loops.
Writing Your First Smart Contract:

Creating a simple "Hello World" smart contract.
Deploying the contract to a local blockchain network.
Interacting with the contract using Remix IDE or Truffle console.
Understanding Ethereum Development Tools:

Remix IDE: An online integrated development environment for Solidity.
Truffle: A popular development framework for Ethereum that provides tools for compiling, testing, and deploying smart contracts.
Hardhat: Another powerful development environment for Ethereum with built-in tasks for testing and deployment.
Advanced Solidity Concepts:

Inheritance: Reusing code with inheritance.
Modifiers: Adding conditions to functions.
Events: Emitting events to notify external applications.
Error handling: Handling exceptions and errors.
Testing Your Smart Contracts:

Writing unit tests using frameworks like Mocha and Chai.
Testing contract behavior under different scenarios.
Debugging tools and techniques.
Deploying Smart Contracts:

Deploying contracts to the Ethereum mainnet or testnets.
Choosing the right gas price and gas limit.
Interacting with deployed contracts using web3.js or ethers.js.
Best Practices and Security Considerations:

Design patterns for smart contract development (e.g., Factory, Proxy, State).
Security vulnerabilities and common pitfalls.
Code review and auditing.
Resources and Further Learning:

Official Solidity documentation.
Online tutorials and courses.
Community forums and developer communities.
Books and research papers on blockchain and smart contract development.
Conclusion:
Solidity opens up a world of possibilities for building decentralized applications (DApps) and executing trustless transactions on the Ethereum blockchain. By mastering the basics of Solidity and understanding smart contract development principles, you can contribute to the growing ecosystem of decentralized finance (DeFi), non-fungible tokens (NFTs), and other blockchain-based innovations. Start your journey into the exciting world of blockchain development with Solidity today!

Simplifying Data Fetching from Sanity CMS in a ReactJS Application

angela300 — Wed, 13 Mar 2024 05:24:18 +0000

Sanity is a powerful content management system (CMS) that empowers developers to efficiently manage and organize content for their applications. In this article, we'll explore how to seamlessly integrate Sanity with a ReactJS application, enabling developers to fetch existing data from Sanity and leverage it within their projects.

Sanity CMS: Empowering Content Management

Sanity provides developers with a flexible and intuitive platform for content management. With its robust features and user-friendly interface, Sanity allows users to create, edit, and publish content across various channels effortlessly. By decoupling content from presentation, Sanity enables developers to maintain content consistency while adapting it to different layouts and formats, making it an ideal choice for modern web applications.

Integrating Data Fetching from Sanity into a ReactJS Application

To integrate Sanity with a ReactJS application, I followed the guide provided on the Sanity.io website titled "Create a Single Page Application with React and Sanity" (link: https://www.sanity.io/guides/create-a-single-page-application-with-react-and-sanity). This guide walks through the process of setting up a React application with Sanity and fetching existing data from the CMS.

By following the steps outlined in the guide, I was able to establish a seamless connection between my ReactJS application and Sanity CMS. This enabled fetching data from Sanity and integrating it into my application's components, and allowed for dynamic content rendering and personalized user experiences.

Integrating Sanity CMS with a ReactJS application offers a powerful solution for content management and data fetching. The flexibility and capabilities of Sanity enables the creation of robust and scalable applications that deliver rich and dynamic content to users. Whether you're building a simple website or a complex web application, integrating Sanity with ReactJS ensures that your project is well-equipped to meet the demands of modern web development.

EmailJS: Simplifying Email Sending in a Web App

angela300 — Wed, 13 Mar 2024 04:59:09 +0000

EmailJS is a powerful service that simplifies the process of sending emails directly from client-side JavaScript code. It offers a convenient solution for developers who want to incorporate email functionality into their web applications without the need to set up and maintain a backend server for handling email sending.

Importance of EmailJS:

Simplicity and Ease of Use: EmailJS abstracts away the complexities of setting up email servers and APIs, providing a straightforward interface for sending emails. Developers can focus on building their applications without worrying about email infrastructure.
Client-Side Email Sending: With EmailJS, emails can be sent directly from the client-side code of a web application. This is particularly useful for single-page applications (SPAs) and client-side frameworks like React, Angular, or Vue.js, where server-side processing may not be feasible or desired.
No Backend Required: Since EmailJS handles the email sending process entirely on the client-side, there's no need to maintain a backend server solely for sending emails. This reduces development complexity and saves resources, especially for smaller projects or prototypes.
Cost-Effective Solution: EmailJS offers a free tier that allows developers to send a certain number of emails each month without incurring any costs. This makes it an attractive option for individuals and small businesses with limited budgets.
Customizable Templates: EmailJS provides a template-based approach to email composition, allowing developers to create customizable email templates for various use cases. Templates can include dynamic content, making it easy to personalize emails based on user input or application data.
Integration with Third-Party Services: EmailJS integrates seamlessly with popular third-party services like Gmail, Outlook, and SendGrid, among others. This enables developers to leverage the features and reliability of these email providers while using EmailJS as the interface for sending emails.
Automation and Workflow: EmailJS supports automation and workflow features, allowing developers to set up triggers and actions based on specific events in their application. This enables automated email notifications, reminders, and other communication workflows without manual intervention.

To use Email JS in a React App and send up to 200 free emails per month, follow this link,
telerik.com/blogs/sending-emails-react-app-using-emailjs

Fetch data from Sanity content management system in an Expo app

angela300 — Mon, 11 Mar 2024 20:04:36 +0000

Have you used the Sanity content management system before?
Sanity is a powerful content management system (CMS) that allows developers to easily manage and organize content for their applications. In this article, we'll explore how to integrate Sanity with an Expo app, enabling you to fetch existing data from Sanity.

Expo is an open-source framework and platform for building universal React applications, with a focus on mobile development. It allows developers to create high-quality iOS and Android apps using JavaScript and React Native

Let's create a project that fetches data from Sanity in an Expo app. We'll start by setting up a new Sanity project, defining schemas, deploying it, and then creating an Expo app to fetch and display the data.

Setting up Sanity:

Installing Sanity CLI:

Open your terminal or command prompt.

Run the following command to install the Sanity CLI globally:
npm install -g @sanity/cli
Initialize a new Sanity project:
Run the following command to initialize a new Sanity project:
sanity init
Follow the prompts to create a new project. You can choose the default options for most settings.

Define schemas:
In your Sanity project directory, navigate to the schemas directory.
Create a new file named post.js.
Define the schema for a blog post inside post.js:

// schemas/post.js

export default {
    name: 'post',
    title: 'Post',
    type: 'document',
    fields: [
      {
        name: 'title',
        title: 'Title',
        type: 'string',
      },
      {
        name: 'body',
        title: 'Body',
        type: 'text',
      },
    ],
  };

Deploy the Sanity project:
Once you've defined your schemas, deploy your Sanity project to make the schemas and data accessible via an API:
Follow the prompts to deploy your project.

sanity deploy
The above command is to be run inside the sanity folder that resulted from initializing sanity above with sanity init

Creating the Expo app

Initialize a new Expo app

In a separate directory, create a new Expo app:

expo init sanityExpoApp
Choose the blank template when prompted.

Install required packages:

Navigate into the newly created Expo app directory:
cd sanityExpoApp
Install the necessary packages for fetching data from Sanity:
npm install @sanity/client
Set up Sanity client:
Create a new file named sanityClient.js in the root of your Expo project directory.
Configure a Sanity client inside sanityClient.js:

// sanityClient.js

import sanityClient from '@sanity/client';

const client = sanityClient({
  projectId: 'your-project-id',
  dataset: 'your-dataset-name',
  useCdn: true, // Enable the Content Delivery Network (CDN) for faster responses
});

export default client;

Replace 'your-project-id' and 'your-dataset-name' with your actual Sanity project ID and dataset name.

Fetch data in the Expo app:
Open the App.js file in your Expo project directory.
Replace the existing code with the following code:

// App.js

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import client from './sanityClient';

const App = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const result = await client.fetch('*[_type == "post"]');
        setPosts(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <View>
      <Text>Posts:</Text>
      {posts.map((post, index) => (
        <View key={index}>
          <Text>{post.title}</Text>
          <Text>{post.body}</Text>
        </View>
      ))}
    </View>
  );
};

export default App;

Run the Expo app:
Run your Expo app using the following command:
expo start

Unlocking Opportunities: Amazon Certifications and Their Benefits

angela300 — Thu, 07 Mar 2024 12:29:01 +0000

In the ever-evolving landscape of e-commerce and cloud computing, Amazon stands as a titan, continuously shaping industries and driving innovation. Amazon Web Services (AWS), in particular, has revolutionized the way businesses operate in the digital realm. With its vast array of services and solutions, AWS has become the backbone of countless organizations worldwide. To navigate this dynamic ecosystem effectively and capitalize on its full potential, individuals are turning to Amazon certifications.

Understanding Amazon Certifications

Amazon offers a comprehensive range of certifications designed to validate expertise and proficiency in various AWS technologies. These certifications cater to individuals at different stages of their careers, from beginners to seasoned professionals, covering a broad spectrum of roles such as architects, developers, sysops administrators, and more.

The certification paths typically include foundational, associate, professional, and specialty levels, each targeting specific skill sets and knowledge domains. They cover essential topics like cloud computing concepts, security best practices, networking fundamentals, database management, machine learning, and beyond.

Benefits of Amazon Certifications

1. Validation of Expertise

Amazon certifications serve as tangible proof of one's skills and knowledge in AWS technologies. They are recognized globally and endorsed by industry leaders, making them invaluable assets for individuals seeking career advancement or transition into roles that demand AWS proficiency.

2. Career Advancement

In today's competitive job market, possessing Amazon certifications can significantly enhance career prospects. Employers actively seek candidates with AWS expertise to drive digital transformation initiatives, manage cloud infrastructure, optimize performance, and ensure security and compliance.

3. Enhanced Credibility

Earning an Amazon certification demonstrates a commitment to professional development and continuous learning. It instills confidence in employers, clients, and peers, showcasing an individual's dedication to mastering AWS services and staying abreast of industry trends and best practices.

4. Expanded Opportunities

With the widespread adoption of AWS across diverse industries, certified professionals have access to a myriad of job opportunities globally. Whether it's in technology, finance, healthcare, retail, or any other sector, AWS skills are in high demand, opening doors to exciting career paths and lucrative roles.

5. Higher Earning Potential

Professionals with Amazon certifications often command higher salaries compared to their non-certified counterparts. The specialized skills and expertise acquired through certification training translate into added value for employers, justifying premium compensation packages.

6. Stay Ahead of the Curve

AWS continually introduces new services, features, and updates to its platform. By pursuing Amazon certifications, individuals stay ahead of the curve, acquiring the latest knowledge and skills required to leverage cutting-edge technologies and drive innovation within their organizations.

How to Benefit from Amazon Certifications

1. Identify Your Career Goals:

Before embarking on an Amazon certification journey, assess your career aspirations and determine which certification aligns with your objectives. Whether you aim to become a cloud architect, developer, data engineer, or security specialist, choose a certification path that best suits your interests and expertise.

2. Invest in Training and Preparation:

Preparation is key to success in earning Amazon certifications. Leverage various training resources provided by AWS, including official study guides, online courses, practice exams, and hands-on labs. Additionally, consider enrolling in accredited training programs or joining study groups to enhance your learning experience and gain practical insights from industry experts.

3. Hands-On Experience:

Gain practical experience by working on real-world projects and experimenting with AWS services in a sandbox environment. Hands-on practice not only reinforces theoretical concepts but also enhances problem-solving skills and confidence in navigating the AWS platform.

4. Schedule and Take the Exam:

Once you feel adequately prepared, schedule your certification exam through the AWS Training and Certification portal. Be sure to review the exam blueprint, understand the format and objectives, and familiarize yourself with the exam environment. On the day of the exam, remain calm, focused, and manage your time effectively to maximize your chances of success.

5. Continuous Learning and Renewal:

AWS certifications require periodic renewal to ensure that certified professionals stay current with evolving technologies and best practices. Stay engaged with the AWS community, participate in forums, webinars, and events, and pursue advanced certifications to further enhance your skills and maintain your competitive edge in the industry.

How do you best prepare for an amazon certification exam?

Understand the Exam Blueprint:
Each AWS certification exam has a detailed blueprint outlining the topics covered, weighting of each domain, and the skills assessed. You need to familiarize yourself with the exam blueprint to understand the scope of the exam and prioritize your study efforts accordingly.
Choose the Right Study Materials:
Utilize a variety of study materials, including official AWS documentation, whitepapers, online courses, practice exams, and books authored by industry experts. AWS offers comprehensive training resources through the AWS Training and Certification portal, including free digital training courses and paid instructor-led training options.
Utilize the free digital training courses offered by AWS before attempting your exam, as they are highly informative and closely aligned with the exam content. These courses provide valuable insights and cover topics that are similar to those you'll encounter in the exam, helping you to familiarize yourself with the material and increase your chances of success.
For example: Before taking on a Solutions Architect Beginner certification, I’ld first complete related courses on AWS skill builder, https://explore.skillbuilder.aws/
Hands-On Practice:
Practical experience is crucial for mastering AWS concepts and services. Set up a free AWS account or utilize AWS Free Tier to experiment with different services, build projects, and solve real-world scenarios. Hands-on practice not only reinforces theoretical knowledge but also helps you become proficient in navigating the AWS Management Console and using AWS CLI (Command Line Interface).
Amazon certifications offer a gateway to a world of opportunities in the rapidly expanding realm of cloud computing. Whether you're a seasoned IT professional or a novice looking to break into the field, investing in Amazon certifications can propel your career to new heights, unlock doors to exciting roles, and position you as a trusted expert in AWS technologies. Embrace the journey of continuous learning, and let Amazon certifications be your passport to success in the digital age.

Best Hosting Techniques for 2024

angela300 — Thu, 07 Mar 2024 09:42:22 +0000

Hello there good morning! In today's digital era, deploying web applications has become an essential step in bringing your ideas to life. With the rise of frameworks like React, Vue.js, and Angular, you have a plethora of options for hosting their applications. However, choosing the right hosting platform can be daunting, especially with the evolving landscape of technology and services. In this article, I will explore the best hosting techniques for 2024, focusing primarily on deploying React applications.

Introduction to React Hosting

React, a popular JavaScript library for building user interfaces, has gained immense traction in recent years due to its component-based architecture and virtual DOM rendering. Deploying React applications involves serving static files or integrating with backend services, depending on the project's requirements. In 2024, you have access to numerous hosting platforms, each offering unique features and capabilities.

1. Vercel:

Vercel stands out as a top choice for deploying React applications, particularly those built with Next.js. With seamless integration and support for serverless functions, Vercel simplifies the deployment process. Its hobby plan is free, making it accessible for you to get started quickly.

Deployment using the Vercel CLI:

Install Vercel globally using npm.
Authenticate with your account using vercel login.
Navigate to your project directory and deploy using vercel.
Follow the prompts to configure your deployment settings.

2. Firebase:

Firebase, a product of Google, offers a comprehensive development platform with hosting capabilities. While Firebase is known for its real-time database and authentication services, its hosting feature provides a robust solution for deploying React applications. The Spark plan is free, making it suitable for small to medium-sized projects.

Deployment using the Firebase CLI:

Install Firebase CLI globally using npm.
Authenticate with your Firebase or Google account using firebase login.
Initialize your project using firebase init.
Build your React project using npm run build and deploy using firebase deploy.

3. Netlify:

Netlify offers a modern workflow for building and deploying web applications, including React apps. With features like continuous deployment from Git repositories and serverless functions, Netlify streamlines the deployment process. Its free starter plan makes it an attractive option for you.

Deployment using the Netlify CLI:

Build your project using npm run build.
Install Netlify CLI globally using npm.
Link your project to a site using netlify init.
Specify the build directory and deploy using netlify deploy.

4. GitHub Pages:

GitHub Pages provides static site hosting directly integrated into the GitHub platform. While it's ideal for simple static websites, it lacks support for server-side code. However, for hosting open-source projects, GitHub Pages offers a free solution.

Deployment with GitHub Pages:

Create a repository for your project on GitHub.
Initialize the repository, add your files, and commit changes.
Set up the homepage field in your package.json.
Deploy your app using npm run deploy.

5. Surge:

Surge offers a simple command-line interface for publishing web applications. While it's limited to static webpages, Surge's ease of use makes it a convenient choice for deploying React apps. Its free basic plan caters to you on a budget.

Deployment using the Surge CLI:

Build your project using npm run build.
Install Surge CLI globally using npm.
Navigate to the build directory and deploy using surge.

6. Render:

Render, a fully managed cloud platform, offers seamless deployment directly from Git repositories. While it's relatively new compared to other platforms, Render provides features like private services and automatic HTTPS. Its free individual plan makes it accessible for you.

Deployment using the Render dashboard:

Create an account on Render and connect your Git repository.
Configure your project settings and deploy from the dashboard.

7. GitLab Pages:

GitLab Pages allows you to build, test, and deploy static websites directly from a GitLab repository. With continuous deployment and custom domains support, GitLab Pages caters to all users within the GitLab ecosystem.

Deployment with GitLab Pages:

Create a repository on GitLab for your project.
Initialize the repository, add your files, and commit changes.
Set up the homepage field in your package.json.
Configure CI/CD using a .gitlab-ci.yml file and deploy.

8. AWS Amplify:

AWS Amplify, a development platform from Amazon Web Services, enables quick deployment of mobile and web applications. While it offers a wide range of features, including authentication and APIs, AWS Amplify may be more complex compared to other platforms. Its free tier provides you with a starting point for hosting React apps.

Deployment using the AWS Amplify CLI:

Install the AWS Amplify CLI globally using npm.
Configure your project and initialize Amplify.
Deploy your React app using amplify publish.

9. Cloudflare Pages:

Cloudflare Pages, a JAMstack platform, offers seamless integration with GitHub repositories for deploying web applications. While it focuses on frontend development, Cloudflare Pages provides fast and easy deployment of React apps. Its free plan and it does greatly help when seeking a hassle-free hosting solution.

Deployment using the Cloudflare CLI:

Install the create-cloudflare package globally using npm.
Configure your project and deploy to Cloudflare Pages.

Conclusion

By choosing the right hosting solution based on project requirements and budget, you can bring their React applications to production with ease. Whether it's a small personal project or a large-scale application, the hosting techniques discussed in this article provide you with the flexibility and scalability needed to succeed in today's digital landscape.

Just before you leave, if you enjoy exploring programming on different and creative paradigms, you can share it on Belleapp... https://belleapp-79fb4.firebaseapp.com/

Your first Django app with ReactJs frontend

angela300 — Thu, 15 Feb 2024 17:51:41 +0000

ReactJS is a popular JavaScript library used for building user interfaces, and Django is a high-level Python web framework that is widely used for building web applications. Connecting these two powerful tools can produce a robust web application.

In this tutorial, we will learn how to connect ReactJS and Django Framework using A Hello World! application.

Make sure you already have Node.js and Python installed on your system

On your vs code terminal, open a new window.

Open a new terminal and navigate to the desktop.

Run this command,

django-admin startproject myproject

If you got this error:

Activate Virtual Environment (if applicable). If you're working within a virtual environment, make sure it's activated. You can activate it by running:

pipenv shell

After the error is solved, now run:

django-admin startproject myproject

This will create a new directory called myproject which will have the basic structure of a Django project.

Create a new React application in the myproject directory using the following command:

npx create-react-app myapp

Install Required Packages

Once the project and application are created, we need to install some packages. For Django, install Django Rest Framework and Django Cors Headers. For React, install Axios for making HTTP requests.

To install Django Rest Framework and Django Cors Headers, run the following command in the myproject directory:

pip install djangorestframework django-cors-headers

To install Axios, run the following command inside the myapp directory:

npm install axios

Build the API Endpoints in Django

After installing the required packages, we can start building the API endpoints in Django. Create a new Django app to handle the API requests. The API endpoint will return JSON data when we make HTTP requests to it. We can use Django Rest Framework to build the API endpoints.

To create a new Django app, run the following command inside the myproject directory:

python manage.py startapp myapi

Your directory now looks like this:

The new directory called myapi has the basic structure of a Django app.

Next, Open the settings.py file inside the myproject directory and add the following lines of code:

INSTALLED_APPS = [
    'rest_framework',
    'corsheaders',
    'myapi',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
]

CORS_ORIGIN_ALLOW_ALL = True

These lines of code will add the rest_framework, corsheaders, and myapi apps to the INSTALLED_APPS list, add the CorsMiddleware to the MIDDLEWARE list, and allow all origins to make cross-origin requests.

When we try to make an HTTP request from a different origin (e.g., from the React app to the Django API), we may run into a CORS error. To fix this, we need to add the Django Cors Headers package to the Django project. This package will add the necessary headers to allow cross-origin requests.

Next, open the views.py file inside the myapi directory and add the following lines of code:

from django.shortcuts import render
from rest_framework.decorators import api_view
from rest_framework.response import Response

@api_view(['GET'])
def hello_world(request):
    return Response({'message': 'Hello, world!'})

This code defines a new API endpoint that returns a JSON response with the message “Hello, world!”.

Add URLs :

Open the urls.py inside the myproject directory and add these lines:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('myapi.urls'))
]
Finally, Create the urls.py file inside the myapi directory and add the following lines of code:
from django.urls import path
from . import views

urlpatterns = [
    path('hello-world/', views.hello_world, name='hello_world'),
]

This code defines a new URL pattern that maps to the hello_world function in views.py.

Next, We will create a React component that makes HTTP requests to the API endpoints. We will use Axios to make the HTTP requests. Once we receive the JSON data, we can display it on the web page using React components.

Create a new file called HelloWorld.js inside the src directory of the myapp directory, and add the following lines of code:

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

function HelloWorld() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    axios.get('http://localhost:8000/hello-world/')
      .then(response => {
        setMessage(response.data.message);
      })
      .catch(error => {
        console.log(error);
      });
  }, []);

  return (
    <div>
      <h1>Hello, World!</h1>
      <p>{message}</p>
    </div>
  );
}

export default HelloWorld;

This code defines a new React component called HelloWorld that makes an HTTP GET request to the hello-world API endpoint we defined earlier. The response data is stored in the message state, which is displayed on the web page.

Finally, we will now render the HelloWorld component inside the App.js file in the src directory of the myapp directory. Replace the contents of App.js with the following lines of code:

function App() {
  return (
    <div>
      <HelloWorld />
    </div>
  );
}

export default App;

This code renders the HelloWorld component inside the div element with the root ID.

To run the project, open two terminal windows.

In the first window, navigate to the myproject directory and run the following command:

python manage.py runserver

This will start the Django development server.

In the second window, navigate to the myapp directory and run the following command:

npm start

This will start the React development server.

Open your web browser and navigate to http://localhost:3000/. You should see the message "Hello, world!" displayed on the web page.

A wordpress plugin to add daily tasks to your website

angela300 — Wed, 31 Jan 2024 10:09:05 +0000

With Chatgpt

On chatgpt, type this request:

Create the code for a wordpress plugin that adds a 'Daily task' window to the wordpress dashboard. The Daily Task window should be writable and it should be able to check all done tasks when a user is finished with a specific task

Create a new directory for your plugin. Let's name it daily-task-widget.

Inside the daily-task-widget directory, create a main plugin file named daily-task-widget.php with the PHP code that is generated:

<?php
/*
Plugin Name: Daily Task Widget
Description: Adds a daily task widget to the WordPress dashboard.
Version: 1.1
Author: Your Name
*/

// Enqueue jQuery
function enqueue_jquery() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'enqueue_jquery');

// Add the widget to the dashboard
function daily_task_widget() {
    wp_add_dashboard_widget(
        'daily_task_widget',
        'Daily Task',
        'display_daily_task_widget'
    );
}

// Display the widget content
function display_daily_task_widget() {
    $tasks = get_user_meta(get_current_user_id(), 'daily_tasks',
 true);
    ?>
    <textarea id="daily_tasks" name="daily_tasks" 
    style="width: 100%;" rows="5"><?php echo esc_textarea($tasks); ?>
</textarea>
    <br>
    <label for="task_done">
    Mark task as done:
    <input type="checkbox" id="task_done" name="task_done"></label>
    <button id="save_tasks">Save Tasks</button>

    <script>
        jQuery(document).ready(function($) {
            $('#save_tasks').on('click', function() {
                var tasks = $('#daily_tasks').val();
                var taskDone = 
                $('#task_done').is(':checked') ? 1 : 0;

                $.post(ajaxurl, {
                    action: 'save_daily_tasks',
                    tasks: tasks,
                    task_done: taskDone,
                    security: 
           '<?php echo wp_create_nonce("save_daily_tasks_nonce"); ?>'
                }, function(response) {
                    alert('Tasks saved successfully!');
                });
            });
        });
    </script>
    <?php
}

// Save the tasks when the user updates the dashboard
function save_daily_tasks() {
    check_ajax_referer('save_daily_tasks_nonce', 'security');

    if (isset($_POST['tasks'])) {
        $tasks = sanitize_textarea_field($_POST['tasks']);
        update_user_meta(get_current_user_id(), 
        'daily_tasks', $tasks);
    }

    if (isset($_POST['task_done'])) {
        // Handle marking task as done
        // You can implement your logic here
    }

    wp_die();
}

// Hook functions to WordPress actions
add_action('wp_dashboard_setup', 'daily_task_widget');
add_action('wp_ajax_save_daily_tasks', 'save_daily_tasks');
?>

This simple plugin adds a textarea for daily tasks and a checkbox to mark a task as done. The tasks are saved in the user's meta data using the update_user_meta function.

Zip the daily-task-widget directory.

Upload the zipped file through the WordPress admin interface or manually upload it to the wp-content/plugins directory on your server.

Activate the plugin through the WordPress admin.

Now, when users log in, they will see a "Daily Task" widget on their dashboard where they can write and save their daily tasks. Note that this is a basic example, and you may want to enhance it based on your specific requirements.

Thanks for reading through! To support my blog you can make a donation through https://www.buymeacoffee.com/angela300

Whasapp Web Clone with Google authentication and firebase

angela300 — Tue, 30 Jan 2024 14:54:50 +0000

This app is build with React JS for Beginners.

Functionalities implemented:

Send a message
Receive a message
Create a new room
Login with Google
Switch between different rooms

Tech Stack Implemented

ReactJS
Firebase Firestore Realtime db
Materials UI
React Router
React Context API
Google Authentication
Deploy using Firebase

Inside your desktop on your pc, run the command to create a react app:

npx create-react-app whatsappwebclone

Set up

-Firebase set up

Visit firebase.com

Go to console

Click on ‘Add new project’

Type the project name as ‘Whats app Clone’

Click on ‘Continue’, the click on ‘Continue’ again

Select default account for Firebase

Click on, ‘Create project’

On the project overview on a screen that looks like show below:

Click on ‘Project settings’ under the settings icon

Sroll to the bottom of the page and click on this icon: </>

As shown below, Add an App nickname, click on ‘Also set up Firebase hosting for this app’, and then click on ‘Register App’.

Click on ‘next’

Run this code on your vs code terminal on the app’s root folder:

npm install -g firebase-tools

Click on ‘next’

Click on ‘continue to console’

At the bottom of the page, click on the switch, ‘Config’:

Copy that code

In your App’s src folder, create a new file ‘firebase.js’, and paste the code on the file.

-Other App set up

To start the app, on your terminal run:

npm start

Delete the following files from your App’s folder files:

Logo.svg

App.test.js

setUpTests.js

Remove the code in App.js and replace it with:

    <div className="App">
      <h1>Let's build a whatsapp Clone</h1>
    </div>

Delete everything in App.css

In index.css, add this code,

* {
  margin: 0;
}

To name components in our app, we will be using the ‘BEM naming convention’, which is a very easy way of naming components in react.

In App.js, we will have a div of className, app_body, and has the components, sidebar and chat

function App() {
  return (
    <div className="App">
      <h1>Let's build a whatsapp Clone</h1>
      <div className="app_body">
        {/* Sidebar */}
        {/* Chat */}
      </div>
    </div>
  );
}

In App.css, add this code to style the app:

.App {
  display: grid;
  place-items: center;
  background-color: #dadbd3;
  height: 100vh;
}

To style the div with className ‘app_body’, add this code to App.css too,

.app_body{
  display: flex;
  background-color: #ededed;
  height: 90vh;
  width: 90vw;
  box-shadow: -1px 4px 20px -6px rgba(0, 0, 0, 0.2);
}

In src folder, create a new folder called sidebar.js:

import React from 'react'

function Sidebar() {
  return (
    <div>Sidebar</div>
  )
}

export default Sidebar

In Sidebar.js, go ahead and import the corresponding css file,

import ‘./Sidebar.css’

Create a new file in src folder, Sidebar.css

Edit sidebar.js to look like this,

function Sidebar() {
  return (
    <div className="sidebar">
        <h1>Sidebar</h1>
    </div>
  )
}

Edit the div of className App in App.js to look like this,

    <div className="App">
      <div className="app_body">
        <Sidebar/>
        {/* Chat */}
      </div>
    </div>

Also in App.js, add this line:

import Sidebar from './sidebar';

Edit Sidebar.js to look like this,

import React from 'react'
import "./Sidebar.css"

const Sidebar = () => {
    return (
        <div className="sidebar">
            <div className="sidebar_header">

            </div>
            <div className="sidebar_search">

            </div>
            <div className="sidebar_chats">

            </div>
        </div>
    )
}

export default Sidebar

Now we need some icons, so we will need to install Material UI:

npm install @material-ui/core

Also run this code:

npm install @material-ui/icons

Edit Sidebar.js to look like this,

import React from 'react'
import "./Sidebar.css"
import { Avatar } from "@material-ui/core"
import { DonutLarge } from '@material-ui/icons'
import { Chat } from '@material-ui/icons'
import { MoreVert } from '@material-ui/icons'

const Sidebar = () => {
    return (
        <div className="sidebar">
            <div className="sidebar_header">
                <Avatar />
                <div className="sidebar_headerRight">
                    <DonutLarge />
                    <Chat />
                    <MoreVert />
                </div>
            </div>
            <div className="sidebar_search">

            </div>
            <div className="sidebar_chats">

            </div>
        </div>
    )
}

export default Sidebar

Edit your Sidebar.css to look like this,

.sidebar {
    flex: 0.35;
}
.sidebar_header {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    border-right: 1px solid lightgray;
}

.sidebar_headerRight{
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 10vw;
}

At this point, your application's appearance should resemble the following:

Proceed with the build …

Edit Sidebar.js to look like this,

import React from 'react'
import "./Sidebar.css"
import { Avatar, IconButton } from "@material-ui/core"
import { DonutLarge, SearchOutlined } from '@material-ui/icons'
import { Chat } from '@material-ui/icons'
import { MoreVert } from '@material-ui/icons'
import SidebarChat from './SidebarChat'

const Sidebar = () => {
    return (
        <div className="sidebar">
            <div className="sidebar_header">
                <Avatar />
                <div className="sidebar_headerRight">
                    <IconButton className="MuiSvgIcon-root">
                        <DonutLarge />
                    </IconButton>
                    <IconButton className="MuiSvgIcon-root">
                        <Chat />
                    </IconButton>
                    <IconButton className="MuiSvgIcon-root">
                        <MoreVert />
                    </IconButton>
                </div>
            </div>
            <div className="sidebar_search">
                <div className="sidebar_searchContainer">
                    <SearchOutlined/>
                    <input placeholder="Search or start new chat" type="text"/>
                </div>
            </div>
            <div className="sidebar_chats">
                <SidebarChat/>
                <SidebarChat/>
                <SidebarChat/>
                <SidebarChat/>
                <SidebarChat/>
            </div>
        </div>
    )
}

export default Sidebar

In the src folder, add these to files:

‘SidebarChat.js’ and ‘SidebarChat.css’

- SidebarChat.js

import React from 'react'
import './SidebarChat.css'

const SidebarChat = () => {
  return (
    <div className="sidebarChat">
        <h1>hey</h1>
    </div>
  )
}

export default SidebarChat

Edit sidebar.css to look like this,

.sidebar {
    display: flex;
    flex-direction: column;
    flex: 0.35;
}
.sidebar_search {
    display: flex;
    align-items: center;
    background-color: #f6f6f6;
    height: 39px;
    padding: 10px;
}
.sidebar_searchContainer{
    display: flex;
    align-items: center;
    background-color: white;
    width: 100%;
    height: 35px;
    border-radius: 20px;
    padding-left: 5px;
}
.sidebar_searchContainer > .MuiSvgIcon-root{
    color: grey;
    padding: 10;
}
.sidebar_searchContainer > input {
    border: none;
    margin-left: 10px;
}
.sidebar_header {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    border-right: 1px solid lightgray;
}

.sidebar_headerRight{
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 10vw;
}

.sidebar_headerRight >.MuiSvgIcon-root{
    margin-right: 2vw;
    font-size: 24px !important;
}

.sidebar_chats{
    flex: 1;
    background-color: white;
    overflow: scroll;

Next, we are going to add some avatars:

We will use an endpoint that gives you a random avatar

Edit SidebarChat.js to look like this,

import React from 'react'
import './SidebarChat.css'
import { Avatar } from '@material-ui/core'

const SidebarChat = () => {
  return (
    <div className="sidebarChat">
        <Avatar 
src="https://api.dicebear.com/
7.x/adventurer/svg?seed=Fel675gfcedsix667"/>
        <div className="sidebarChat_info">
            <h2>Room name</h2>
            <p>Last message...</p>
        </div>
    </div>
  )
}

export default SidebarChat

You notice we added Avatar as this,

<Avatar src="https://api.dicebear.com/7.x/adventurer/svg?seed=Fel675gfcedsix667"/>

We will make use of a UseEffect hook to generate a new avatar each time the Api is loaded/called:

    const [seed, setSeed] = useState('');
    useEffect(()=>{
        setSeed(Math.floor(Math.random()*5000))
    }, [])
  return (
    <div className="sidebarChat">
        <Avatar src=
{`https://api.dicebear.com/7.x/adventurer/svg?seed=${seed}`}/>
        <div className="sidebarChat_info">
            <h2>Room name</h2>
            <p>Last message...</p>
        </div>
    </div>
  )
}

Now we will go ahead and make this accept some prompts.

Add this to SidebarChat.css,

.sidebarChat {
    display: flex;
    padding: 20px;
    cursor: pointer;
    border-bottom: 1px solid #f6f6f6;
}

.sidebarChat:hover{
    background-color: #ebebeb;
}

.sidebarChat_info > h2 {
    font-size: 16px;
    margin-bottom: 8px;
}

.sidebarChat_info{
    margin-left: 15px;
}

We have added a new prop, addNewChat in SidebarChat,

const SidebarChat = ({ addNewChat }) => {

Then in Sidebar.js, we have,

<SidebarChat addNewChat/>

In SidebarChat.js, before we return our jsx, we will have:

If !addNewChat, we have SidebarChat.js show the normal stuff. Otherwise, it will render a div with a className of SidebarChat, and when clicked, it will execute some function to createChat.

By now, SidebarChat.js looks like this,

import React from 'react'
import './SidebarChat.css'
import { Avatar } from '@material-ui/core'
import { useEffect } from 'react'
import { useState } from 'react'

const SidebarChat = ({ addNewChat }) => {
    const [seed, setSeed] = useState('');
    useEffect(()=>{
        setSeed(Math.floor(Math.random()*5000))
    }, [])

    const createChat = () => {
        const roomName = prompt("Please enter name for chat")

        if(roomName) {
            //do some clever stuff in database
        }
    }

  return !addNewChat ? (
    <div className="sidebarChat">
        <Avatar src=
{`https://api.dicebear.com/7.x/adventurer/svg?seed=${seed}`}/>
        <div className="sidebarChat_info">
            <h2>Room name</h2>
            <p>Last message...</p>
        </div>
    </div>
  ): (
    <div onClick={createChat}
    className="sidebarChat">
        <h2>Add new Chat</h2>
    </div>
  )
}

export default SidebarChat

In App.js, lets now add the component, Chat

 <Chat />

In Src folder, create two new files, Chat.js and Chat.css

Chat.js:

import React from 'react'
import "./Chat.css"

const Chat = () => {
  return (
    <div className="chat">

    </div>
  )
}

export default Chat

Edit Chat.js to look like this,

import React from 'react'
import "./Chat.css"
import { Avatar, IconButton } from '@material-ui/core'
import { useState, useEffect } from 'react'
import { AttachFile, MoreVert, SearchOutlined } 
from '@material-ui/icons'

const Chat = () => {
    const [seed, setSeed] = useState('');
    useEffect(()=>{
        setSeed(Math.floor(Math.random()*5000))
    }, [])

    return (
        <div className="chat">
            <div className="chat_header">
                <Avatar src=
{`https://api.dicebear.com/7.x/adventurer/svg?seed=${seed}`}/>
                <div className="chat_headerInfo">
                    <h3>Room name</h3>
                    <p>Last seet at ...</p>
                </div>
                <div className="chat_headerRight">
                    <IconButton>
                        <SearchOutlined/>
                    </IconButton>
                    <IconButton>
                        <AttachFile/>
                    </IconButton>
                    <IconButton>
                        <MoreVert/>
                    </IconButton>
                </div>
            </div>
            <div className="chat_body">

            </div>
            <div className="chat_footer">

            </div>
        </div>
    )
}

export default Chat

Add this to chat.css,

.chat {
    flex: 0.66;
}

.chat_header{
    padding: 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid lightgray;
}

.chat_headerInfo {
    flex: 1;
    padding-left: 20px;
}

By now your app should appear like this:

By now, your chat.js file looks like this,

import React from 'react'
import "./Chat.css"
import { Avatar, IconButton } from '@material-ui/core'
import { useState, useEffect } from 'react'
import { AttachFile, MoreVert, SearchOutlined } 
from '@material-ui/icons'

const Chat = () => {
    const [seed, setSeed] = useState('');
    useEffect(() => {
        setSeed(Math.floor(Math.random() * 5000))
    }, [])

    return (
        <div className="chat">
            <div className="chat_header">
                <Avatar src=
{`https://api.dicebear.com/7.x/adventurer/svg?seed=${seed}`} />
                <div className="chat_headerInfo">
                    <h3>Room name</h3>
                    <p>Last seet at ...</p>
                </div>
                <div className="chat_headerRight">
                    <IconButton>
                        <SearchOutlined />
                    </IconButton>
                    <IconButton>
                        <AttachFile />
                    </IconButton>
                    <IconButton>
                        <MoreVert />
                    </IconButton>
                </div>
            </div>
            <div className="chat_body">
                <p className=
{`chat_message ${true && "chat_reciever"}`}>
                    <span className="chat_name">Brown Tylor</span>
                    Hey Guys
                    <span className="chat_timestamp">3:52pm</span>
                </p>
            </div>
            <div className="chat_footer">

            </div>
        </div>
    )
}

export default Chat

On this line of code,

 <p className={`chat_message ${true && "chat_reciever"}`}>

The chat_reciever class is added only if a certain condition is true.

For the User who is signed in, this will be evaluated to true, hence their message will be green, as styled in chat.css:

Chat.css:

.chat {
    flex: 0.65;
    display: flex;
    flex-direction: column;
}

.chat_header{
    padding: 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid lightgray;
}

.chat_headerInfo {
    flex: 1;
    padding-left: 20px;
}

.chat_headerInfo > h3 {
    margin-bottom: 3px;
    font-weight: 500;
}

.chat_headerInfo > p {
color: grey
}

.chat_message {
    position: relative;
    font-size: 16px;
    padding: 10px;
    border-radius: 10px;
    width: fit-content;
    background-color: #ffffff;
    margin-bottom: 30px;
}

.chat_reciever{
    margin-left: auto;
    background-color: #dcf8c6;
}

.chat_timestamp {
    margin-left: 10px;
    font-size: xx-small;
}

.chat_name {
    position: absolute;
    top: -15px;
    font-weight: 800;
    font-size: xx-small;
}

.chat_headerRight {
    display: flex;
    justify-content: space-between;
    min-width: 100px;
}

.chat_body {
    flex: 1;
    background-image: url("https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png");
    background-repeat: repeat;
    background-position: center;
    padding: 30px;
    overflow: scroll;
}

Your Chat.js now looks like this,

import React from 'react'
import "./Chat.css"
import { Avatar, IconButton } from '@material-ui/core'
import { useState, useEffect } from 'react'
import { AttachFile, InsertEmoticon, MoreVert, SearchOutlined, Mic }
 from '@material-ui/icons'

const Chat = () => {
    const [seed, setSeed] = useState('');
    useEffect(() => {
        setSeed(Math.floor(Math.random() * 5000))
    }, [])

    return (
        <div className="chat">
            <div className="chat_header">
                <Avatar src=
{`https://api.dicebear.com/7.x/adventurer/svg?seed=${seed}`} />
                <div className="chat_headerInfo">
                    <h3>Room name</h3>
                    <p>Last seet at ...</p>
                </div>
                <div className="chat_headerRight">
                    <IconButton>
                        <SearchOutlined />
                    </IconButton>
                    <IconButton>
                        <AttachFile />
                    </IconButton>
                    <IconButton>
                        <MoreVert />
                    </IconButton>
                </div>
            </div>
            <div className="chat_body">
                <p className=
{`chat_message ${true && "chat_reciever"}`}>
                    <span className="chat_name">Brown Tylor</span>
                    Hey Guys
                    <span className="chat_timestamp">3:52pm</span>
                </p>
            </div>
            <div className="chat_footer">
                <InsertEmoticon />
                <form>
                    <input placeholder="Type a message" type="text"/>
                    <button type="submit">Send a message</button>
                </form>
                <Mic />
            </div>
        </div>
    )
}

export default Chat

We now add an onClick sendMessage function on the sendmessage button here:

<button onClick={sendMessage} type="submit">Send a message</button>

Just before the return statement on chat.js, we have the function:

    const sendMessage = (e) => {

    }

Now we need to keep track of the message that the user is typing, so that when he/she pushes the enter key we can proceed to the next phase, like pushing to a database, etc. We keep track of the message by storing it in the state.

const [input, setInput] = useState("");

Then the value of our input variable will be the value set up in the useState,

<input value={input} placeholder="Type a message" type="text"/>

Each time the input changes, we need to fire off an an event to update the input value in the state with the latest user entry:

<input value={input} onChange={e => setInput(e.target.Value)} 
placeholder="Type a message" type="text"/>

In this sendMessage function,

    const sendMessage = (e) => {
        e.preventDefault();
        console.log('You typed >>>', input)
    }

e.preventDefault ensures:

By calling e.preventDefault(), you are telling the browser not to perform the default action associated with the form submission, which is typically a page reload. Instead, the custom behavior defined in the sendMessage function will be executed.

setInput("");

ensures the input is cleaned after pressing enter.

Adding firebase config

Now we will go ahead and add the Firebase config.

Install Firebase with:

npm i firebase

Create/Edit your firebase.js file to look like this:

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getAuth, GoogleAuthProvider } from 'firebase/auth';

const firebaseConfig = {
  apiKey: "AIzaSyDcHSKgEks5yWmdS6kb54US0KlbIXeIHR4",
  authDomain: "whats-app-clone-aac80.firebaseapp.com",
  projectId: "whats-app-clone-aac80",
  storageBucket: "whats-app-clone-aac80.appspot.com",
  messagingSenderId: "131021031275",
  appId: "1:131021031275:web:a8e2711178865ea927ae2e",
  measurementId: "G-RH8WL675D8"
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);
const auth = getAuth(firebaseApp);
const provider = new GoogleAuthProvider();

export { auth, provider};
export default db;

Open Firebase on your browser

Click on Firestore database

click on ‘Create Database’,

Click on ‘next’,

Click on ‘Start in test mode’, and click on ‘Enable’.

Click on ‘Start collection’, and call it ‘rooms’, and populate it as follows, with field ‘name’, and value ‘Dance Room’:

Click on ‘Auto-ID’ at the top, and click on ‘save’.

Click ‘Add Document’ to add a second room, populate it with Field ‘name’, and Value ‘Dev Room’, and save:

Let’s now connect the Sidebar to the database.

In sidebar.js, add this:

const [rooms, setRooms] = useSatte([]);

Then add a useEffect, for when the sidebar component loads, we want to show a piece of code.

    useEffect(()=> {

    }, [])

Above code says, perform this action once, when the sidebar component loads.

Import db from firebase with:

import db from './firebase'

Edit your sidebar.js and sidebarChat.js to appear as below:

- Sidebar.js

import "./Sidebar.css"
import React, { useState, useEffect } from 'react';
import { Avatar, IconButton } from '@material-ui/core';
import { DonutLarge, SearchOutlined, Chat, MoreVert } from 
'@material-ui/icons';
import SidebarChat from './SidebarChat';
import { db } from './firebase'; 
// Assuming your firebase.js exports the db instance
import { getFirestore, collection, onSnapshot } from 
'firebase/firestore';

const Sidebar = () => {
    const [rooms, setRooms] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
          const roomsCollection = collection(db, 'rooms');
          console.log('Rooms Collection:', roomsCollection); 
            // Log the rooms collection

          const unsubscribe = onSnapshot(roomsCollection, 
            (snapshot) => {
            console.log('Snapshot received:', snapshot.docs);    
            // Log the snapshot data

            setRooms(
              snapshot.docs.map((doc) => ({
                id: doc.id,
                data: doc.data(),
              }))
            );
          });

          return () => {
            unsubscribe();
          };
        };

        fetchData();
      }, []);


    return (
        <div className="sidebar">
            <div className="sidebar_header">
                <Avatar />
                <div className="sidebar_headerRight">
                    <IconButton className="MuiSvgIcon-root">
                        <DonutLarge />
                    </IconButton>
                    <IconButton className="MuiSvgIcon-root">
                        <Chat />
                    </IconButton>
                    <IconButton className="MuiSvgIcon-root">
                        <MoreVert />
                    </IconButton>
                </div>
            </div>
            <div className="sidebar_search">
                <div className="sidebar_searchContainer">
                    <SearchOutlined />
                    <input placeholder="Search or start new chat" 
                type="text" />
                </div>
            </div>
            <div className="sidebar_chats">
                <SidebarChat addNewChat />
                {rooms.map(room => (
                    <SidebarChat key={room.id} id={room.id} 
                        name={room.data.name} />
                ))}
            </div>
        </div>
    )
}

export default Sidebar

-Sidebarchat.js

import React from 'react'
import './SidebarChat.css'
import { Avatar } from '@material-ui/core'
import { useEffect } from 'react'
import { useState } from 'react'

const SidebarChat = ({ addNewChat, id, name }) => {
    const [seed, setSeed] = useState('');
    useEffect(()=>{
        setSeed(Math.floor(Math.random()*5000))
    }, [])

    const createChat = () => {
        const roomName = prompt("Please enter name for chat")

        if(roomName) {
            //do some cclever stuff in database
        }
    }

  return !addNewChat ? (
    <div className="sidebarChat">
        <Avatar src=
{`https://api.dicebear.com/7.x/adventurer/svg?seed=${seed}`}/>
        <div className="sidebarChat_info">
            <h2>{name}</h2>
            <p>Last message...</p>
        </div>
    </div>
  ): (
    <div onClick={createChat}
    className="sidebarChat">
        <h2>Add new Chat</h2>
    </div>
  )
}

export default SidebarChat

To add a new room, add this to sidebarChat.js,

        if(roomName) {
            //do some cclever stuff in database
            db.collection("rooms").add({
                name: roomName,
            })
        }

Implement the react router

Let’s now implement the react router, such that when you click on any of the rooms, it reflects on the sidebarChat.js

Install react-router-dom with:

npm i react-router-dom

Surround everything in App.js with a Router and Routes.

Edit your App.js to look like this,

import React from 'react';
import './App.css';
import Chat from './Chat';
import Sidebar from './Sidebar';
import { BrowserRouter as Router, Routes, Route } from 
'react-router-dom';

function App() {
  return (
    <div className="App">
      <div className="app_body">
        <Router>
          <Routes>
            <Route path="/rooms/:roomId" element={
              <>
                <Sidebar />
                <Chat />
              </>
            } />
            <Route path="/app" element={
              <>
                 <Sidebar />
              </>
            } />
          </Routes>
        </Router>
      </div>
    </div>
  );
}

export default App;

In Chat.js, let’s capture the roomId with useParams() hook:

const { roomId } = useParams();

The params in this case is the id variable passed to the link here: (The roomId) variable,

<Route path="/rooms/:roomId" element={

as this is the path under which Chat.js is displayed.

Add these imports to Chat.js,

import db from './firebase'
import { doc, onSnapshot } from 'firebase/firestore';

Make use of the roomId and a useEffect hook to get to capture the roomName:

    const [roomName, setRoomName] = useState("");

    useEffect(() => {
        if (roomId) {
            const roomRef = doc(db, 'rooms', roomId); 
            const unsubscribe = onSnapshot(roomRef, (snapshot) => {
                setRoomName(snapshot.data()?.name || ''); 
            });

            return () => unsubscribe(); 
        }
    }, [roomId]);

In the above, each time the roomId changes, useEffect ensures the roomName is updated.

We also update the seed each time room Id changes:

Add setSeed below setRoomName in Chat.js,

setRoomName(snapshot.data()?.name || ''); 
setSeed(Math.floor(Math.random() * 5000))

To make the avatars consistent, we can rather set seed to the roomId value.

In SidebarChat.js, replace Avatar source to this:

<Avatar src={https://api.dicebear.com/7.x/adventurer/svg?seed=${id}} />

In Chat.js, replace Avatar source to this:

<Avatar src={https://api.dicebear.com/7.x/adventurer/svg?seed=${roomId}} />

Login with google authentication

Before working on the messages,

Let us work on the Login stuff with google authentication:

In App.js, we will render the app only if there is a user logged in.

Add this to App.js:

const [user, setUser] = useState(null);

In your src folder, add a Login.js component.

Add these to firebase.js:

import { getAuth, GoogleAuthProvider, signInWithPopup } 
from 'firebase/auth';

Your Login.js appears like this,

import React from 'react';
import { Button } from '@material-ui/core';
import './Login.css';
import { auth, provider } from './firebase'; 
import { signInWithPopup } from './firebase';

const Login = () => {
  const signIn = async () => {
    try {
      // Destructure signInWithPopup from auth
      const { user } = await signInWithPopup(auth, provider);
      console.log('User signed in:', user);
    } catch (error) {
      alert(error.message);
    }
  };

  return (
    <div className="login">
      <div className="login_container">
        <img 
        src="https://tochat.be/whatsapp-icon-white.png" alt="" />
        <div className="login_text">
          <h1>Sign in to WhatsApp</h1>
        </div>
        <Button type="submit" onClick={signIn}>
          Sign In With Google
        </Button>
      </div>
    </div>
  );
};

export default Login;

your Login.css appears like this:

.login {
    background-color: #f8f8f8;
    height: 100vh;
    width: 100vw;
    display: grid;
    place-items: center;
}

.login_container {
    padding: 100px;
    text-align: center;
    background-color: white;
    border-radius: 10px;
    box-shadow: -1px 4px 20px -6px rgba(0, 0, 0, 0.2);
}

.login_container > img {
    object-fit: contain;
    height: 100px;
    margin-bottom: 40px;
}

.login_container > button {
    margin-top: 50px;
    text-transform: inherit !important;
    background-color: #0a8d48 !important;
    color: white;
}

Go to firebase on your browser and click on Authentication:

Click on Get started and this screen will pop up:

Click on ‘Google’, the ‘enable’, then select a support email address, and click on ‘save’.

We now need to wrap the app in state provider.

In index.js, wrap the app in a state provider:

root.render(
  <React.StrictMode>
    <StateProvider initialState={initialState} reduce={reducer}>
      <App />
    </StateProvider>
  </React.StrictMode>
);

The Stateprovider acts as a data layer, where we can push and pull data. When we sign in, we push the user into the data layer, and we can pull the user from the data layer as well.

In your scr folder, create a new file, StateProvider.js:

import React, { createContext, useContext, useReducer } 
from "react";
import reducer, { initialState } from "./reducer"; 

export const StateContext = createContext();

export const StateProvider = ({ children }) => (
  <StateContext.Provider value={useReducer(reducer, initialState)}>
    {children}
  </StateContext.Provider>
);

export const useStateValue = () => useContext(StateContext);

In the src folder, create a new file, reducer.js

export const initialState = {
    user: null, //We start with the user ot being logged in
};

export const actionTypes = {
    SET_USER: "SET_USER", 
//We push signed in user to the data layer
};

const reducer = (state, action) => {
    console.log(action);
    switch (action.type) {
        case actionTypes.SET_USER: 
            return {
                user: action.user,
            };

            default:
                return state;
    }
};

export default reducer;

in App.js, add this code,

import { useStateValue } from './StateProvider';

const [{ user }, dispatch] = useStateValue();

Your Login.js now appears as this:

import React from 'react';
import { Button } from '@material-ui/core';
import './Login.css';
import { auth, provider } from './firebase'; 
import { signInWithPopup } from './firebase';
import { useStateValue } from './StateProvider';
import { actionTypes } from './reducer';

const Login = () => {
    const [{}, dispatch] = useStateValue();

    const signIn = () => {
        signInWithPopup(auth, provider)
          .then((result) => {
            console.log('user',result.user)
            dispatch({
              type: actionTypes.SET_USER,
              user: result.user,
            });
          })
          .catch((error) => {
            alert(error.message);
          });
      };

  return (
    <div className="login">
      <div className="login_container">
        <img 
        src="https://tochat.be/whatsapp-icon-white.png" alt="" />
        <div className="login_text">
          <h1>Sign in to WhatsApp</h1>
        </div>
        <Button type="submit" onClick={signIn}>
          Sign In With Google
        </Button>
      </div>
    </div>
  );
};

export default Login;

For the picture at the top on the image below,

We made it pick the Google photoURL of the logged in user by editing the avatar source in sidebar.js to this:

<Avatar src={user?.photoURL}/>

and adding this line at the top in sidebar.js

const [{ user }, dispatch] = useStateValue();

Adding a new collection, messages

Inside the rooms collection, let’s have a new collection: messages

Click on the first room, click on add collection.

On collection id, type ‘messages’

Click on auto id, on the Field input, type ‘message’ and under value, type ‘Hey guys’, then save

Add another Field, ‘name’ and value ‘Asha’

Add another field ‘timestamp’, Type ‘timestamp’ and choose a date and save.

Pulling messages from db

Now to pull the messages:

We will create a state that keeps track of all the messages.

Edit the useEffect hook in chat.js to add this,

useEffect(() => {
        if (roomId) {
            const roomRef = doc(db, 'rooms', roomId);
            const unsubscribeRoom = onSnapshot(roomRef, 
            (snapshot) => {
                setRoomName(snapshot.data()?.name || '');
            });

            const messagesQuery = query(
                collection(db, 'rooms', roomId, 'messages'),
                orderBy('timestamp', 'asc')
            );

            const unsubscribeMessages = onSnapshot(messagesQuery, 
            (snapshot) => {
                setMessages(snapshot.docs.map((doc) => doc.data()));
            });

            return () => {
                unsubscribeRoom();
                unsubscribeMessages();
            };
        }
    }, [roomId]);

And also add this line of code:

const [messages, setMessages] = useState([]);

Next, edit the div with className chatBody, to appear like this:

<div className="chat_body">
                {messages.map(message => (
                    <p className={`chat_message ${true 
                        && "chat_reciever"}`}>
                        {message.timestamp ? (
                            <>
                                <span 
                className="chat_name">{message.name}</span>
                                {message.message}
                                <span className="chat_timestamp">
                 {new Date(message.timestamp.toDate()).toUTCString()}
                                </span>
                            </>
                        ) : (

                            <span className="loading_timestamp">
                                Loading ...
                            </span>
                        )}
                    </p>

                ))}
            </div>

Add a useEffect to scroll to the bottom of the chat in chat.js:

    useEffect(() => {
        const chatBody = document.querySelector('.chat_body');
        chatBody.scrollTop = chatBody.scrollHeight;
    }, [messages]);

Adding a message to messages collection

Next, lets add a message to the messages collection:

In chat.js, we will have this in the sendMessage function:

const sendMessage = async (e) => {
        e.preventDefault();
        console.log('You typed >>>', input);

        try {
            const messageRef = await addDoc(
                collection(db, 'rooms', roomId, 'messages'),
                {
                    message: input,
                    name: user.displayName,
                    timestamp: serverTimestamp(),
 // Use serverTimestamp instead of FieldValue.serverTimestamp()
                }
            );

            console.log('Message added with ID: ', messageRef.id);
        } catch (error) {
            console.error('Error adding message: ', error);
        }

        setInput("");
    };

Differentiate sender and receiver messages

Next, we ensure that the chats from the sender are colored white, while those from the current signed in user are colored green.

In chat.js in the div with the chat_body class, edit the p tag to look like this,

    <p className={`chat_message ${message.name === user.displayName 
&& "chat_reciever"}`}>

This will result to this effect:

Enable last seen in for each room

To determine the last seen in chat.js, we add this code to get the timestamp of the last message in that room:

         <p>
            {messages.length > 0 && "Last seen"}
               {
     messages.length > 0 && messages[messages.length - 1]?.timestamp
                                ? (
     <span className="chat_timestamp" style={{ fontSize: '14px' }}>
     {new Date(messages[messages.length - 1]
.timestamp.toDate()).toUTCString()}
                                    </span>
                                )
                                : 'No messages'
                        }

                    </p>

The code above, added just below the RoomName, displays a last seen timestamp when there are messages in the room, and displays ‘no messages’ when there are no messages in the room:

Determine last message for each room

To determine the last message in SidebarChat.js,

const [messages, setMessages] = useState("")

    useEffect(() => {
        if(id){
            const messagesQuery = query(
                collection(db, 'rooms', id, 'messages'),
                orderBy('timestamp', 'desc')
            );

            const unsubscribeMessages = 
            onSnapshot(messagesQuery, (snapshot) => {
                setMessages(snapshot.docs.map((doc) => doc.data()));
            });

            return () => {
                unsubscribeMessages();
            };
        }
    }, [])

Replace the p tag containing last message with this code:

<p>
                        {messages.length > 0 && "Last message ..."}
                        {
                            messages.length > 0 
                                ? (
          <span className="chat_timestamp" 
                style={{ fontSize: '14px' }}>
                                        {messages[0]?.message}
                                    </span>
                                )
                                : 'No messages'
                        }
                    </p>

Deploying app

Now let us go ahead to deploy our App

On your terminal in the root folder:

Run:

firebase login

and proceed with the steps to login.

Run:

firebase init

on the pop up that comes up, scroll down and hit the spacebar on hosting, click enter, and click on ‘use an existing project’, select your whatsapp clone project and click Enter.

On ‘What do you want to use as your public directory?’, type ‘build’ and press Enter.

On ‘Configure as a single-page app’ type ‘y’

On ‘Set up automatic builds and deploys with GitHub?’ type ‘No’

Run:

npm run build

Run:

firebase deploy

This will produce a link to your App:

https://whats-app-clone-aac80.web.app/

Thanks so much for reading through! To support my blog you can make a donation through https://www.buymeacoffee.com/angela300

A simple Node Auth backend

angela300 — Wed, 24 Jan 2024 10:43:42 +0000

This will include:

User Login and Signup
Request Authorization (JWT)
One-Time Pin System (OTP)
Email Verification (OTP)
Password Reset (OTP)

App and Database Set up:

Create the project directory in Vscode 'mkdir nodejs-auth'

Initialize nodeJS project 'npm init -y'

Install Express and other packages that we will need: 'npm install express dotenv mongoose jsonwebtoken bcrypt nodemailer cors nodemon'

initialize our project into our new git repository: 'git init'

In the project's root directory, create a new directory, 'src' folder, that will contain the code files. Create a '.env' file in the root directory, this file will contain all our secret keys and values. Also add a '.gitignore' file to check that, here, we specify that all files ending in .env should not be tracked, as well as the nodemodules folder Add this code to the .gitignore file:

*.env
node_modules

In the Database setup: We use the cloud based Mongo DB. Login to the dashboard on Cloud.mongodb.com, Create a new project and database on the free tier. Allow your database to be accessible to all IP addresses. Create a new connection, choose driver NodeJS, copy the connection string that comes up and paste it into your .env file

connection string: "MONGODB_URI = mongodb+srv://angela456:@cluster0.19fkfhm.mongodb.net/?retryWrites=true&w=majority"

Replace the password area, with actual password for your database user. Make sure to also install MongoDB with ‘npm install mongodb’ command In the src directory create another directory, ‘config’ for configurations. In this new directory, create a new file, ‘db.js’ for database configurations. In the db.js file, require the dotenv file and configure it: Add this code to the db.js file,

require ("dotenv").config();

The above code will enable us access the connection string in the ‘dotenv’ file Add a ‘Mongoose’ package in the db.js file as it will help us interact with the database. Add all this code to your db.js file:

require ("dotenv").config();
const mongoose = require("mongoose")
//URI
const { MONGODB_URI } = process.env

const connectToDB = async () => {
    try{
        await mongoose.connect(MONGODB_URI, {
            useNewUrlParser: true,
            useUnifiedTopology: true,
        });
    } catch(error){
        console.log(error)
    }
};

connectToDB();

Server setup

Next, we create an app.js file for creating the server. Add this code to app.js file:

//MongoDb
require("./config/db")

const express = require("express")

//BodyParser will enable us supply json values to our server requests
const bodyParser = express.json;

//Cors will enable us make requests to the api from external applications
const cors = require ("cors")

//create server app
const app = express();

//app and cors passed as middleware
app.use(cors())
app.use(bodyParser());

module.exports = app;

Export the app to the index.js file Define a PORT in the dotenv file.

MONGODB_URI = mongodb+srv://angela456:YIdqH3nQYqDdvstH@cluster0.19fkfhm.mongodb.net/?retryWrites=true&w=majority
PORT = 5000

Your index.js file wil appear like this:
const app = require ("./app")
const { PORT } = process.env;

const startApp = () => {
app.listen(PORT, ()=> {
console.log(Auth Backend is running on port ${PORT})
});
};

startApp();
In the package.json, add a script to run the app: The script will use the nodemon package which enables the app to continuously run and refresh in the background. The script also contains the locations of our index.js file and will appear like this:

``` "scripts": {
"dev": "nodemon src/index.js"
}



Test the connection with: 'npm run dev' command in your projct root