Full Stack Series

Tools of the Trade

This semester’s Oasis Series, Full Stack, is your gateway to the skills indispensable to creating powerful, interactive, web applications with your team. As one of the foremost media for developing applications today, web technologies allow you to easily make large-scale applications using popular languages.

Below we outline the course lineup for this semester. You are welcome to attend any or all that pique your interest.

The fall 2020 Oasis Full Stack Series has ended. Thank you all for participating!

Workshops

Workshop 1⁠ — Idea Generation
with
When:
September 19, 2020
Overview

This workshop is your opportunity to devise the project idea of your dreams! If you've been struggling to conceive of an idea, in the process of refining your latest opportunity, or just want to meet other like-minded individuals looking for inspiration for a great project, this is the workshop for you. We will be discussing brainstorming strategies and working together to pick out great ideas

Goals

• Leave with at least one idea you are excited about pursuing through Oasis

• Acquire the tools to more easily come up with new ideas in the future

• Begin creating connections among other participants, potentially even leading to a team formation

Recommended Preparation

None

We're collaborating with

Workshop 2 — Product Design and Mockups
with
Scout
When:
September 26, 2020
Overview

This workshop is your introduction to the world of design—what it is, why we do it, and how it's typically done. And then we'll go ahead and try it out! We will discuss what mockups are and the various levels of fidelity in which they can be made. We'll also discuss how and why to solicit your peers for design feedback and then dive right in to making our first website mockup using Figma, a free web-based design tool

Goals

• Understand why creating mockups are useful before writing any code

• Understand the difference between and uses for different levels of fidelity in mockups

• Learn strategies for soliciting user feedback for designs

• Create a first basic mockup using Figma

Recommended Preparation

Create a free Figma Account here

We're collaborating with

Scout

As part of Northeastern's entrepreneurial ecosystem, Scout's aim is to be the best place on campus for students to learn about design.

Workshop 3 — Introduction to the Web
with
When:
October 3, 2020
Overview

This workshop is intended to serve as your introduction to the workings of the web—how it functions behind-the-scenes, what the anatomy of a web page looks like and how to actually create one of your own. In the process, we will cover what takes place when you visit any website and how to write basic HTML, CSS, and JavaScript code

Goals
  • Understand what happens behind-the-scenes when you browse the web
  • Understand the languages that make up web pages
  • Learn the basics of HTML, CSS, and JavaScript
  • Create a basic web page using HTML, CSS, and JavaScript and view it in your browser

We're collaborating with

Workshop 4 — Intro Frontend Web Development
with
CoSMO
When:
October 10, 2020
Overview

This workshop serves as your first step into frontend development on the web—creating the interactive experiences that people use in their web browsers. We will learn about different ways to go about developing a frontend, why people may opt for using a framework or library such as React instead of pure HTML/JavaScript code, and then dive into creating our first frontend application using React

Goals
  • Understand how web applications work and why they are useful
  • Learn about various popular frontend frameworks and dive into a very popular one, React
  • Create your first basic web application using React
Recommended Preparation

We're collaborating with

CoSMO

Northeastern's Computer Science Mentoring Organization serves to better connect Northeastern students who are interested in computer science.

Workshop 5 — Backend Development
with
Generate
When:
October 17, 2020
Overview

An web application's backend is a separate application that runs on a server far away. Our frontend application communicates with it to handle important operations such as logging in users and storing application data. Without a backend, our application's capabilities are limited. In this workshop we will learn more about what backends are and how they are used, and then dive in to creating our own backend REST API using Node.js and Express.js

Goals
  • Create your first application backend using Node.js and communicate with it from a frontend
  • Understand what REST APIs are and how they are used
  • Learn about why backends are useful for our applications
  • Learn about various options available for creating backends
Recommended Preparation
  • Download Node.js for your system here
  • Download Postman for your system here

We're collaborating with

Generate

Generate is Northeastern’s only student-led product development studio for entrepreneurial engineering and is a program of the Sherman Center.

Workshop 6 — In-Depth Frontend Web Dev
with
When:
October 24, 2020
Overview

In this workshop we will dive back into frontend developing, covering important topics such as making and handling backend requests, lifecycle hooks, and other strategies to make our code more robust.

Goals
  • Understand how to make network requests to our backend
  • Learn about adding basic type checking to your React code
  • Revisit proper usage of state and lifecycle hooks
  • Further solidify newfound React skills
Recommended Preparation

None

We're collaborating with

Workshop 7 — Hooking up to a Database
with
DATA Club
When:
October 31, 2020
Overview

If an application stores data—user accounts, chat history, meme photos—it almost certainly uses a database to hold them. If we want to store persistent data in our applications, we will likely need to use one too. In this workshop, we will learn more about what databases are, what varieties they come in and where they physically exist, and then dive into setting up our own using MongoDB and storing some data in it

Goals
  • Understand what a database is and why we use it
  • Understand the difference between SQL and no-SQL databases
  • Set up and connect to our own MongoDB database

We're collaborating with

DATA Club

The DATA Club seeks to promote data literacy at Northeastern University.

Workshop 8 — Web Testing and Debugging
with
When:
November 7, 2020
Overview

One of the most important parts of writing software is making sure that it actually works; tests are our way to verify that. Testing, in the context of software development, is code we write to ensure that the code other code we write works as expected. In this workshop we will learn how to use a library called Jest to write tests for our web code, as well as other useful strategies for debugging

Goals
  • Understand why tests are useful when programming
  • Learn about various options for testing JavaScript code
  • Learn how to use Jest for testing JS code and integrate it into your project
  • Learn about what you can do with the web console
Recommended Preparation
  • None

We're collaborating with

Workshop 9 — Project Deployment
with
When:
November 14, 2020
Overview

While it is fun to test out our personal projects on our own computers, eventually we may want to reach a broader audience; to do so, we will need to deploy our project to the web. In this workshop, we will learn how to compile our React projects for production and how to host our frontends and backends on the web for others to access

Goals
  • Understand what project deployment is and how it differs from local testing
  • Learn how to acquire a domain and host our frontend at its address
  • Learn about options for hosting our backend and start setting it up
Recommended Preparation
  • None

We're collaborating with

Workshop 10 — Web Drawing and Games (Participants' Choice)
with
When:
November 21, 2020
Overview

The people have voted, and the results are in: the 10th Oasis workshop focuses on drawing and making basic games on the web! In this final session of the semester, we will briefly discuss the various options available for coding drawings in your browser (it's actually pretty easy!) and then dive into a popular and beginner-friendly library: p5.js. Based on Processing (which we'll explain in the workshop), p5.js let's us easily create interactive drawings and games. We'll be using it to create a fun game--see you there!

Goals
  • Understand how drawing works on the web
  • Learn what Processing is
  • Learn various options are available for drawing and making games
  • Learn how to use p5.js
  • Make a game with p5.js!
Recommended Preparation
  • None! But you can read over the p5.js docs ahead of time if you want: https://p5js.org/

We're collaborating with

Schedule

• The Full Stack Series will take place virtually this fall

• Each session will be interactive—you will be put into smaller breakout rooms midway through each session for hands-on examples that allow you to get individual help when you need it

• All workshops will be available online afterward for you to view

• Mentors will be available via Slack all week if you have any questions after the event

How should I prepare?

Each workshop has a small homework element (outlined above) to be completed beforehand, which will typically include brief readings and/or software to download. Don’t worry, you won’t be graded! But we do recommend you try your best to complete these to learn and understand as much as possible from each session

How do I Join?

Registration for the full-stack series is open on a rolling basis for Oasis participants and non-participants alike. The forms to pre-register for each session (so you can access the meeting link) can be found each heading or in our mailings sent throughout the semester

Ready to hop on board?

Subscribe to our mailing lists here to stay in the loop about upcoming events and important deadlines! Be sure to check all of the boxes that you are interested in hearing more about!

Fields marked with an asterisk (*) are required
What about Oasis are you interested in?
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.