We're going to be learning about full stack web development.
First, we're going to learn about servers and how to send:
- Simple strings
- Very short bits of HTML
- JSON
We won't be using a database yet. We're going to mock it by just using arrays of objects to represent the way the database would send and receive data. This will allow us to focus on the concepts and code of servers.
Then, we'll to create a more robust view of our data (connect to React app)
Next, we'll learn about databases and learn basic SQL.
Finally, we'll connect our server to our database so that we can create full stack web applications.
- Explain what is the internet
- Explain the request/response cycle
- Describe what a server does
- Use Express to build a server
- Use Express to build a RESTful API that has full CRUD functionality for one model
- Create views for the express API using React
- Explain what is a database
- Use Postgres to build a database and interact with it through its CLI
- Use SQL to run CRUD operations and JOINs
- Use pg-promise npm package to build a web application backed by SQL
- Build a backend with multiple models that have at least one relationship (one to many)
| lesson | lab |
|---|---|
| Introduction to the Internet & Servers | Canvas written assignment |
| Express Response | lab-intro-to-express-response |
| Express Request | lab-intro-to-express-request |
| Express CRUD & MVC | lab-express-rest-crud-mvc-index |
| Express Middleware & RESTful Routes: Show and Create | lab-express-rest-show-create |
| Express RESTful Routes: Update and Delete | lab-express-rest-delete-update |
| Connect Express and React | lab-express-connect-react |
| Budgeting App | none |
| Intro to Databases: SQL | lab-intro-to-sql |
| App Planning: ERDs | lab-app-planning-erds |
| Intro to Databases: SQL Joins | lab-intro-to-sql-joins |
| Express & SQL: Seed & Read | lab-express-sql-seed-read |
| Express & SQL: Show & Create | lab-express-sql-create-show |
| Express & SQL: Update & Delete | lab-express-sql-delete-update |
| PERN Stack: CRUD | lab-pern-crud |
| Single Resource Project | none |
| PERN STack One-to-Many Back-end | lab-pern-crud-one-to-many-back-end |
| Pern Stack One-to-Many Front-end | lab-pern-one-to-many-front-end |
| Bonus: Express many-to-many | none |
| Full-Stack Portfolio Project |