Learning Paths
Regardless of your current experience level, you will be able to build the skills you need to contribute successfully to this project. This page contains some helpful resources you can use to build your own learning path.
Note that it is not necessary to have a full grasp of all of these concepts to start developing. In fact, even the architect of this project (aka the person writing this, aka Joseph) is nowhere near an expert on any of this! It's more about building a product and learning as you go.
Learning Checklist
Check off these items as you complete them, or if you already have sufficient knowledge:
-
JavaScript Tutorial
TypeScript Introduction
TypeScript Handbook
Client-Server Architecture
Terminal
Express with Node.js
MongoDB
Mongoose
React: Tic-Tac-Toe
React: Full Introduction
Phaser Introduction
Learn Git Branching
More information about these resources is available below.
JavaScript & TypeScript
The most important building block for this entire project is JavaScript. The project is written in TypeScript, but most of it looks like JavaScript.
- Fill in any knowledge gaps with the
javascript.infoJavaScript Tutorial - Learn a bit about TypeScript with this quick guide
- Dig deeper into TypeScript with this handbook
If you are comfortable with JavaScript, you should be good to go. You can use TypeScript to your advantage, but it is not necessary for all development; simply writing JavaScript code in .ts files should almost always be fine.
Client-Server Architecture
It will be helpful to recognize the basic parts of a full-stack web application:
- backend: the server - what happens behind the scenes (Node.js for this project)
- frontend: the client - what the user sees (React for this project)
- database: the storage location for all information (MongoDB for this project)
- communication layer: how the client and server communicate (HTTP for this project)
Click here for the Wikipedia article that covers this topic.
Terminal / Command Line
Using the command line is a valuable skill for software development, and can greatly enhance the development process.
Click here to practice using the terminal by playing this text-based game.
Backend Server: Node.js and Express
If you've only used JavaScript to run code in a browser, it might be a little weird to see it run in a terminal. This MDN tutorial walks through the concepts behind the Express framework in great detail. Note that some prerequisite knowledge is required, linked here:
After ensuring you have the fundamental knowledge, you're ready to get into Express.
Backend Database: MongoDB and Mongoose
The most crucial feature of the application's backend server is its ability to connect to the database. Specifically, interfacing with the MongoDB database using Mongoose. Part of the Express tutorial covers this topic. Additionally, there are some good learning resources available from MongoDB:
Frontend Component Framework: React
React is an incredibly powerful component-based framework for the web. Here are some helpful ways to learn React, with varying commitment levels:
React Redux
The application also uses React Redux to store state. It can be helpful to learn a bit about this topic as well.
Frontend Game Development: Phaser
In addition to React, the frontend will use the Phaser game development framework. There is a complete compendium of learning resources available, which includes some particularly helpful links:
Version Control with Git
Though not directly related to coding, version control is a huge part of software development. Learn a bit about Git and GitHub before diving into using them. This project will use trunk-based development, which means team members will create small feature branches when they develop, and then merge them into the main branch as often as possible.