DEV Community: Cameron Thompson

Flight Fusion: An Airline Management API Game

Cameron Thompson — Mon, 07 Apr 2025 14:56:00 +0000

Introducing Flight Fusion: An Airline Management API Game – Join Our Early Testers Waitlist!

Welcome to the future of airline management! We’re thrilled to announce Flight Fusion, a groundbreaking simulation platform designed to empower aspiring airline tycoons, aviation enthusiasts, and strategic thinkers to build, manage, and grow their own virtual airline. Whether you’re dreaming of commanding a fleet of aircraft, optimizing flight routes, or maximizing profits in a dynamic, real-time environment, Flight Fusion offers an immersive experience that blends realism with engaging gameplay. Today, we’re inviting passionate early testers to join our waitlist and help shape the future of this exciting project!

What is Flight Fusion?

Flight Fusion is a simulation platform where you can step into the shoes of an airline CEO. Start with a budget of $10,000,000, purchase aircraft, schedule flights, and manage every aspect of your airline’s operations. Our goal is to create a realistic yet accessible experience that captures the complexities of running an airline while keeping it fun and engaging.

Being an API game, there is no provided UI to interact with (outside of the users dashboard). Meaning it is up to you to interact with the API in any way you choose! Create automations, your own UI, or whatever your mind can come up with!

You might be familiar with Space Traders, this is where I got the inspiration to create an API game, but with a theme that I am most passionate about: aviation!

Here’s a quick overview of what you can do with Flight Fusion:

Build Your Airline: Create your airline, choose a name, and start with a substantial budget to get your operations off the ground.
Purchase Aircraft: Browse a constantly updated list of aircraft and select the ones that fit your budget and strategy.
Schedule Flights: Plan routes between airports, set departure times, and manage your fleet to maximize efficiency and revenue.
Simulate Real-Time Operations: Experience a time-accelerated simulation where 1 real second equals 24 game seconds, allowing you to see your flights progress quickly.
Monitor and Grow: Check flight statuses to increase bookings, calculate revenue based on passengers, fares, and taxes, and reinvest profits to expand your airline.

Flight Fusion is more than just a game—it’s a sandbox for aviation lovers to experiment, strategize, and learn about the airline industry in a hands-on way. Our simulation engine handles everything from flight status transitions (Scheduled → Boarding → Departed → InFlight → Landed) to seat bookings and revenue calculations, giving you a realistic taste of airline management.

Why We’re Building Flight Fusion

The airline industry is fascinating but complex, with countless moving parts that need to work in harmony for success. From managing fuel costs to navigating passenger demand, real-world airline CEOs face immense challenges. We wanted to create a platform that lets anyone experience these challenges in a controlled, gamified environment. Flight Fusion aims to:

Educate: Teach players about the intricacies of airline operations, from route planning to revenue management.
Entertain: Provide a fun, engaging experience with real-time simulation and strategic decision-making.
Innovate: Use player feedback to evolve the platform, adding new features like custom flight processors, enhanced aircraft management, and more.

We’re passionate about aviation and technology, and we believe Flight Fusion can inspire the next generation of aviation professionals while offering a thrilling experience for gamers and enthusiasts alike.

We Need Early Testers—Will You Join Us?

Flight Fusion is still in its early stages, and we’re looking for enthusiastic testers to help us refine and improve the platform. As an early tester, you’ll get exclusive access to pre-release versions of Flight Fusion, allowing you to:

Experience the Platform First: Be among the first to build and manage your virtual airline.
Shape the Future: Provide feedback that directly influences new features, improvements, and updates.
Join a Community: Connect with other aviation enthusiasts and share strategies, tips, and ideas.

We’re limiting this early testing phase to a select group of testers, so don’t wait—this is your chance to be part of something truly innovative!

What to Expect as an Early Tester

As an early tester, you’ll start by following the steps outlined in our Quick Start Guide. Here’s a sneak peek at what you’ll be doing:

Sign Up and Create Your Airline: Register for an account, name your airline, and receive your starting budget and API token.
Purchase Aircraft: Use the API to browse and buy aircraft that fit your strategy.
Schedule Flights: Plan your first flight route, set fares, and watch the simulation engine bring your airline to life.
Monitor and Optimize: Check flight statuses to increase bookings and revenue, and iterate on your strategy to grow your airline.

We’ll be rolling out a custom flight processor soon, which will automate more aspects of the simulation and make the experience even smoother. As a tester, you’ll get to try this feature before anyone else!

What We’re Looking For in Testers

We’re seeking testers who are:

Passionate about aviation, gaming, or simulation platforms.
Comfortable using APIs (don’t worry, our Quick Start Guide makes it easy!).
Willing to provide constructive feedback to help us improve.
Excited to experiment with strategies and share their experiences.

No prior experience with airline management is required—just a curiosity to learn and a desire to help us build something amazing.

How to Join the Waitlist

Ready to take flight with us? Joining the waitlist is simple:

Visit Our Waitlist Page: Head over to our Flight Fusion Waitlist.
Sign Up: Enter your email address to join the waitlist.
Wait for Your Invite: We’ll notify you when we’re ready to onboard testers, and you’ll receive instructions on how to get started.

Note: I have noticed Gmail users will see waitlist confirmation email in their primary folder, and the invite email in their promotions folder. Please check both regularly for your invite!

By joining the waitlist, you’ll secure your spot as an early tester and be among the first to experience Flight Fusion. We’re aiming to onboard testers in the coming weeks, so sign up now to ensure you don’t miss out!

What’s Next for Flight Fusion?

We have big plans for Flight Fusion, and early testers will play a crucial role in shaping its future. Some upcoming features we’re working on include:

Custom Flight Processor: Automate more aspects of flight management for a seamless experience.
Aircraft Maintenance: Add a layer of realism by managing aircraft maintenance and downtime.
Expanded Airport and Aircraft Lists: Continuously update our database with new airports and aircraft to keep the simulation fresh.
Community Features: Build a community where players can share strategies, compete, and collaborate.

We’re also exploring integrations with real-world aviation data to enhance the realism of the simulation, such as weather impacts or fuel price fluctuations. Your feedback as an early tester will help us prioritize and refine these features.

Let’s Build the Future of Airline Simulation Together

Flight Fusion is more than a project—it’s a passion. We’re excited to bring this vision to life, and we can’t do it without the support of early testers like you. By joining our waitlist, you’ll be part of a community that’s helping to redefine what airline simulation can be.

So, what are you waiting for? Sign up for the waitlist today and get ready to take control of your virtual airline. We can’t wait to see the empires you’ll build with Flight Fusion!

Have questions or want to get in touch? Reach out via our Contact/Feedback Form. We’d love to hear from you!

Linux For Development?

Cameron Thompson — Fri, 19 Nov 2021 17:41:48 +0000

I've have been seeing more and more about Linux in my article feeds with topics like "Linux for the every day user", and "Linux! Can you game on it?" and in my YouTube feed there are videos about different distros and what to do on Linux.

This got me thinking... is Linux better for development?

Do you use Linux for development? What do you develop? How has the experience been for you? What is your best advice for someone to get into developing in Linux? Are there distros to try out? Are there distros to avoid? Why did you move to Linux from MacOS or Windows?

I welcome all comments, questions, and suggestions! I may even turn this into a series where I try out Linux and report my findings.

Filament Hero : Update!

Cameron Thompson — Thu, 28 Oct 2021 17:12:47 +0000

Hello everyone! 👋🏻

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!

What is your favorite database?

Cameron Thompson — Wed, 13 Oct 2021 22:44:13 +0000

I am looking for a database for a new project that I am working on. I usually use MongoDB since I can get it working quickly, but I am intrigued with the new providers I am seeing such as Faunadb or Supabase.

I am curious what your favorite database to work with is? What are the pros and cons? What makes you stick with that database instead of going to another one? How easy is it to update models or schemas as project requirements change?

I look forward to your comments!

My Hacktoberfest Repos

Cameron Thompson — Fri, 01 Oct 2021 04:10:09 +0000

Hello everyone! 👋🏻

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! 💻

Making a Mini Wiki with the SpaceX Api and Next.js

Cameron Thompson — Tue, 10 Aug 2021 06:25:15 +0000

Tl;Dr;
I made a Mini Wiki using the SpaceX Api and I learned a lot! I used Next.js and Tailwind CSS to build the application that can be viewed here. The repo for this project can be found here

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 WikiTl;Dr;
I made a Mini Wiki using the SpaceX Api and I learned a lot! I used Next.js and Tailwind CSS to build the application that can be viewed here. The repo for this project can be found here

Live Site

Repo

The SpaceX Api

Getting Started

The Boiler Plate

Creating the pages

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.

Getting 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;
}

Styling

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

Arduino Zoom Box

Cameron Thompson — Sat, 31 Jul 2021 05:26:41 +0000

In January of this year (2021) I had been working remotely for about 9 months, with hundreds of Zoom meetings. Zoom is powerful, with the ability to have global shortcuts to mute/un-mute and to turn your camera on and off. But I am lazy, and pressing the keyboard shortcut to do these actions was too much 😅 The Arduino Zoom Box was born.

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.

Day 2/100

Cameron Thompson — Sun, 20 Jun 2021 04:53:14 +0000

Start Time: 4:30pm

Decided to change pace and work on something new, the HTML Canvas. While coding for day 2, I decided to change it up and play with html canvas and javascript to see what I can do. I am trying to make a rocket "fly" when the mouse is over the canvas. I used classes in Javascript instead of objects (I really wanted to stretch myself). I also got the code to listen for key presses so I could control the rocket across the screen. I found an example here about getting an object to move within the canvas. This example uses the mouseover and mouseout events to perform the animation, but when the mouse is over the canvas the rocket disappears. It isn't until the mouseout event happens that the rocket comes back into view (in a different spot). What could be the cause of this? Where are my shortcomings? Here is the repo with the code:

Repo: https://github.com/cdthomp1/javascript-sandbox

Live Site: https://cdthomp1.github.io/javascript-sandbox/

End Time: 6:10 pm

Day 1/100

Cameron Thompson — Fri, 18 Jun 2021 16:35:43 +0000

The main goal of the day was to go through the template for a Sanity blog built with Next.js.

Create Next.js Blog with Comments | Sanity.io

Time Start: 10:12pm

I started out by going through the instructions to get the template set up, was pretty easy and all I really needed to do was provide a project name and check the name of the repo for me. Super easy.

Here is the link to the Repo: https://github.com/cdthomp1/nextjs-blog

Now to clone the repo and learn how it works!

After cloning down the repo, I spent some time going through the folders and files, conecting the dots with where I think things should be to where they actually were. After going some tutoruals I am basically checking for consistancy when it comes to folder structure. After doing so, I wanted to get the local version going. I did some silly mistakes like forgetting to instal my modules and setting my api token for sanity, but after that I was up and running.

Playing around in the studo, doesn't seem to support markdown from this template. I will need ot explore this later. If I can get that to work, then I can simply add my markdown articles right into sanity with little effort.

Messing around with the comment feature, didn't know I needed to approve them to see them on the front end. A handy security feature that wasn't mentioned in the docs.

Found a tutorual for the template I used (if you were to do it by hand) will need to look at this later: https://www.sanity.io/blog/build-your-own-blog-with-sanity-and-next-js

The studio (at the moment) allows you to set the date of the post to a time in the future, it does not schedule posts for you (which would be cool)

Got sanity to atleast show some sort of code snipets, would like to use prismjs for highlighting, but that might take some more configuirng.

Time end 11:15pm

100 Days of Code (Next.js)

Cameron Thompson — Thu, 17 Jun 2021 16:06:18 +0000

My Commitment

I commit to following the rules of 100 Days of Code to the best of my abilities. I will code for a minimum of ah hour for every day for the next 100 days.

What I am Doing

I am using these next 100 days to learn, explore, and build with Next.js! I have been using React.js for a while now, and I am excited to explore what Next.js has to offer.

I have a couple of projects in mind that I want to develop in Next.js to help me learn.

My portfolio site, cameronthompson.io
Link Saver, Repo
Recipe App, Repo
A Secret Project 🤫

I have made a project board in Notion.so to track my progress. You can see it here: My Board!
Hopefully when you check it out, you can see my active progress! There is a card labeled Sign in Sheet, go ahead and drop a comment and say hello and connect with others! (please be respectful 🙂)

My Hopes

My hope while I am working on this challenge, is to become a better developer in a few ways, planning, documenting, and learning from others.

Planning

On my board you will see that I have a some plans to make further plans on the projects that I will be working on. In the past, I generally just jump into a project with very little of a plan, this leads to scope creep that derails me often. I hope that I can plan better and stick to it so I can finish my projects!

Documenting

I hardly add comments in my code, and my commit messages are neglected as well. During these next 100 days I hope to write good code comments and commit messages. In addition to those, I will also write a small summary of what I have done for the day, which can be found here on my site! I will also tweet a very short tl;dr on twitter with a link to the full article.

Learning from Others

I get stuck. A lot. Often times out of arrogance when it comes to reading documentation, a little bit of ignorance sprinkled in there. I am apart of the Learn Build Teach discord chanel, which is an awesome community to get help for all things web dev related! I will be able to ask questions there as well as other outlets like twitter or dev.to

Final Thoughts

I know this journey will not be easy, I know there will be some blockers that get in my way. I need your help to keep me accountable to this challenge. I genuinely do! I appreciate it! Happy Coding!

Todoist + Canvas = Awesomeness

Cameron Thompson — Sat, 27 Feb 2021 07:23:26 +0000

Canvas Todoist Integration Part 1

Overview
Project Requirements
Evaluating Objects
Putting it all together
Function Definitions
Helper Function Definitions
Conclusion

Overview

I've always like being organized, but that gets tricky when school, work, and personal projects use a different system to organize tasks. I started using Todoist as a one stop place to organize tasks. Having to input tasks that I have by hand started to take its toll, especially when class's have dozens of assignments each. I did a little bit of digging and found that Todoist has a relatively easy to use REST API, which sparked the idea of making an API call to my schools LMS, Canvas, to get my class assignments and make another API call to Todoist to create the tasks for me.

Repo

Todoist API Docs

Canvas API Docs

Project Requirements

Base Requirements

⬜️ Login to Canvas Student Account
⬜️ Get Student Courses and create Todoist Project for each course
⬜️ Add all calendar items from each course to their respective Todoist Project as tasks (Incorporate the due date and time)

Future Features

Custom Project Names

Ask the user if they want one of the following for a project name:

⬜️ Course Code
⬜️ Short Name
⬜️ Long Name

Evaluating Objects

I need to get access to my current courses, since my institution keeps all my past courses that would be returned from the /api/v1/courses endpoint, I would need to filter to get the courses for the current term. However, I found an endpoint that will get the favorited courses that are on the dashboard. Notice in the object below that the isFavorited property is set to true.

Example get all current courses From the Dashboard endpoint

{
    longName: 'Course Long Name',
    shortName: 'Course Short Name',
    originalName: 'Course Original Name',
    courseCode: 'COURSE 123',
    assetString: 'course_1234567',
    href: '/courses/1234567',
    term: 'Course Term',
    subtitle: 'enrolled as: Student',
    enrollmentType: 'StudentEnrollment',
    observee: null,
    id: 1234567,
    isFavorited: true,
    image: 'some/course/url',
    position: null,
    links: [ [Object] ],
    published: true,
    canChangeCourseState: false,
    defaultView: 'wiki',
    pagesUrl: 'some/course/url',
    frontPageTitle: 'Course Homepage'
  }

What we need to create a project

{
   name: 'PROJECT NAME';
}

A color would be nice to add here, but I can add it later. To create a project is super easy, so I will only need to pull the title of the Course Object.

I then need to get all of the assignments for a course. This is a bigger call as courses can have dozens of assignments.

Example Canvas Assignment Object

{
   id: 1234567,
   description: '<p>Some HTML string</p>',
   due_at: '2021-03-07T06:59:59Z',
   unlock_at: null,
   lock_at: null,
   points_possible: 0,
   grading_type: 'pass_fail',
   assignment_group_id: 722751,
   grading_standard_id: null,
   created_at: '2020-12-16T03:38:31Z',
   updated_at: '2020-12-28T20:04:35Z',
   peer_reviews: false,
   automatic_peer_reviews: false,
   position: 7,
   grade_group_students_individually: false,
   anonymous_peer_reviews: false,
   group_category_id: null,
   post_to_sis: false,
   moderated_grading: false,
   omit_from_final_grade: true,
   intra_group_peer_reviews: false,
   anonymous_instructor_annotations: false,
   anonymous_grading: false,
   graders_anonymous_to_graders: false,
   grader_count: 0,
   grader_comments_visible_to_graders: true,
   final_grader_id: null,
   grader_names_visible_to_final_grader: true,
   allowed_attempts: -1,
   secure_params: 'string',
   course_id: 1234567,
   name: 'NAME OF ASSIGNMENT',
   submission_types: [ 'online_text_entry', 'online_url', 'online_upload' ],
   has_submitted_submissions: false,
   due_date_required: false,
   max_name_length: 255,
   in_closed_grading_period: false,
   is_quiz_assignment: false,
   can_duplicate: true,
   original_course_id: null,
   original_assignment_id: null,
   original_assignment_name: null,
   original_quiz_id: null,
   workflow_state: 'published',
   muted: true,
   html_url: 'some/course/url',
   published: true,
   only_visible_to_overrides: false,
   locked_for_user: false,
   submissions_download_url: 'some/course/url',
   post_manually: false,
   anonymize_students: false,
   require_lockdown_browser: false
 }

What we need for a task object

{
   content: 'TASK NAME',
   due_datetime: '2021-03-07T06:59:59Z'
}

The Canvas Assignment object is large, but we only need a few property values to create a Task. The name of the assignment and the due date is all we currently need to create the task.

Putting it all together

I need a handful of functions to help make this a little bit more organized.

Here are the functions I came up with:

getCurrentCourses()
createProject(course)
courseToProject(course)
courseAssignments(course)
createProjectTask(projectId, task)
assignmentToTask(assignment)
orchestrator()

This program was initially designed as a procedural program, as the orchestrator function calls other functions in a specific order. I also needed a few helper functions, to work through pagination for the Canvas API calls and to help slow the API calls that are made to Todoist as there is a 50 calls per minute limit for the REST API.

Helper functions:

fetchRequest(url) Helps check for any Canvas API calls that have pagination
sleep(milliseconds)

Function Definitions

`getCurrentCourses()`

var headers = {
   Authorization: 'Bearer ' + process.env.CANVAS_API_TOKEN,
};

async function getCurrentCourses() {
   var courses = await fetch(
      '{CANVAS INSTANCE DOMAIN}/api/v1/dashboard/dashboard_cards',
      { headers }
   ).then((res) => {
      return res.json();
   });
   return courses;
}

`createProject(course)`

async function createProject(course) {
   var headers = {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${process.env.TODOIST_API_TOKEN}`,
   };

   var project = await fetch('https://api.todoist.com/rest/v1/projects', {
      method: 'post',
      body: JSON.stringify(course),
      headers: { headers },
   }).then((res) => {
      return res.json();
   });

   return project;
}

`courseToProject(course)`

function courseToProject(course) {
   return { name: course.courseCode };
}

`courseAssignments(course)`

async function courseAssignments(course) {
   var headers = {
      Authorization: 'Bearer ' + process.env.CANVAS_API_TOKEN,
   };
   var assignments = await fetchRequest(
      `{CANVAS INSTANCE DOMAIN}/api/v1/courses/${course.id}/assignments`,
      { headers }
   );
   return assignments;
}

`createProjectTask(projectId, task)`

async function createProjectTask(projectId, task) {
   var refinedTask = {
      project_id: projectId.id,
      content: task.content,
      due_datetime: task.due_datetime,
   };
   sleep(4000);
   await fetch('https://api.todoist.com/rest/v1/tasks', {
      method: 'post',
      body: JSON.stringify(refinedTask),
      headers: {
         'Content-Type': 'application/json',
         Authorization: `Bearer ${process.env.TODOIST_API_TOKEN}`,
      },
   })
      .then((res) => res.json())
      .catch((error) => {
         console.error(error);
      });
}

`assignmentToTask(assignment)`

function assignmentToTask(assignment) {
   return {
      content: assignment.name,
      due_datetime: assignment.due_at,
   };
}

`orchestrator()`

async function orchestrator() {
   var courses = await getCurrentCourses();
   var courseProjects = courses.map(courseToProject);

   var promiseProjects = await courseProjects.map(createProject);
   var projects = await Promise.all(promiseProjects).then((projects) => {
      return projects;
   });

   courses.forEach(async (course) => {
      var assignments = await courseAssignments(course);
      var project = projects.filter(
         (project) => project.name === course.courseCode
      );
      var assignmentTasks = assignments
         // Some assignments don't have due dates
         .filter((assignment) => assignment.due_at !== null)
         // If I run this during the semester, I don't need tasks that already past
         .filter((assignment) => {
            let today = new Date();
            var assignmentDueDate = new Date(assignment.due_at);
            return assignmentDueDate > today;
         })
         .map(assignmentToTask);

      assignmentTasks.map((task) => createProjectTask(project[0], task));
   });
}

Helper Function Definitions

`fetchRequest(url)`

async function fetchRequest(url) {
   try {
      // Fetch request and parse as JSON
      const response = await await fetch(url, { headers });
      let assignments = await response.json();

      // Extract the url of the response's "next" relational Link header
      let next_page;
      if (/<([^>]+)>; rel="next"/g.exec(response.headers.get('link')))
         next_page = /<([^>]+)>; rel="next"/g.exec(
            response.headers.get('link')
         )[1];

      // If another page exists, merge it into the array
      // Else return the complete array of paginated output
      if (next_page) {
         let temp_assignments = await fetchRequest(next_page);
         assignments = assignments.concat(temp_assignments);
      }

      return assignments;
   } catch (err) {
      return console.error(err);
   }
}

Function Source

`sleep(milliseconds)`

function sleep(milliseconds) {
   const date = Date.now();
   let currentDate = null;
   do {
      currentDate = Date.now();
   } while (currentDate - date < milliseconds);
}

Conclusion

This has some potential to be a nice tool to help Canvas users get their tasks organized. For example, making a nice website where a user can provide the needed credentials for their Canvas and Todoist instance will allow this tool to reach more users than those that are familiar with programing. There is still some work to be done to help make this tool function smoothly, even though I have a sleep function, there are calls that happen too fast and the program will exceed the 50 request per minute limit. Using Todoist's sync API has the potential to solve that.

Help With Mongoose

Cameron Thompson — Tue, 29 Dec 2020 22:30:28 +0000

Hello All,

I am running into this warning that is driving me crazy.
Here is the warning:

(node:38419) DeprecationWarning: current Server Discovery and Monitoring engine is deprecated, and will be removed in a future version. To use the new Server Discover and Monitoring engine, pass option { useUnifiedTopology: true } to the MongoClient constructor.
(Use `node --trace-deprecation ...` to show where the warning was created)
MongoDB Connect: *************.zzkco.mongodb.net

and here is my code:

const mongoose = require('mongoose');

const connectDB = async () => {
    try {
        mongoose.set('useUnifiedTopology', true);
        mongoose.set('useNewUrlParser', true);
        const conn = await mongoose.connect(process.env.MONGO_URI)
        console.log(`MongoDB Connect: ${conn.connection.host}`)

    } catch (err) {
        console.error(`Error: ${err.message}`);
        process.exit(1);
    }
}

module.exports = connectDB

Any help that you can offer is appreciated!

DEV Community: Cameron Thompson

Flight Fusion: An Airline Management API Game

Introducing Flight Fusion: An Airline Management API Game – Join Our Early Testers Waitlist!

What is Flight Fusion?

Why We’re Building Flight Fusion

We Need Early Testers—Will You Join Us?

What to Expect as an Early Tester

What We’re Looking For in Testers

How to Join the Waitlist

What’s Next for Flight Fusion?

Let’s Build the Future of Airline Simulation Together

Linux For Development?

Filament Hero : Update!

What Progressed?

New Design 📐

New Models 📝

New CRUD Methods 🚀

Newer Look 🔥

What is your favorite database?

My Hacktoberfest Repos

Hello everyone! 👋🏻

MongoDb, Express, Node.js Template

My Goals

Filament Hero

My Goals

Making a Mini Wiki with the SpaceX Api and Next.js

The SpaceX Api

Getting Started

The Boiler Plate

Creating the pages

Getting Data

Styling

Lessons Learned

Future Enhancements

The SpaceX Api

Getting Started

The Boiler Plate

Creating the pages

Getting Data

Styling

Lessons Learned

Future Enhancements

Arduino Zoom Box

Components

Design

The Code

Future Plans

Day 2/100

Day 1/100

100 Days of Code (Next.js)

My Commitment

What I am Doing

My Hopes

Planning

Documenting

Learning from Others

Final Thoughts

Todoist + Canvas = Awesomeness

Canvas Todoist Integration Part 1

Contents

Overview

Project Requirements

Base Requirements

Future Features

Custom Project Names

Evaluating Objects

Putting it all together

Function Definitions

getCurrentCourses()

createProject(course)

courseToProject(course)

courseAssignments(course)

createProjectTask(projectId, task)

assignmentToTask(assignment)

orchestrator()

Helper Function Definitions

fetchRequest(url)

sleep(milliseconds)

Conclusion

Help With Mongoose

`getCurrentCourses()`

`createProject(course)`

`courseToProject(course)`

`courseAssignments(course)`

`createProjectTask(projectId, task)`

`assignmentToTask(assignment)`

`orchestrator()`

`fetchRequest(url)`

`sleep(milliseconds)`