I just wanted to give an update on Filament Hero and the progress made due to Hacktoberfest!

At the beginning of the month, I posted an article outlining a couple of my repos that will be participating in Hacktoberfest. This led to some great contributions to Filament Hero during the month!

What Progressed?

New Design 📐

When I was getting ready for Hacktoberfest, I decided to dedicate some time to polish the design for Filament Hero, mainly on the "backend". I worked out exactly what I wanted the application to do as well as what type of data models to create.

New Models 📝

I looked at my existing models and realized I can achieve a lot more if I added a few more properties. Updating and adding these new models will allow Filament Hero to be a better application to those who use it by keep track of more data as well as more metrics as well.

New CRUD Methods 🚀

With the new models, I needed new CRUD methods to match them. While doing so, I realized that MongoDB may not be the best choice, which lead me to ask the community what a better DB would be. I am currently still researching and experimenting different DB and ORM providers and I will provide an update with my results.

Newer Look 🔥

I also played around with a newer look and feel with Filament Hero. I updated the data table and added toast notifications when the users creates, updates, or deletes a printer, filament, print, ect. While working on the data table, I noticed that the table gets very wide, especially on small screens, that makes it difficult to view all the information. My question to you is, is there a better way to present the data to the user. For example, to display a list of cars in a fleet with their current status and maintenance data I would normally create a table with all the properties having their own column. Do you just have a side scrolling table on mobile screens? Omit data on small screens? Is there a design pattern I should learn?

That is all that has happened to Filament Hero this month. I am grateful to those who participated in getting Filament Hero further in its development! If you would like to follow along with the development, or want to participate, please checkout FilamentHero.com!

Hacktoberfest is here! I have a couple of repos that I am going to be working on during the month and welcome anyone to work on the project as well!

MongoDb, Express, Node.js Template

Repo Link This template is designed to help kick start Node.js applications that use Express.js, MongoDB, and Passport.js. Currently the application is set up to use ejs as the view engine, but can be adapted to use React or any other frontend framework.

My Goals

Here are my goals for this project that I want to work on during the month

• Make this an npm script to allow for easy installation (similar to npx create-react-app)
• Have an option to template with React

Filament Hero

Repo Link This is a new project of mine that helps those who use a 3d printer keep track of their filament usage as well as the parameters that made a print great or bad.

My Goals

• Help users store their print settings, so they can keep track of them
• Clean up the dashboard and how data is loaded, for speed

If you have any interest in any of these projects, please fork and work on it, I welcome any PR to be reviewed 😃

Happy Hacking! 💻

Mini wikis are an awesome way to learn how to work with an Api. There are several free Api's out there that provide informational data. For example, I have seen a couple of mini wiki's being made out of the Harry Potter Api and the Rick and Morty Api. These are great projects if you are learning a new framework or library as you need to read, transform, and display data. Occasionally, you can add a way to take user input to search for data or update data (depending on the Api rules).

Live Site

Repo

The SpaceX Api

The SpaceX Api , is an unofficial open source REST Api for SpaceX launch, rocket, core, capsule, starlink, launchpad, and landing pad data. This Api is what I use on my site to show the latest and upcoming launch information. For this project, I am going to use this Api to explore the rocket, launches, astronauts, and capsule information.

Getting Started

The Boiler Plate

Getting started was super easy, using the script to generate a starter Next.js project I was able to get up and running in no time! After the script completed running, I removed unneeded code and files. The api directory can be thrown out, as well as the Home.module.css file. I cleaned out the styles.css file as well removed the boiler plate code from index.js

Creating the pages

I am going need four additional pages for this project. Since I wanted to highlight the rocket, launches, astronauts, and capsule information from the Api, I created a page for each of these. Each of these pages functionally do the same thing, get the respective data from the Api and pass the data in as a prop to the Card component.

Here is the card component:

import React from 'react'
import Link from 'next/link'
import 'tailwindcss/tailwind.css'

const Card = ({document}) => {
    const {name, image, link} = document
    return (
        <div className="w-60 h-72 flex flex-col items-center justify-around mx-auto bg-white rounded-md filter drop-shadow-greenDrop my-5 p-4">
        <div className="p-1">
            <img className="object-scale-down h-44" src={image} />
        </div>
        <h2 className="mx-auto font-bold text-black">{name}</h2>
        <div className="mx-auto w-28 h-14 flex items-center justify-center text-white font-bold bg-secondary rounded-md filter drop-shadow-blackDrop">
            <Link href={link}>Learn More</Link>
        </div>
    </div>
    )
}

export default Card

As long as the data being passed in has the properties of name, image, and link, the data will be shown on the card.

Here is the code for the Astronauts page:

import React from 'react'
import Card from '../components/Card'
import { getAstronauts } from '../utils/utils'

const astronauts = ({ astronauts }) => {
    return (
        <>  
        <h1 className="text-center text-white xl:text-9xl md:text-9xl sm:text-9xl text-5xl p-5 font-barcode">SpaceX Astronauts</h1>
            <div className="w-11/12 mx-auto flex flex-wrap gap-x-4">
                {astronauts.map((astronaut, index) => (<Card key={index} document={astronaut} />))}
            </div>
        </>
    )
}


export async function getStaticProps() {

    let astronauts = await getAstronauts();

    return {
        props: {
            astronauts,
        },
    }
}

export default astronauts

You will notice that Astronauts page uses a function from the utils file. We will go over that more in the Getting Data section of this article.

Each of the cards has a link to display more information about the rocket, astronaut, launch, ect. This is where I had to be subjective on the data I wanted to display as the Api has lots of data (please note, the astronaut endpoint is very small, so I used all of the data returned)!

The pages to display launch data, rocket data, and dragon data are set up very similar to the astronaut page. The only difference is the data being displayed. The launch, rocket, and dragon endpoint have a lot of properties that are returned. I chose data that I thought was the most interesting and the most common. Of course you can render any of the properties as you see fit.

Getting Data

Since I use a handful of endpoints of the SpaceX Api, I decided it would be best to have a set of functions that I can use throughout the application. I created a utils folder and file in the root directory. I then filled it with the functions I needed to get the data.

Here is a function:

export async function getLaunches() {
    const resLaunches = await fetch('https://api.spacexdata.com/v4/launches')
    const launchesData = await resLaunches.json()
    if (resLaunches.status !== 200) {
        return {
            message: "Error Getting Launches"
        }
    }
    let launches = launchesData.map(launch => {
        let img;
        if (launch.links.patch.small === null) 
            img = "https://pbs.twimg.com/profile_images/1082744382585856001/rH_k3PtQ_400x400.jpg"

        return {
          name: launch.name,
          image: launch.links.patch.small || img,
          link: `/launch/${launch.id}`
        }
      })

    return launches
}

All of my functions follow a similar pattern to get the required data. This example function us handy as it checks to see if there is an image for the mission patch (as future missions are listed and not yet have a patch). I could remove those future missions, that would help solve this solution, but if a past mission patch is missing I would not have an image to show.

The endpoints that I call in the utils file return all of the data for that category. A future enhancement would be to store the responses in state so I don't have to make an additional Api call to get a single object (as far as I can tell, getting an object by Id returns the same properties as the objects returned on the "everything" endpoint).

Styling

You can learn a lot from using an Api and presenting it on the page, but why not style your project so when you show others they can tolerate looking at it? I chose to use Tailwind CSS to style my project. I was nervous as it was the second project I have used with it but it turned out to be an awesome experience. Using Tailwind was fast, and simple to get the look I was going for. An additional plus was their documentation on how to extend some of their styles so I could add custom fonts, colors, and shadows.

Lessons Learned

Here are the main lessons that I learned while working on this project

• The SpaceX Api is extensive and has lots of information
• Tailwind CSS helps me develop applications faster
• Next.js is powerful and has lots of awesome features

Future Enhancements

There are a few things I can improve on in this application

• Manage data through state, to limit the amount of api calls
• Using Next image can help with larger images that need to load (especially on the launches page where there can be dozens of large images)
• Look into using serverless functions to help limit the amount of work the client needs to do making api calls

This was a great project to work on and I hope this helps you want to make your own Mini Wiki

Components

My Arduino Zoom Box contains the following:

Project Board

Arduino Pro Micro

A 7Seg Display

8 Tactile switch buttons

15 10k Ohms 1% resistors

Header pin sockets (optional but recommended)

Design

There were three main things I wanted my box to do; send a key combo based on a button press, have multiple folders for key shortcuts, display which folder I was on. Originally this was going to be inside an actually box, which is why you see the project board has been cut. Ultimately, I decided to take it out of the box and put it right on the desktop.

Here is my design:

You can see that each of the numbers on the buttons corresponds with a pin. I would have used a program like TinkerCad to create the design, but they don't have the Pro Micro board.

Here it is fully assembled:

Here it is without the pro micro

Here is the back

What a mess of wires! The light blue is Blue Tack that sticks to my angled Lego's under my monitor 😅 (A 3D printed version is coming!)

I have some plans to improve the placement listed in the "Future Plans" section of this article .

The Code

The code was relatively simple as I only needed to code the three things above. The display was super repetitive and could be reduced to one function (already noted in Future Plans). Assigning the buttons to the appropriate pins was also relative and easy (again a keyboard matrix would reduce the amount of pins). Coding the buttons to move folders was a little challenging as the button bounce would more than one folder at a time (a simple delay after the button press eliminated this).

The core of this code is the Keyboard library. Without the library, this project would have been very difficult to complete. This is a great library that gives me access to all the keys I need! I can also chain them to do complex things such as using the Spotlight feature on Mac. That can be seen in the example code linked below.

Here is the stripped down code that can be filled in (I did leave a section as an example):

Zoom Box Code

Future Plans

I plan to enhance this project by designing and printing a "keyboard extension" that will attach to the left of my MX Keys keyboard, to bring the controls closer to my hands. I also plan on using a keyboard matrix to minimize the amount of pins taken up by the keyboard (this could allow for more keys). I have also looked at switching to cherry switches, for a more tactile feel.

This is an application to learn Netlify Functions, Netlify's version of Lambda Functions or serverless functions. This application helps a user save links while browsing the web. The most common use for this application is while browsing on the go. Using Siri Shortcuts, I was able to add a custom option on the share sheet so that I can save the webpage to my own MongoDB instance. Then, those links that are stored are displayed on a website to be referenced at a later time, There is an option to mark a link as "read" as well as deleting links. Any links that is marked as 'read' is moved to the bottom of the list.

Background

I've noticed a problem where I would visit a webpage, deem it helpful and would want to come back to it later. I would open a new tab to continue browsing so I can save that webpage on the previous tab. After a short while, I would have dozens of open tabs on my mobile browser. I decided to work on this issue and solved it with serverless functions. I chose Netlify as the hosting platform and MongoDB as the database provider. I also created a Siri Shortcut to enhance this application. Future development on a Google Extension will soon take place to provide additional functionality.

The repo for this project can be found here

Netlify Functions

Netlify offers their own flavor of serverless functions called Netlify Functions. These alow users to develop applications without needing to maintain a server. Applications are also inherently scalable and faster for the end user. Please read Netlify's documentation on Netlify Functions: Netlify Docs (Functions)

Netlify CLI

The easiest way to develop this application is to install the Netlify CLI. Follow their official documentation to get started: Netlify Docs (Getting Started)

Environment Variables

Netlify offers the use of environment variables for your applications. To add environment variables to your netlify project, navigate to the settings area for your application called Site settings.

Then you will need to click on Build & deploy on the menu on the left.

Scroll down until you reach the Environment section or you can Environment under Build & deploy on the same menu.

You should see this screen:

Click edit to add an environment variable

We are going to add our environment variable for the MongoDB connection string. If you cloned this project, I called the MongoDB connection MONGO_URI, however you can call it whatever suits your needs. After you filled in the Key and Value fields, click save.

Please set this up before development! When you run netlify dev as we talked about earlier, the dev server will grab the environment variable for your application.

For more information on Netlify Functions, please visit the official docs: Netlify Docs (Environment Variables)

Siri Shortcuts Setup (optional)

Building the Shortcut

Open the Shortcuts application, download it from the app store if you need to. Click on the "+" in the top right corner to create a new Shortcut

 
On the next screen, click on the circle with the three dots, this will open up the details page where we can edit some important settings. We need to change the name to something semantic, but what you call it is up to you. We also want to enable the "Show in Share Sheet" option as well. We can leave the "Share Sheet Types" option with the default value of "Anything".

We can also choose our own Color and Glyph for our shortcut. Choose a combo that works for you. Lots of options! Once you are done, close the details drawer by clicking "done".

 
We are ready to create the shortcut! slide up on the drawer an select the "Web" action category. Scroll down until you find the "URLs" section, within that section, select "URL".

 
We now need to add our application url into the "URL" action. Click on "apple.com" to edit the URL.

 
Add your application URL. For example https://super-cool-app-name.netlify.app/add?link= As you are editing, you will see the "variables" section above the keyboard, scroll until you find the "Shortcut Input" variable. Click on the "Shortcut Input" variable on the action to set the type of input. We need to select the "URL" input type.

 
We are now going to add an action to execute the URL action. Back to the "Web" action category, scroll down until you find the "Web Requests" method. Select the "Get Contents of URL" action. This should automatically fill the variable to be the "URL" action.

 
We are technically done with the shortcut, so these next steps are optional, but are handy to have. We are going to add the "Show Notification" action to our shortcut. To find the "Show Notification", click on the "Scripting" action category. Scroll down to the "Notification" section and click on "Show Notification".

 
We now need to edit the contents of our notification. Instead of "Hello World", we are going to add the return message from the API endpoint we hit, this will help us know if the server added the link, by returning back to us a message that says {"message":"Link Added :)"} or if we encountered an error.

To change the notification message, delete "Hello World" While you are deleting, you should see variables that can be inserted, select the "Contents of URL" variable. We then need to change the type of this variable. When the "Contents of URL" variable is selected, you should see a tray to change its type. Click on the blue "as File", brining up all the type options for this variable. scroll down until you find "URL" and select that type.

We are now done with this shortcut! Give it try once you have deployed your application to Netlify. Happy Saving, Happy Reading!

Google Chrome Extension (Future)