DEV Community: Jeremy Persing

React Native Stocks App Tutorial

Jeremy Persing — Fri, 26 Jan 2024 23:35:49 +0000

The Project

This project goes through the basics of creating and styling components in React Native. You will learn how to take JSON data and turn that into something meaningful and pretty for your users.

What You'll Implement/Learn

React Native Gesture Handler
Images
FlatLists
FlexBox
React Native Gifted Charts
Expo Router
Expo
Expo Image

and the list goes on.

This project uses version 50 of Expo, so in the future things may look different.

Documentation:

React Native Paper: https://callstack.github.io/react-native-paper/docs/guides/getting-started
React Native Paper Theming: https://callstack.github.io/react-native-paper/docs/guides/theming
Gestures: https://docs.expo.dev/tutorial/gestures/
React Native Gifted Charts: https://gifted-charts.web.app/
Async Storage: https://react-native-async-storage.github.io/async-storage/docs/install
Expo: https://docs.expo.dev/get-started/installation/
Expo Icons: https://icons.expo.fyi/Index
Data: https://revesta.net

Stripe Payments with Nextjs

Jeremy Persing — Thu, 02 Nov 2023 00:41:57 +0000

Github: stripe-next-payments

Overview

Stripe is a payments processor that allows developers like me and you to easily collect payments on our websites.
In this post I’ll show you how you can use stripe payments in your nextjs application.
I’m going to start from the very beginning and you can pick up wherever you want based on the steps below.

Step 1 - Creating a Nextjs project

If you don’t already have it installed, install nodejs and then enter in the following command
npx create-next-app@latest. I went with the following defaults.

This will create a nextjs project on your machine and you will need to open this in your favorite code editor.
Once you have that done, run the command npm run dev to get it running. You can then get rid of all the boilerplate
code in the index file and you can put something like this.

      <h1>Stripe Payments</h1>
      <p>A consultancy session</p>
      <a
        href="https://buy.stripe.com/test_00g7v64lTd9EfVS9AB"
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
      >
        Buy Now
      </a>

Step 2 - Create a Stripe Account

This is pretty simple, just go to stripe.com to do this.

Step 3 - Navigate to Stripe Dashboard

Once your account is created, make sure you're on the stripe dashboard and enable test mode (toggle button in the top right). Then navigate to the payments page.
From here you'll want to

Choose the option to create a payment link.
Choose all of the options you want to collect from the customer.
Configure the after payment option. (Note: if you're using localhost to launch the stripe checkout session and set localhost:3000 (or whatever port) as the place you wish to return to in development, you will probably run into issues. The only way that I've had this work is launching from 127.0.0.1:3000 and setting the redirect to 127.0.0.1.)
Create the product which you're trying to sell.
And finally create the payment link.

Then copy the link and navigate back to your code.

Step 4 - Put the Link in Your code

Now is when you want to insert a link into your code on the page where you are trying to sell a product and use this link as the href value.
This is all the work you will have to do on the front end. I suggest making things look pretty, but that is just an addition at this point
(check out my website revesta.net if you need some inspiration ;) ).

Step 5 - Setting up the Backend

Before getting started with this, make sure that you have the Stripe CLI installed. Click me

Go to the api folder in your project and create a new file called webhook.ts (if you're using typescript).
Install the packages stripe and raw-body (ie npm i stripe raw-body).
Create a new file called .env.local in the root of your project and insert the following 2 variables.

STRIPE_SECRET_KEY=
WEBHOOK_SECRET=

You can get the stripe secret key by navigating to your dashboard, looking for API Keys and then it should be hidden. Just unhide it and copy it, then paste it in the .env file.
Now we can start to code in webhook.ts so go to that file and insert the following.

import type { NextApiRequest, NextApiResponse } from "next";
import Stripe from "stripe";
import getRawBody from "raw-body";
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string, {
  apiVersion: "2023-10-16",
});

const endpointSecret = process.env.WEBHOOK_SECRET as string;

// Make sure to add this, otherwise you will get a stream.not.readable error
export const config = {
  api: {
    bodyParser: false,
  },
};

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  try {
    console.log("req.headers", req.headers);
    if (req.method !== "POST")
      return res.status(405).send("Only POST requests allowed");

    const sig: any = req.headers["stripe-signature"];
    const rawBody = await getRawBody(req);

    let event;

    try {
      event = stripe.webhooks.constructEvent(rawBody, sig, endpointSecret);
    } catch (err: any) {
      return res.status(400).send(`Webhook Error: ${err.message}`);
    }

    console.log("event.type", JSON.stringify(event.type));

    if (event.type === "checkout.session.completed") {
      const sessionWithLineItems = await stripe.checkout.sessions.retrieve(
        (event.data.object as any).id,
        {
          expand: ["line_items"],
        }
      );
      const lineItems = sessionWithLineItems.line_items;

      if (!lineItems) return res.status(500).send("Internal Server Error");

      try {
        // Save the data, change customer account info, etc
        console.log("Fullfill the order with custom logic");
        console.log("data", lineItems.data);
        console.log(
          "customer email",
          (event.data.object as any).customer_details.email
        );
        console.log("created", (event.data.object as any).created);
      } catch (error) {
        console.log("Handling when you're unable to save an order");
      }
    }

    res.status(200).end();
  } catch (error) {
    console.error(error);
    res.status(500).json("Internal Server Error");
  }
}

To summarize, we are creating a route for stripe to send us events to. This is where we will see a checkout was successfully completed
and handle it according (which is the last try block with all of the console.logs). You probably know how to read code, so I'm not going
to go over everything, but the main points are that

We need to make sure this route only accepts POST requests.
We need to make sure that the request was sent by stripe.
We need to handle a successful checkout.

Step 6 - Forwarding Hooks

Open the terminal and enter in the following command stripe listen --forward-to localhost:3000/api/webhook. This is telling stripe to send events to the route we just created. !Note that you should only do it this way in development.
This will give you a webhook secret. Copy this secret and assign it to WEBHOOK_SECRET in your .env file.

Step 7 - Give it a rip

Go to localhost:3000 and go through the checkout process. Use 4242 for all the credit card numbers, give it a date past the current date and enter in any address. If all goes well, the fake payment will go through.

Step 8 - Going Live

Going live is how you can actually get real money from paying customers. Back in the Stripe dashboard, just untoggle the test mode and it will take you to live mode.

Go through the same process of creating products and getting your secret key.
Swap out the links so that they use the test payment links in development and live payment links in production (ie ->)

process.env.NODE_ENV === "development"
      ? "https://buy.stripe.com/test_link"
      : "https://buy.stripe.com/live_link",

That should have you on your way. I hope you found this useful, and have a great day.

MongoDB Equivalent of SELECT column FROM table

Jeremy Persing — Sat, 24 Jun 2023 05:02:06 +0000

I've gotten lost in my notes too many times so this is a reference for my future self and anyone else who needs this.

In an aggregation pipeline, add the following.

$group {
    _id: null (or whatever),
    countries: {
        $addToSet: "$subCollection.countries"
    }
}

This will result in

{
  _id: null,
  countries: ["a", "b", "c", etc...]
}

The Ultimate React Native Project | Apartments.com Clone

Jeremy Persing — Sun, 07 May 2023 07:33:53 +0000

Part 1: https://www.youtube.com/watch?v=Sr0GjzA9iPc
Part 2: https://www.youtube.com/watch?v=E_GvwJ5IOCk

Background

Prior to creating this project I had worked on a React Native/Expo project and noticed that most, if not all, of the video tutorials online used Firebase in their implementation of things. I found this to be annoying at times, because my team wasn't using Firebase and there was no variety in tutorials for implementing things. Also, finding a genuine implementation for Expo Push Notifications on YouTube was impossible at that time. Luckily the expo documentation had everything that we needed, but at the end of that experience I thought that it would be useful to show that you don't just have to use Firebase when building out your React Native project.

The Project

The app that I drew inspiration from was Apartments.com's mobile app. Prior to making the project, I had seen that they were able to sell their business for $500 - 600 million in the mid 2010's, yet when you look at their app it is relatively simple. Of course the value of the business probably had more to do with the number of users, revenue generated, and the data they had. But the point still remained that building out an app similar to theirs was very feasible. This video is me going through that process, and showing you how you can do the same.

What You'll Implement

The project uses the expo SDK 45, and the current version is 48. Implementations might differ slightly now (idk), but the fundamental concepts should still work. Check out the expo docs if you get stuck https://docs.expo.dev/

Client Side

Implement Push Notifications
Implement Maps into your project
Login with Google
Login with Facebook
Login with Apple
Login and Register with an email and password
Implement Forgot User Password and Reset User Password Screens
Implement star based reviews
Use React Query for fetching data
Implement chat/messaging screens
Create Detailed Screens to display data
Create Airbnb like carousel cards for displaying apartment images

Backend / Database

Build an API in GO
Implement and use Postgresql
Send notifications to users from your server
Upload and store images to an S3 Bucket
Implement Chat into your application using Socket.io
Use nodejs to create a chat server
Implement redis
Login with Google
Login with Facebook
Login with Apple
Login and Register with an email and password
Use JWTs
Deploy servers using Docker and Dockerhub
Create a domain for free
Use NGINX and Letsencrypt to enable https connections with your server

Github

Client: https://github.com/JeremyPersing/apartmentsclone
Server: https://github.com/JeremyPersing/apartmentscloneserver
Chat Server: https://github.com/JeremyPersing/apartmentsclonechatserver

A few of the screens you'll build

Add Country Flags to Your App With This API - countryflags.io alternative

Jeremy Persing — Tue, 21 Dec 2021 20:53:40 +0000

I am going to be shutting down this service as of 3/12/23. If you would like to run your own instance of this, go to the country flags repository, download the code and run it on your own VPS.

Introduction

I was recently working on a project that required me to implement country flags into the application. At the time, countryflags.io was a popular API that people were using, so I decided that I should rely on it for my project. While integrating the endpoints for countryflags.io into my application, I noticed that they only allowed user's to retrieve a country's flag by a two letter code. For example, if I wanted to get the flag of the United States, the endpoint would be https://www.countryflags.io/us/flat/64.png. This was a problem because my data didn't identify countries by their two letter codes. Another problem I ran into is that the server of countryflags.io went down half way through the project. So to fix these problems, I created my own API that allows users to get a country's flag by the country's name, its two letter code (ISO Alpha 2 code), its three letter code (ISO Alpha 3 code), and its UN Code. The codes for each country can be found at countryflagsapi.com. Here are a few example endpoints
https://countryflagsapi.com/png/br
https://countryflagsapi.com/png/brazil
https://countryflagsapi.com/svg/076
https://countryflagsapi.com/svg/bra

Running Your Own Instance

If you wish to run your own instance of this API, you can download the source code here. If you would prefer to just pull a docker image of the API, you can get that here

Getting a Flag from User Input

I'll be using React for this demo. Keep in mind this is a basic demo, but this will probably be similar to what you will want
to use in your app.

Imports



import React, { useState } from 'react'

States and Functions



const [flagURL, setFlagURL] = useState('https://countryflagsapi.com/png/cuba')

const [identifier, setIdentifier] = useState('')

const handleButtonClick = () => {

  // can use https://countryflagsapi.com/svg/ here too

  const url = 'https://countryflagsapi.com/png/'

  setFlagURL(url + identifier)

}

JSX



<div style={{ marginBottom: '20px' }}>

    <input

      name="country"

      type="text"

      onChange={(e) => setIdentifier(e.target.value)}

      value={identifier}

      placeholder="Enter a country name, UN Code, ISO Alpha-2, or ISO Alpha-3 Code"

    />

    <button onClick={handleButtonClick}>Get Flag</button>

</div>

<img src={flagURL} alt="flag" />

Embedding an Image

Go to the flag that you want to embed and click the button labeled "Embed SVG" or "Embed PNG". A modal will then appear like the one shown in the image below. Go ahead and click copy and then paste the img element into your source code.