For several years, I've been embedding Google Adsense on my websites to earn revenue. Part of the process is when I'm adding ads to a new site that I've just launched, I would need to add that site under settings for my Google Adsense account and wait for a review.

My Steps

1. Go to your Google Adsense account and on the left side, select "Sites." 
2. Go ahead and add a site here. Embed your code with your publisher ID in the head section of your website.
3. Then, request Google Adsense to review it. 
4. You ...

Continue reading ...

I'm looking up documentation on React-Bootstrap this morning and I noticed there's an addition in the npm install command. 
It is now:  npm install react-bootstrap@next bootstrap@5.0.2

Before, the documentation didn't mention the "@next part" nor the "@5.0.2". Then, in my main index.js file, I still imported the following at the top:
import 'bootstrap/dist/css/bootstrap.min.css';

It works the same. I am a big fan of the accordian component from bootstrap. So to use that, I just need to import t...
Continue reading ...

I've been creating react apps since October 2020 so it's only 9 months and I've only worked with redux for one of my projects so far and I want to work on another project with redux. For this blog post, I'll be highlighting on creating my new react app with create-react-app and redux implementation.

Through the coding bootcamp, I would just "npm install react react-dom react-scripts" in my command line, and "mkdir" my src and public folders and corresponding files to start my react projects. I...
Continue reading ...

On May 9th, 2021, I added a sitemap.txt file to one of my React apps so that it can get properly indexed in the search engine and I can start seeing stats on Google's search console. I am current hosting this app on Godaddy's shared hosting. 

Today, a couple of weeks later, I noticed that I am not showing hits on certain pages; just on the homepage. So, I went on my app and utilized real time tracking and I realized Google Analytics doesn't pick it up even in real-time. I figured this may have...
Continue reading ...

This week, I am going to be taking notes on reactive forms in Angular. Reactive forms is where you explicitly create the forms that's more complex, like implementing async validation.

Reactive Forms
In order to use formControlName, you'll need to import ReactiveFormsModule to the array on imports in the app.module.ts file. Then, it'll automatically add it as an import to the top of that page like so: 
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
There was a bug that I ...
Continue reading ...

I created an AWS account 3 months ago but hadn't deployed anything on any of their services until last evening! A few months ago, I was having trouble with AWS Elastic Beanstalk and decided to put it in the back burner to learn Angular and TypeScript. Now, I'm ready to dig into AWS again. Instead of using AWS Elastic Beanstalk this time, which was what I originally had in mind, I decided to try out AWS Amplify to see if deploying my React app this way would be easier. It definitely is.

Here we...
Continue reading ...

This month, I learned to used Multer for a react project that I've been working on. It took me close to 6 days to get both the back-end and front end to work for Multer. There were times when I really struggled but in the end, I didn't give up and it's so rewarding to finally figured it out. Being able to upload a file successfully, especially a photo, and have it save to the database was something I was thinking about learning to do since December. 

Many of the errors I had at the beginning w...
Continue reading ...

I started learning JavaScript in July 2020 and had been using strictly CSS to style my own apps but I've decided to take a stab at bootstrap with React Bootstrap. There's a learning curve and at first, I thought, it'd just be faster if I style all of this myself with CSS. However, I know that in a lot of job descriptions, bootstrap comes up in the tech stack as a preferred skill to have. After working with it, I realized, it could save me a lot of time making sure everything is formatted corr...
Continue reading ...

Here are the steps that I took to deploy my React App today: 

1. First sign up for a free AWS account
2. Create a new app in AWS Beanstalk
3. Use git to bundle my source according to instructions here: $ git archive -v -o myapp.zip --format=zip HEAD
4. One thing that I noticed that AWS Beanstalk looks for to run the files in there server.js (back-end) and client folder (front-end). So I'll need to make some changes. Example: my server file should be named server.js and not "index.js" like I have now. Also, t...

Continue reading ...

Through GoDaddy, I pay shared hosting for one of my React apps. It was quite easy. After I run a build, I just drag over some files and then it was done.

Steps to use Cpanel from Godaddy's Shared Hosting to host a React App

Here are the steps I took to complete the entire hosting process:

1. After you've logged into Godaddy with your account information, go to the cpanel File Manager part of Godaddy for your hosting account. Go to 'settings' to check the box next to "Show Hidden Files" or you won't...

Continue reading ...

Happy New Year, guys!

I had a couple more GitHub issues today when I tried to get my local files on GitHub, but finally solved them.

Today, I'm ready to deploy my first week's work on my current project on Heroku but before I do that, I needed to put my local files onto git and GitHub. I had issues with my React project not rendering onto my localhost properly earlier this week after I had tried to 'git init' it. I had to keep creating new files so to not delay my dev process, I have been worki...
Continue reading ...

For the last 24 hours, I have been working on my Contact Us form and I have it up and running now. However, no surprise here, I didn't do it without some errors at the beginning. I found some sources that I want to document here to look back on for the future for the next Nodemailer implementation.

Here are the three resources on Nodemailer that I looked at: 
https://lo-victoria.com/build-a-contact-form-with-react-and-nodemailer
https://w3collective.com/react-contact-form/
https://nodemailer.com/...
Continue reading ...