DEV Community: Brittany

A Freeform Assignment

Brittany — Tue, 20 Jun 2023 18:51:46 +0000

This was originally posted on hashnode

I recently received a challenge to create something using San Francisco's food truck open dataset. It could be anything I want, the goal is just to show some of my skills and share some high-quality code.

The challenge states that the team loves to eat and that they are also a team that loves variety, so they also like to discover new places to eat. For this reason, I think I want to create a web application using React to list all of the Food Trucks by name, address, and food items available. In addition, I would love to create an onClick, that would allow a user to see the location on Google Maps. Based on this information, I know some of the APIs I may need include the following:

React (it is a frontend application after all)
Google MAPS API
Chakra-UI (I always wanted to try this)
React Router Dom - I know I will need to route to the google maps page somehow.

Those are just some of my thoughts. As build this freeform project, I will share how I get through each challenge that arises and share the resources that get me through it.

Side note: Ideally, I would want to store my information in a database using Postgresql and use nodejs/express to route through some of the rest API routes. However, due to time constraints, my goal was to upload the CSV file using React and display it.

Uploading the CSV file into React

I used WebStylePress youtube tutorial to upload the CSV file and display it using React. The tutorial guided me to the papaparse module, which made this easier than I expected to display the data. Example below:

import React, { useState, useEffect } from "react";
import Data from "./data/Mobile_Food_Facility_Permit.csv";
import Papa from "papaparse";

  const [isDataLoading, setDataLoading] = React.useState(false);
  const [data, setData] = useState([]);

    const fetchData = async () => {
    const response = await fetch(Data);
    const reader = response.body.getReader();
    const result = await reader.read();
    const decoder = new TextDecoder("utf-8");
    const csvData = decoder.decode(result.value);
    const parsedData = Papa.parse(csvData, {
      header: true,
      skipEmptyLines: true,
    }).data;
    setData(parsedData || []);
    setDataLoading(false);
  };

  useEffect(() => {
    setDataLoading(true);
    fetchData();
  }, []);

  console.log(data);

Adding Pagination

Luckily, I built an application with some pagination before. I was able to use this file to pass in the data, the current page, and the pagesize to render the paginated pages using lodash. Thank goodness for having past projects! 🎉

Below was the result:

import _ from "lodash";

export function paginate(items, currentPage, pageSize) {
  const startIndex = (currentPage - 1) * pageSize;
  return (
    _(items)
      .slice(startIndex)
      .take(pageSize)
      .value()
  );
}

Added the following to App.js to display the pagination.

 const handlePageChange = (pageNum) => {
    setcurrentPage(pageNum);
  };

  const filtered = data;

  if (data && data.length === 0) return <p> There are no data </p>;

  const paginatedTrucks = paginate(data, currentPage, pageSize);

  return (
    <div className="App">
        <Container maxW="2xl" bg="blue.600" centerContent>
          <h1> Showing {data.length} Food Trucks in database.</h1>
          <TableContainer>
            <Table variant="simple" overflow="scroll" size="sm" maxWidth="10">
              <TableCaption>
                <Pagination
                  itemsCount={filtered.length}
                  pageSize={pageSize}
                  onPageChange={handlePageChange}
                  currentPage={currentPage}
                />
              </TableCaption>
              <Thead>
                <Tr>
                  <Th>Name</Th>
                </Tr>
              </Thead>
              <Tbody>
                {paginatedTrucks.length !== 0 &&
                  paginatedTrucks.map((row, index) => (
                    <Tr>
                      <Td >
                        {row.Applicant}
                      </Td>
                    </Tr>
                  ))}
              </Tbody>
            </Table>
          </TableContainer>
        </Container>
    </div>

Adding a Search Bar

This was by far the hardest part and took me a while to get. The goal was to allow a user to filter through the names of this application to show the Name, FoodItems, and Location. I struggled because the data was an array of multiple objects. For some reason, I could not wrap my mind around how I could filter through the data["Applicant"] and find the value that matched the search query.

First Attempt

I know had to use Object.values and Object.keys to map through the objects in the array to display in the table. I ended up with this solution, which did show the item, but I had to figure out how to show all of them.

  const item = props.trucks[0];
  console.log(Object.keys(item).map((key) => console.log(key)));

Resources used:

FoodTrucks.jsx

import React from "react";
export default function FoodTrucks(props) {
  return (
    <>
      {props.trucks.length ? (
        <table className="table">
          <thead>
            <tr>
              {Object.keys(item).map((key) => (
                <th key={key}>{key}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {props.trucks.map((row, index) => (
              <tr key={index}>
                {Object.values(row).map((key) => (
                  <th key={key}>{key}</th>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      ) : null}
    </>
  );
}
  return (
    <>
      {props.trucks.length ? (
        <table className="table">
          <thead>
            <tr>
              {Object.keys(item).map((key) => (
                <th key={key}>{key}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {props.trucks.map((row, index) => (
              <tr key={index}>
                {Object.values(row).map((key) => (
                  <th key={key}>{key}</th>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      ) : null}
    </>
  );
}

I searched all over the web and eventually figured out the answer by using lodash again. I was able to use the .map to get the value for each object and check to see if it matched the searchQuery a user input. Then the lodash.map allows us to pass in a callback function to return the results from the filter. This was the result:

  const Search = (searchTerm, limit = 10) => {
    let results = [];
    _.map(data, function filterItem(n) {
      if (n.Applicant.toLowerCase().startsWith(searchTerm.toLowerCase())) {
        results.push(n);
      }
    });
    return results;
  };

I am so happy I figured that out!!!! 🤣🎉

Google Maps

At this point, I have been working on this project for 4 hours, which is a bit longer than I wanted. So I used some resources to get a move on. I used the following youtube video and honestly, copied the code and pasted it into my project. (If anything I am resourceful, shout out to @mafiacodes on Youtube, make sure you subscribe to their channel!!

The goal was to take Google Maps and when a user clicks on the location, it will route them to the map with the location there. For this, I needed to add Google Maps API / React Google Maps Api Style Guide, of course, but also React router dom to show this on a different page.

Issues

I ran into an issue with my Marker not showing up on the Google Map. I googled around and found out that it is a known issue and some believe it has to do with React.StrictMode. I ended up importing the MarkerF "@react-google-maps/api" and that appeared to work. I will do more research on why this error occurred, but for now, it will have to do, due to. . .you guessed it. . .time constraints.

Here are the links to the resources I used to resolve the issue:

Styling:

I wanted to try a new library but also easily be able to update styling so I went with chakra-ui. It was fun to mess around with it for this project. I would love to do more with

Updating my readme:

I wanted to make sure my readme was 🔥, so I used my favorite readme template and used this markdown playground to make sure everything was to my liking.

End Credits

As I said at the beginning of this post, this was simply to get something done in 2-4 hours, ideally, I would want to have a backend using nodejs and SQL as a database. I may attempt this on my own time, just to show how I would go about it or maybe I will try to rebuild it using nextjs-prisma-postgres because why not?!?!? haha

Let me know if you would like to see the Github link.

I hope you enjoyed this read and as always I leave you with a song:

Song of the day:

Laura Roy · Sunrise

Pramp - Interview Type: Frontend - Flip Counter

Brittany — Tue, 13 Jun 2023 21:08:40 +0000

This blog was originally posted on Hashnode.

Hey there! It has been a while since I blogged, but I want to become more active, especially as I begin to study more for interviews. I recently had a practice interview with PRAMP, where I signed up for a front-end interview that focused on building a flip counter. The goal is to:

**Flip Counter - Build a flip counter that counts a minute (0-59) iteratively.If you can, try and minimize the creation of new DOM elements in runtime, by reusing the same elements."

I wanted to use React since that is what I use the most. Building a counter is simple, there is an example given in the React documentation:

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

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

I started by creating a variable named count that I would keep track of the state, then I used the React.useEffect hook to check if count is less than 59. If it is, it would continue to increment, else it should stop. In addition, I added a setTimeout so that it would increment every second, just like a timer. Then I returned/rendered the {count} variable in the app.

import React from 'react';

export function App(props) {
  const [count, setCount] = React.useState(0);

   React.useEffect(() => {
    if(count <= 59)
      setTimeout(() => {
          setCount(count + 1)
       }, "1000")
    }
  })

  return (
    <div className='App'>
      <h1> Counter </h1>
      <span className="counter"> 
         {count}
      </span>
    </div>
  );
}

This worked, but there was one problem, I was having a hard time with styling because the count is considered one variable. While I am sure there is a way to abstract the numbers, I decided to take the approach of creating two more variables to keep track of the numbers.

import React from "react";
import "./styles.css";

export default function App() {
  const [count, setCount] = React.useState(0);
  const [first, setFirst] = React.useState("");
  const [second, setSecond] = React.useState("");

  React.useEffect(() => {
    if (count <= 59) {
      setTimeout(() => {
        setCount(count + 1);
      }, "1000");
      if (count < 10) {
        setSecond(count);
      } else {
        const getFirstNumber = count.toString()[0];
        const getSecondNumber = count.toString()[1];
        console.log(typeof getFirstNumber);
        setSecond(getSecondNumber);
        setFirst(getFirstNumber);
      }
    }
  }, [count]);

  return (
    <div className="App">
      <h1> Counter </h1>
      <div className="counter">
        <span>{first}</span>
        <span>{second}</span>
      </div>
    </div>
  );
}

Then I added the CSS for each span!


.App {
  font-family: sans-serif;
  text-align: center;
}

.counter {
  display: flex;
  justify-content: center;
  align-content: space-between;
  gap: 10px 20px;
  font-size: 200px;
}

.counter span:nth-of-type(1) {
  background-color: grey;
  border-radius: 30px;
}

.counter span:nth-of-type(2) {
  background-color: grey;
  border-radius: 30px;
}

However, after further thought, I realized this would not work if the number was 3 digits long so maybe it is best if I use an array and iterate over it!

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [count, setCount] = React.useState(0);
  const [numArr, setNumArr] = React.useState([]);
  const [first, setFirst] = React.useState("0");
  const [second, setSecond] = React.useState("");

  React.useEffect(() => {
    if (count <= 59) {
      setTimeout(() => {
        setCount(count + 1);
      }, "1000");
      if (count < 10) {
        setSecond(count);
      } else {
        let num = count.toString().split("");
        console.log(num);
        setNumArr(num);
      }
    }
  }, [count]);

  return (
    <div className="App">
      <h1> Counter </h1>
      <div className="counter">
        {count < 10 ? (
          <>
            <span>{first}</span>
            <span>{second}</span>
          </>
        ) : (
          <> 
            {numArr.map((num) => (
              <>
                <span>{num[0]}</span>
                <span>{num[1]}</span>
              </>
            ))}
          </>
        )}
      </div>
    </div>
  );
}

Then I updated the CSS. I am not a pro at CSS yet, so I am not sure how to add the span:nth-of-type to all future spans, but it would be helpful, for now, I just added the.counter span:nth-of-type(3) to the css.

.App {
  font-family: sans-serif;
  text-align: center;
}

.counter {
  display: flex;
  justify-content: center;
  align-content: space-between;
  gap: 10px 20px;
  font-size: 200px;
}

.counter span:nth-of-type(1) {
  background-color: grey;
  border-radius: 30px;
}

.counter span:nth-of-type(2) {
  background-color: grey;
  border-radius: 30px;
}

.counter span:nth-of-type(3) {
  background-color: grey;
  border-radius: 30px;
}

Once, I got that working I reread the question and realized that the question ask that I build a flip counter that counts a minute (0-59) iteratively! So, I added code that checks to see if count <= 59 and if it is, it will update setCount(0) to zero, updating the state allows the component to rerender, since it is watching the count state in the React.useEffect. It allows the app to count from (0-59) iteratively!

import React from "react";
import "./styles.css";

export default function App() {
  const [count, setCount] = React.useState(0);
  const [numArr, setNumArr] = React.useState([]);
  const [first, setFirst] = React.useState("0");
  const [second, setSecond] = React.useState("");

  React.useEffect(() => {
    if (count <= 59) {
      setTimeout(() => {
        setCount(count + 1);
      }, "1000");
      if (count < 10) {
        setSecond(count);
      } else {
        let num = count.toString().split("");
        console.log(num);
        setNumArr(num);
      }
    }
  }, [count]);

  return (
    <div className="App">
      <h1> Counter </h1>
      {count <= 59 ? (
        <div className="counter">
          {count < 10 ? (
            <>
              <span>{first}</span>
              <span>{second}</span>
            </>
          ) : (
            <>
              {numArr.map((num) => (
                <>
                  <span>{num[0]}</span>
                  <span>{num[1]}</span>
                </>
              ))}
            </>
          )}
        </div>
      ) : (
        setCount(0)
      )}
    </div>
  );
}

This appeared to work, I did not add any animations, but I was able to create the task at hand. Let me know if you have any advice on how to make the code better.

Thank you for reading!

Sincerely,

Brittany

As always, a song!

noxz · 1 Thing 2 Know [mashup]

Part 1: Setting up postgres for a simple C.R.U.D. using Nodejs (express)

Brittany — Tue, 16 May 2023 01:55:13 +0000

I have an interview coming up and needed to quick refresher on nodeJS, and what better way is there to refresh on something, then building with something with it. I decided to create a simple database for an animal shelter, to help the owners keep track of the animals in the shelter. I was told that I would need to use the following frameworks/libraries for the interview so I decided to use it for this practice project:

NodeJS
ExpressJS
Postman (for testing)

The goal for my refresher was to make a simple api that could use a sql database. I decided to use PostgreSQL as my database.

Getting Started

First I created a folder and initialized it with npm so that I could install my dependencies:

mkdir nodejs-api
cd nodejs-api
npm init -y

This created my package.json file. Then, I added the dependencies that I felt I needed for this project.

dotenv - npm i dotenv
- Dotenv - "Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env." Pretty much, it helps you hide variables, things like private api keys, passwords, or emails or whatever you do not want the world to see.
express - npm install express --save
- Express - Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. With a myriad of HTTP utility methods and middleware at your disposal, creating a robust API is quick and easy.
nodemon - npm i nodemon
- nodemon - nodemon is a tool that helps develop Node.js based applications by automatically restarting the node application when file changes in the directory are detected.
pg/pg-pool - npm i pg-pool pg
- pg/pg-pool - A connection pool for node-postgres

My package.json looked like this:

{
  "name": "nodejs-api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "nodemon": "^2.0.22",
    "pg": "^8.10.0",
    "pg-pool": "^3.6.0"
  }
}

After installing my dependencies, I added the folders that I would need.

project
│   README.md
│   package.json
│   package-lock.json
|   .gitignore
|   .env
|   db.js
|   server.js
└───src
│   │
│   └───animals
│       │   controller.js
│       │   queries.js
│       │   routes.js

PostgresSQL SQL Shell (psql)

The next step was to open the SQL Shell (psql) and create a database and table to use. Sign into psql (if you use a password, remember it)

Create a database:

postgres=# CREATE DATABASE animals;

Create a table:

CREATE table animals (ID SERIAL PRIMARY KEY,name VARCHAR(255),type VARCHAR(255),age INT,dob DATE);

Enter/cd into the animals table:

\c animals

Insert rows into the table:

INSERT INTO animals (name, email, type, dob) VALUES ('Dory', 'fish', 1, '2022-08-04'), ('Sally', 'dog', 32, '1990-01-01'), ('Perry', 'cat', 32, '1990-01-01');

Make sure everything is working:

animals=# SELECT * FROM animals;

It should return the table.

Now let's get express set up!

Express will allow us to see the database in interfaces such as chrome/postman.

In server.js


const express = require("express");
const app = express();
const port = 3000;

app.listen(port, () => console.log(`App Listening on port ${port}`));

Now you should be able to visit https://localhost:3000 and see hello world.

In the next post, we will create the routes to the animals database, so that we can make get, post, put, and delete request to update the database through each route.

As always, I leave you with a song:

How To Connect Your AWS Domain Name To BlueSky

Brittany — Tue, 25 Apr 2023 18:26:01 +0000

Hey there!

I know it has been a while, but honestly, these past few months have been very difficult. I lost my job at Twitter (thanks Elon) and I had a procedure earlier this year that caused me to have to take a step back. But I am back actively looking for my next role and coding again! Can't wait to share some of the things I have been building, such as a chrome extension and a site for a family member! Also, I am learning python and refreshing on SQL (more on that later). Anyways, I know you did not come here for my life story. I wanted to share how I added my domain name to my BlueSky account and now I am using it as my username.

What is BlueSky? a decentralized Twitter alternative and viewed as a competitor to the tech giant, pretty much Twitter but decentralized.

What does decentralized mean? It means it is not controlled by the Tesla guy. It is controlled by distributed network rather than one single one.

How do I join? Well right now, it is an invite only, so you can reach out to others who have access to the app already and see if they have an extra invite available. I am sure once it is out of beta it will be available to everyone.

I am on! How do I add my AWS domain name as my username? I got you!

Prerequisites: You already use/have AWS as your domain name or have a domain name on AWS.

Step 1: Head over to the BlueSky app on your phone.

Select your profile picture in the top right corner

Go to settings

Select "change my handle"

Select "I have my own domain"

Enter your domain name & copy the domain value, keep the app open, and head over to AWS.

Step 2: Head over to AWS Route 53 (I googled Amazon Route 53) and click on the hosted zones section.

Step 3: Click on the Domain name you would like to use:

Step 4: Click on that yellow/orange "Create record" button

Step 5: Update the record name with the information provided by BlueSky and save the record

Record name: _atproto
Record Type: Txt
Value: Paste the value provided.

You should see the record now

Step 6: On the BlueSky App, click on the Verify DNS Record.

YOU DID IT!

Now you should be able to use your Domain name as your username on BlueSky.

Let me know if this helped or if any issues arise so I can update the post.

Sincerely, Brittany

As always, I love to end my blog post with a song. I recently saw one of my favorite jazz bands Brasstracks live and this throwback has been on repeat lately. Enjoy!

I want to build an open sourced parking app because I live in NYC

Brittany — Tue, 06 Sep 2022 15:37:41 +0000

Recently, I was driving in NYC and, as expected, when I got to my destination I could not find parking. I ended up paying for parking, but it reminded me of an idea I had years ago. A parking app that allowed users to share open parking spots. It was one of my first app ideas that I worked on years ago, called the Parking App. The idea is that a a user will share when they saw an open car spot or if they plan to leave a parking spot, they share it too. It would go based off a honor system and allow people to see places where there might be parking.

Today, it reminds me a lot of the waze app, where users are able to report police, items in the street, cars on the side of the road, etc. Imagine having an app that shows open parking spots in some of the largest cities. It even shares hydrants or places where you can't park! It would be great and save so much time.

I remember when I was building the app, I ran into a lot of questions some included:

Why would people use this app? What are the top incentives? I was thinking about a point system where if a user shares a spot they get points that will give them more opportunities to see spots. If you never contribute to the app, you wont see spots or may not see as many spots. It would make people want to share more so that they can have more chances of seeing free open parking spots.
Security. We want to make sure a user is unable to know a persons location. For example, we don't want someone to say a place has an open parking spot and be waiting for someone to park there.
Should people be able to save spots. Right now, it's just a trusting honor system, but what if people began to save spots for people. For example, if they knew they were leaving soon. Add it and give a countdown for someone who needs a spot in the area.

Hmmm, these are all just thoughts. I still love this idea and hopefully one day I can pick it back up again. I would need more IOS and Android developers, but it would be a fun open source project to work on. If you have any ideas to add or if you are interested in this idea. Comment below!

As always thank you for reading!

Helpful Online Tools

Brittany — Sun, 04 Sep 2022 21:30:59 +0000

This is my second article for the #4articles4weeks challenge on Hashnode and the question I chose to answer today is:

What have been the most helpful online tools to self-improve as a developer/software engineer (from bootcamps to university degrees?

This one is a little difficult because it truly depends on what you are aiming to do. I personally had the opportunity to attend a bootcamp that provided me with the footing to get into Software Engineering. However, prior to attending my bootcamp, I used various online tools to prepare me. This includes, but is not limited to, the following websites that played a major role in my ability to improve as a software engineer. :

Code Academy
FreeCodeCamp
Harvard CS50
LinkedIn Learning - PS this is usually free if you have a library card.
The Odin Project
Exercism
Frontend Mentor

AND MY FAVORITES!!!!!!

Google and youtube are amazing when you are learning. I remember finding codewithmosh when I was googling/searching youtube for a lesson on redux. I enjoyed codewithmosh's teaching style and signed up for one of his courses. You never know where you might find your favorite teacher.

As I advanced, I found myself signing up for paid courses on the following sites:

When I began practicing my algorithms and data structures I found myself using sites like:

Some notes to carry with you.

While all of these resources are great, it is important that you remember to read and use the documentation for the languages and resources that you are using. Make sure to build something on your own, having courses are important, but having an understanding and building on those learnings are key to success.
It is important to not only build things on your own, but build things with others. Join communities, like Twitter, or Discord, or Slack groups. Put yourself and your work out there. Contribute to an open source project on Github and show off those skills!
NEVER EVER BE AFRAID TO ASK QUESTIONS! Question everything you do and see, this you will make you a better developer! Keep going, growing, learning, and building.

As always thanks for reading! See you next week :)

Here is a tweet about some books that were gifted to me that I used too:

pic.twitter.com/r8KVlBXtx2
— Brittany || B. (@SincerelyBrittt) May 19, 2021

How did I get my first job as a software engineer?

Brittany — Sun, 21 Aug 2022 19:44:00 +0000

So. . . it has been a while since I have blogged. Honestly, I miss it. But the truth of the matter is you don't realize how busy you become once you start a job! I thought I would continue to blog and create personal projects every day when I started working as a developer, but I WAS WRONG! Then I came across the #4articles4weeks challenge on Hashnode and I figured this would be a perfect opportunity for me to get back into the hang of things. One prompted article once a week can't be that hard, right? Especially when I completed #100DaysOfCode and blogged/coded every day for 100 days. Hopefully, after this challenge, I can start blogging once a week for the rest of the year, maybe, just maybe. . . .

Anyways, this article is going to be very informal. I found out about this challenge a few days before it was due:

Time for me to get back to it! #ChallengeAccepted

4 Articles in 4 Weeks - Hashnode Writeathon
{ by @BatsouElef } from @hashnode #hashnode #challenge #programming #4articles4weeks #writeathon https://t.co/fXadvedl3z
— Brittany || B. (@SincerelyBrittt) August 18, 2022

Also, I just finished spending time with my nieces and nephews who were visiting for the weekend. My mom wrote her first childrens book/book in general and had her first book signing this weekend, which means my entire immediate family was here and it was nice. But now here I am writing a blog before its due so I can be proud of myself for completing this challenge in time. 😅

Now that you understand my situation, I hope you excuse any grammar and/or punctuation errors and continue to read it with extended grace. Now back to the subject at hand. . . the #4articles4weeks challenge had three article prompts for #week1. But since I just mentioned not blogging for a while because of my job I figured that would be the perfect opportunity to answer this question:

How did you get your first job as a developer and what advice would you give to new developers to get their first job? How can you strengthen your portfolio to showcase your skill set?

I will break down this question to the best of my ability and share as many details as I can.

How did you get your first job as a developer?

Studying, prayer, God, luck, personality, and more prayer . . . .😂

What advice would you give to new developers to get their first job?

Practice, I know you probably hear that all the time, but it is true. Before applying for your dream place. Apply to places you don't really care to work for, make sure to get that practice in, get those rejections, and get those acceptances. Get used to being rejected without letting emotions stopping you from trying again. In addition, if I am being honest, I had the opportunity to interview quite often before becoming an engineer. I worked in finance before transitioning into tech so I had my fair share of rejections and I think I had behavioral down, since I studied business and I've had professional work experience. It was mostly the technical that I was nervous about. So I made sure to practice technical interviews and algorithms. The usually, leetcode, hackerrank, codewars still work, but I recommend using websites, like pramp, to practice technical interviews.

If you need more practice, go to networking events. I remember while I was still in bootcamp, I was attending virtual career fairs. I found
the Black Professionals In Tech Network (BPTN) who hosted the BFUTR 2020 (Virtual Experience) Tech Summit, which was Presented by TD. It was cool because there were tons of companies and virtual rooms to network and get comfortable with my elevator pitch and sharing my resume. I found myself attending many events where I got the opportunity to practice interviewing and talking with people. It is great to find communities that you can relate to, I found myself gravitating to meetups and events that were for black women since I am a black women. . . For example I still go to womanhack events, which I LOVE because you learn about companies and have the opportunity to have 1:1 speed networking opportunities. If you cant find a meetup or group, practice with your bootcamp lead or other bootcamp goers, friends, family, anyone. Just practice!

How can you strengthen your portfolio to showcase your skill set?

Honestly, just keep building. I think something that helped me was I my ability to show that I wanted to be a developer. Well how did you do that Brittany? I am glad you asked, while I was in a bootcamp, I was required to learn and build certain things in order to graduate. I knew that everyone who graduated with me would be graduating with the same skills and projects as me on their resume. I thought to myself, "how can I stand out?" that is a question I am always asking.

What can I do to showcase my skills? What can I do to be different?

So while in bootcamp, I decided to join Major League Hacking and was apart of their fellowship. This made me stand out on my resume because I had my usual bootcamp projects, but also had projects where I collaborated on building things and using different technologies. In addition, I contributed to open source by participating in the 2020 hacktoberfest I made sure to put myself out there, show my capabilities of working on a team, and more. I used to participate in mintbean.io hackathons that happened every month. Hackathons are a great way to get experience and practice working in a group setting. It also adds the sense of urgency that is necessary in the real world. In addition, I blogged quite often to show my ability to write/document my experiences and code. In addition, I began tweeting about my experiences and staying in contact with the #devcommunity on twitter. Also, I made sure to keep my resume and Github up to date. Sometimes the little things, like a cool looking Github can make a difference.

Seriously, how did you get your first job as a developer?

Honestly, everything I mentioned above contributed to my success. I found a company with a culture that I loved, I practiced, I built things, and I never gave up. Keep coding, keeping trying, find a community to keep you accountable, never give up, and you will get your first job.

Made My First Fetch Request Using Next.js

Brittany — Wed, 27 Jan 2021 02:32:02 +0000

It has been a while since I have written a blog post and I wanted to share something that I learned this week. I recently found out about nextjs from the ladybug podcast and been, not so secretly, obsessed ever since, here's proof of that:

Brittany || B.

@sincerelybrittt

@LadybugPodcast is amazing! Just listened to the Next.js episode and now I want to stop everything I’m doing in Gatsby and start over in next.js 😂

20:40 PM - 25 Jan 2021

I could write a blog on why nextjs has become popular, but I recommend listening to the podcast episode or reviewing some of the following blogs:

Why You Should Learn Next.js as a React Developer - FreeCodeCamp

Next.js for React: Why You Should Give It a Try Right Now By Louis Petrik

What’s The Difference Between NextJS and Create-React-App? By Malcolm Laing

I am almost done with the step-by-step guide for nextjs and recently finished the Pre-rendering and Data Fetching section of the guide.

The Pre-rendering and Data Fetching guide is very helpful and I was able to fetch data using the file system provided in the guide. But, I wanted more practice and decided to make a fetch request to Dev.to.

Simple Fetch Request To Get Dev.to post using Next.js

First off, you should know that Dev.to has an api that is in beta still. You can find the documentation on how to set it up here: https://docs.dev.to/api/#section/Authentication .

I was able to get all of my blogs by making a fetch request using the following url: https://dev.to/api/articles?username={YourUserName}

Understanding the Next.js Terminology

After reading the documentation, I realized that for my particular task required to fetch the list of blog posts from the Dev.to api and that could be accomplished with Static Generation with data . According to the nextjs documentation, "static Generation is the pre-rendering method that generates the HTML at build time. The pre-rendered HTML is then reused on each request. In order to fetch this data on pre-render, Next.js allows you to export an async function called getStaticProps from the same file. This function gets called at build time and lets you pass fetched data to the page's props on pre-render."

The nextjs documentation also mentions, "getStaticProps only runs on the server-side. It will never run on the client-side. It won’t even be included in the JS bundle for the browser. That means you can write code such as direct database queries without them being sent to browsers."

Based off this information I was able to make my first fetch request to an external api (dev.to) to fetch my blogs and render them onto the page using nextjs .

Rendering the posts onto the page

First I made the external API fetch request to dev.to to get the posts. (If you are following along make sure to input your username where is says "myUsername") Then, I return the posts under props. The documentation of nextjs states that by returning { props: posts }, the entire component will receive posts as a prop at build time.

export async function getStaticProps() {
  const res = await fetch(
    "https://dev.to/api/articles?username={myUsername}"
  );
  const posts = await res.json();
  return {
    props: {
      posts,
    },
  };
}

Then, I have a two functions that help to map over and render the posts. If you recall, Static Generation is the pre-rendering method that generates the HTML at build time. The pre-rendered HTML is then reused on each request. This function gets called at build time on server-side. It won't be called on client-side, so you can even do direct database queries. getStaticProps() make it so that my dev.to posts will be populated at build time.

function renderPosts(blog) {
  return (
    <div className="blogCard">
      <div className="blogCardImage">
        <img src={blog.social_image} alt="Image" />
      </div>
      <div className="blogCardContent">
        <h3>{blog.title}</h3>
        <span>{blog.description}</span>
      </div>
      <a href={blog.url} target="_blank">
        {" "}
      </a>
    </div>
  );
}

function devPosts({ posts }) {
  return <>{posts.map((post) => renderPosts(post))} </>;
}

My entire code looks like this

function renderPosts(blog) {
  return (
    <div className="blogCard">
      <div className="blogCardImage">
        <img src={blog.social_image} alt="Image" />
      </div>
      <div className="blogCardContent">
        <h3>{blog.title}</h3>
        <span>{blog.description}</span>
      </div>
      <a href={blog.url} target="_blank">
        {" "}
      </a>
    </div>
  );
}

function Blogs({ posts }) {
  return <>{posts.map((post) => renderPosts(post))} </>;
}

export async function getStaticProps() {
  const res = await fetch(
    "https://dev.to/api/articles?username={myUsername}"
  );
  const posts = await res.json();
  return {
    props: {
      posts,
    },
  };
}

export default devPosts;

If you have any questions/ advice feel free to comment.

I hope to learn to set up user Authentication/Authorization next on nextjs (pun intended).

As always thanks for reading!

Sincerely,
Brittany

Song of the day:

My Final Project - Built With React, Redux, and Rails

Brittany — Wed, 16 Dec 2020 02:07:02 +0000

OH MY GOODNESS! I actually did it! I completed my final project for the Flatiron School Software Engineering Program and I can officially call myself a Full Stack Software Engineer!

My final project idea was a simple one, or so I thought. I wanted to create a music diary. What is a Music Diary you may ask? Well, I love music and there are times when I just want to write about my feelings for the day and why a particular song resonated with me. So I thought it would be cool to create an application where a user could create a diary entry for the day associated with a song found using the Spotify API. In addition, I wanted users to be able to comment on other users diary entries. As always, I drew out my project idea:

Creating the idea was hard because I could not come up with the best idea this time. I knew I wanted to create something associated with music and wanted to attempt using an API (Spotify). Once I came up with an idea I had to really concentrate on how to use Redux with React.

My Error Handling method using Redux and React.

For starters, in my backend I wanted to make sure that a user could not add multiple diary entries for the same day. In order to do that I added the following to my Entry model:

class Entry < ApplicationRecord
    belongs_to :user
    belongs_to :song
    has_many :comments, dependent: :destroy

    validates :date, presence: true
    validates :description, presence: true

    validates_uniqueness_of :date, :scope => :user_id

end

The above validates the date to make sure that it is unique to the user_id. So the same user_id can not have the same date.

Then I moved on to my frontend and created an errors reducer like so:

export default function errorReducer(state = {message: "" }, action) {
    switch (action.type) {
        case "ADD_ERROR":
            return {
                ...state,
                message: action.message
            }
     case "REMOVE_ERROR":
                return {
                  state: {message: "" }
                }
        default:
            return state
    }
}

The error reducer is pretty straight forward. It has a state that holds message which is a string by default and I wanted to be able to remove the error message so I created the action "remove_error" for that. I imported the errors reducer into the root reducer.

import { combineReducers } from "redux";
import commentsReducer from "./commentsReducer";
import searchReducer from "./searchReducer";
import userReducer from './userReducer'
import addSongReducer from './currentSongReducer'
import EntryReducer from './entryReducer'
import entriesReducer from './entriesReducer'
import loadingReducer from './loadingReducer'
import errorsReducer from './errorReducer'



const appReducer = combineReducers({
  user: userReducer,
  song: addSongReducer,
  search: searchReducer,
  comments: commentsReducer,
  entries: entriesReducer, 
  entry_id: EntryReducer,
  loading: loadingReducer,
  errors: errorsReducer,
});

export default rootReducer;

Now my errors will be accessible in my redux library under errors. I added an if statement to my action creator:

export const songOfTheDay = (song) => {
  return dispatch => {
    // dispatch({ type: 'REMOVE_RESULTS' })
    fetch(API + "/entries", {
      method: 'POST', 
      headers: {
        'content-type': 'application/json'
      },
      body: JSON.stringify({song: song}),
    })
    .then(response => response.json())
    .then(results => {
       if (!results.errors) {
        dispatch({ type: 'REMOVE_ERROR' })
        dispatch({ type: 'SONG_RESULTS', results })
        } else {
        dispatch({ type: 'ADD_ERROR', message: results.errors })
     }
  })
  }
}

The if statement above states that if there are no error messages it will remove any existing errors from the state and add the results to the song.

The if statement checks to see if the results returned comes back with an error. It will add the message errors to the errors state.

Then I added the following to my component:

const SelectedSong = (props) => {
 if(!props.errors){
  return(
     <div className="card">
           card information here 
    </div>
  )}
  else {
    return(
    <div>
      <p> This is props</p>
      <p> {props.errors} </p>
    </div>
    )
  }
}

const msp = (state) => ({
    errors: state.errors.message
  })

export default connect(msp, null)(SelectedSong)

The above checks to see if there are any error messages using the map state to props. If there are no errors it will continue to show the card information, else it will display the prop errors.

There is always a better way of doing something but it worked for my situation and what I needed to get done.

As always, thank you for reading!

Sincerely,
Brittany

Javascript and Rails Single Page Application ("SPA")

Brittany — Tue, 06 Oct 2020 17:26:16 +0000

GUESS WHAT!?

I built a single page application using vanilla Javascript("JS") as the frontend and Ruby on Rails("Rails") as the backend.

Github Link Youtube Demo Live Site - Coming Soon

Introduction

I just want to say that this project was NOT easy, in fact this project was one of the hardest I had, in my opinion. With Rails, everything seemed so simple and organized, but then Javascript came and showed me that there are no RULES 😩😂! Learning Javascript is no easy task and I have reasons to believe that no one ever truly knows Javascript or all that it is capable of. I constantly found myself going to different platforms to learn more and although it was hard at times, I enjoyed every minute of it. I learned about Javascript variables, functions, data structures, hoisting, closures, class syntax, and much much more.

I recommend this course if you are learning Javascript, it helped me a lot. Javascript: Understanding The Weird Parts

Planning

First I had to come up with an idea for my project. I had to plan out my database. I created the following flow chart on Draw.io:

I knew that I wanted my application to have many users and that each user would have many workouts. However, I wanted to be able to have multiple workouts under the same date and my instructor recommended a join table for that, he is a smart man. Next step was to put my plans into action.

Using Rails as an API

The main difference between my previous Ruby on Rails application and this one is that I was only using it as an API. That meant that I had to run the following code to get my Ruby on Rails API up and running:

$ rails new my_api --api

Once I got rails api up, I added a few gems that I knew I needed into my Gemfile. The first one was gem 'rack-cors', which is a a gem that allows web applications to make cross domain AJAX calls. More information on how rack-cors works and how to implement it can be found here.

Once my gems were all set up, I created my migrations, created seeded data, and set up my RESTful routes. Another difference between a project built completely using Ruby on Rails versus when you are using it as your server is that you need to return the data as JSON. For example, my index method in my Users Controller would look like this:

class UsersController < ApplicationController
 def index
        user = User.all
        render json: user
    end
end

I have to render the json, so that when I run my server and visit http://localhost:3000/users in my browser, I will see data similar to this:

{
    "users": [
      {
        "name": 1,
        "name": "Harry Potter",
      },
      {
        "id": 2,
        "name": "Courage The Cowardly Dog"
      }
    ]
  }

The json data is now accessible to me and I can now make a fetch request to my backend.

Making Fetch Requests To My Database

In order to get the information from my backend I had to make a fetch request. First I made sure my server was running by keeping a terminal open in my backend, rails s, so that I could access the json data. Then, I created a file to make the fetch request to my join user_workouts table:

class WorkoutsAdapter {
    getWorkouts(){
        return fetch(`http://localhost:3000/api/v1/user_workouts`).then(res => res.json()
        )
    }

Iterating and Rendering Onto The Page

My biggest challenge

Once the information is returned, I wanted to iterate through the information and sort it by date, I was able to do that with the following code:

class Workouts{
    constructor(){
        this.workouts = {}
        this.adapter = new WorkoutsAdapter()
        this.fetchAndLoadWorkouts()  
    }
   fetchAndLoadWorkouts(){
        this.adapter.getWorkouts().then(workouts =>{
            workouts.forEach(workout => {
                if (this.workouts[workout.date]) {
                  this.workouts[workout.date].push(new Workout(workout))
                } else {
                    this.workouts = {...this.workouts, [workout.date]: [new Workout(workout)]}
                }

            })
        })
        .then(() =>{
            this.render()
        })
    }

The above code makes a request to the WorkoutsAdapter class and fetchAndLoadWorkouts() function, which is essentially the fetch request. The information received is the array of workouts. Then for_each workout it checks to see if the date exist in the this.workouts object. If the date does exist then it will push the workout into that date. If the date does not exist, then it will create a workout with that date as the key. Once it is done iterating through the data, it will go to the render() function that I created.

Below is my render function:

    render(){
   this.workoutContainer = document.getElementById('workout-container')
        const workoutString = Object.keys(this.workouts).map((date) => {
           return `<button type="button" class="collapsible">${date}</button><div id="all-workouts">
            ${this.workouts[date].map((work) => work.renderHTML()).join(' ')}</div>`
        }).join(' ')
        this.workoutContainer.innerHTML = `${workoutString}`
    }

I was able to successfully render onto the page by using the document.getElementById('workout-container') to select the element/div in the HTML. Then, using the Object.keys method on the this.workouts object, I mapped the data by the date and returned the dates in a button. Then I mapped the workouts by the date and placed them in a div and the the workouts successfully rendered onto the page underneath the correct date for each user.

This code was very challenging, but I was so happy when it was accomplished. Feel free to take a look at my project, I welcome all feedback and contributions.

As always, thanks for reading!

Sincerely,
Brittany

Song of the day:

My Experience With #100DaysofCode

Brittany — Sat, 03 Oct 2020 01:41:39 +0000

I DID IT! I completed my first round of #100DaysofCode! What did I learn? SO MANY THINGS.

Technical Skills:

I learned iterators, sql, sinatra, routes, active record, MVC, hashes, CSS, began learning javascript, and so much more.

Completed Projects:

via FreeCodeCamp:

Landing Page
Technical Documentation Page
Survey Form
Personal Page
Tribute Page

Certificate Earned:

On dev.to badges

On freecodecamp:

Friends:
The best part for me was the amount of friends I made throughout this process. There were many times when I had random people from all around the world motivate me, help me, or even set up a time to meet with me and review my code. It made me truly appreciate the dev community and all of the beautiful people who wanted to see me succeed. It is weird because I never met any of you, but I feel like I could not have done it without your inspiration and motivation so for that I thank you.

Behavioral Skills:
One thing about me is that I am a very determined individual, I have always been that way. When I say I am going to do something, unless something dire happens to prevent me from doing it, I do it! Well the same thing happened with me for #100DaysofCode. When I first started I thought I should blog about it, without realizing that all I had to do is write a Twitter post to accomplish the 100Day Challenge, but ambitious me thought, "oh thats easy, you can do it." I was wrong.

About halfway through #100DaysofCode there were times when I had absolutely nothing to write about. On those days, I either did tons of my bootcamp assignments or watched youtube tutorials all day. There were days when I just did not know how to convey what I learned just yet or I just did not feel like typing or writing anymore. On those days, I struggled.

I can tell when I had one of those days just by looking at the blog:

Day 44, Day 42, Day 50, etc.

I had nothing really to write about and just shared what I did, such as watching a a youtube tutorial.

Next for me?
I will continue to code every day because I really do love it and learn so much every single day. However, I think I will take a break from #100DaysofCode until I complete my bootcamp. I do not recommend doing both if you do not have the time to commit.

I was worried about sharing content as a beginner and if it is any help, so I asked Twitter and received the following response:

So, I plan to write a blog at least once a week. I want to continue to share what I learn from a beginners perspective and continue to see my growth in coding. In addition, I may possibly start vlogging my coding experience. I will keep you all posted on that.

Lastly, I was recently accepted into the MLH Fellowship and I am super excited!

// Detect dark theme var iframe = document.getElementById('tweet-1312046605172969478-956'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1312046605172969478&theme=dark" }

I can not wait to meet other developers, learn, and contribute to open sources.

I want to thank you all for helping me through this journey.

Sincerely,
Brittany

Song of the Day:

Day 100 : #100DaysofCode - I DID IT!

Brittany — Wed, 09 Sep 2020 01:49:04 +0000

I did it, on June 1, 2020 I wrote this tweet:

B.

@sincerelybrittt

Today I have decided to commit to #100DaysOfCode. I started it before and did not finish it. So today, June 1, 2020, I have decided to do it so that way I can look back 100 days from now and see how far I came.

14:48 PM - 01 Jun 2020

and today I completed the #100DaysofCode Challenge and I am proud of myself! I stuck to it and I can finally say I am a part of the #100DaysofCode community. I will create a post in the near future with my advice and experience with #100DaysofCode, but for now I am going to just enjoy feeling accomplished.

Today, I focused on JavaScript Array of Objects Tutorial and completed a few labs. One consisted of finding the first win in a game and then returning the year. I used google and freeCodeCamp to accomplish it.

function nbaChampionshipWin(arr){
  // console.log(arr)
  let win = arr.find(year => year.result === "win");
  // console.log(win)
  if (win){
    console.log(win)
    return win.year
  }else{
    console.log(undefined)
    return undefined
  }
}


const record = [
  {year: "2019", result: "lose"},
  {year: "2018", result: "win"},
  {year: "2017", result: "N/A"}
]

nbaChampionshipWin(record);

The nbaChampionshipWin function in the code above takes in an array as an argument. The array is an array of objects. The challenge was to find and only return the first year that a team won. In order to do that I used the .find method to return the value of the first element in the provided in the arr that resulted in a "win".

To make sure that the function does not return any errors, it is best to use the toLowerCase() method on the year.result so that it will always be lowercased and wont return false if the result is capitalized.

function nbaChampionshipWin(arr){
  let win = arr.find(year => 
    year.result.toLowerCase() === "win");
  if (win){
    return win.year
  }else{
    return undefined
  }
}


const record = [
  {year: "2018", result: "lose"},
  {year: "2017", result: "win"},
  {year: "2016", result: "N/A"}
]

nbaChampionshipWin(record);

Please remember that when using .find only the FIRST instance is returned. If you want to get multiple instances it is best to use the .filter method. More information on .filter here.

As always, thanks for reading! I will continue blogging, just not for 100 days in a row. Look out for my blog on my #100DaysofCode experience.

Sincerely,
Brittany

Song of the day: