Marcy Lab School Docs
  • Welcome
  • Student Guidelines & Policies
    • Student Handbook
    • AI Policy
    • Academic Calendar
  • Environment Setup
    • Local Environment Setup - Mac
    • Local Environment Setup - Windows
    • GitHub Setup
    • Postgres Setup
  • How-Tos
    • How To Code at Marcy: Code Style Guide
    • How to Do Short Response and Coding Assignments
    • How to Debug
    • How to PEDAC
    • How to Create A GitHub Organization and Scrumboard
    • How to Create Projects with Vite
    • How to Deploy on GitHub Pages
    • How to Deploy on Render
    • How to Test your API with Postman
  • Mod 0 - Command Line Interfaces, Git, and GitHub
    • Overview
    • 1. Command Line Interfaces
    • 2. Git & GitHub
    • 3. Git Pulling & Merging
    • 4. Git Branching & PRs
  • Mod 1 - JavaScript Fundamentals
    • Overview
    • 1. Intro to Programming
    • 2. Errors
    • 3. Node & Node Modules
    • 4. Variables, Functions & String Methods
    • 5. Control Flow, typeof, and Math
    • 6. Loops
    • 7. Arrays
    • 8. Objects
    • 9. Higher Order Functions: Callbacks
    • 10. Higher Order Functions: Array Methods
    • 11. Regex
  • Mod 2 - HTML, CSS & the DOM
    • Overview
    • 1. HTML
    • 2. CSS
    • 3. Accessibility (a11y)
    • 4. The Document Object Model (DOM) API
    • 5. Events
    • 6. Forms
    • 7. The Box Model and Positioning
    • 8. Flexbox
    • 9. Grid & Media Queries
    • 10. ESModules
    • 11. Vite
    • 12. LocalStorage
  • Mod 3 - Async & APIs
    • Overview
    • 1. Promises
    • 2. Fetch
    • 3. Building a Fetching App
    • 4. Async & Await
    • 5. A Generic Fetch Handler
  • Mod 4 - Project Week!
    • Important How Tos and Guides
      • How to Create a GitHub Organization and Scrum Board
      • How To Start a Project with Vite
      • How To Deploy a Project with GitHub Pages
    • Project Week Overview
    • Agile Methodologies
    • Deliverables & Milestones
    • Technical Requirements Checklist
    • Free API List
    • Collaborative GitHub
  • Mod 5 - Object-Oriented Programming
    • Overview
    • 1. Intro to OOP, Encapsulation, Factory Functions, and Closure
    • 2. Classes
    • 3. Private & Static
    • 4. UML Diagrams & Has Many/Belongs To Relationships
    • 5. Challenge: Implementing Has Many/Belongs To
    • 6. Inheritance
    • 7. Polymorphism
    • 8. Review and Practice
    • MDN: Object Prototypes
  • Mod 6 - Data Structures & Algorithms
    • Overview
    • Important How Tos and Guides
      • How to Debug
      • How to PEDAC
    • 1. Nodes & Linked Lists
    • 2. Singly & Doubly Linked Lists
    • 3. Stacks & Queues
    • 4. Recursion
    • 5. Trees
  • Mod 7 - React
    • Overview
    • Important How Tos and Guides
      • How to Create Projects with Vite
      • How to Deploy on GitHub Pages
    • 1. Intro to React
    • 2. Events, State, and Forms
    • 3. Fetching with useEffect
    • 4. React Router
    • 5. Building a Flashcards App
    • 6. React Context
    • 7. Global Context Pattern
  • Mod 8 - Backend
    • Overview
    • Important How Tos and Guides
      • How to Deploy on Render
      • How to Test your API with Postman
      • Postgres Setup
    • 1. Intro to Express
    • 2. Building a Static Web Server with Middleware
    • 3. Securing API Keys and Environment Variables
    • 4. RESTful CRUD API
    • 5. Model-View-Controller Architecture
    • 6. SQL and Databases
    • 7. JOIN (Association) SQL Queries
    • 8. Knex
    • 9. Your First Fullstack App!
    • 10. Migrations & Seeds
    • 11. Schema Design & Normalization
    • 12. Hashing Passwords with Bcrypt
    • 13. React Express Auth Template Overview
  • Mod 9 - Civic Tech Hackathon
    • Overview
    • Rubric
  • Mod 10 - Capstone
    • Overview
Powered by GitBook
On this page
  • Overview
  • Learning Objectives
  • Tips for Success
  • Focus on demonstrating your learning, not building something unique.
  • Make Decisions Quickly
  • Plan and Delegate!!
  • Meet on your own time
  • Test your API!
  1. Mod 4 - Project Week!

Project Week Overview

PreviousImportant How Tos and GuidesNextAgile Methodologies

Last updated 3 months ago

Overview

It's time for your first paired project week! For this project, you and a partner will build an application that interacts with a third-party API. You will fetch data, render the fetched data to the DOM, and then fetch some more data! In the end, you will have a deployed interactive application that connects with a web API.

The main technical goal of your app is to send two fetches and render the fetched data:

  1. First, fetch a collection of resources (GET a set of users, a set of pictures, a set of authors) and render all of those resources

  2. Fetch more details about a single one of those resources (GET details about a single user, a single picture, a single author, etc…) and then render those details

Check out called "Art Viewer". Notice that the application fetches a bunch of pieces of art but you can also click on a single piece of art to see more details. The search feature and the ability to choose how many pieces are shown per page are bonuses. Of course, you can do more than this, but this is the minimum idea!

A Note on APIs:

You are strongly encouraged to choose an API from this as they are all free and, importantly, do not require an API key.

If you are able to find another API that is free and does not require an API key, you are free to use it, but do not waste time on this search.The purpose of this project is to demonstrate your ability to perform fetches and render the returned data on the screen. The subject matter itself is not important and you do not need to create a unique project.

Learning Objectives

While building your first portfolio-level project is certainly the main focus, there are a few other key learning objectives!

  • Demonstrate your skills learned from Mods 1-3: Core JavaScript, HTML & CSS, DOM Manipulation, and Asynchronous JavaScript

  • Develop teamwork skills including communication, problem-solving, compromise, and task management

  • Strengthen your Git workflow fundamentals, managing branches, navigating merge conflicts, and maintaining a repository

  • Practice Agile methodologies by managing a scrum board and by performing daily stand-up and stand-down.

  • Deploy a project!

  • Practice your technical communication through a presentation.

Tips for Success

Focus on demonstrating your learning, not building something unique.

One of the easiest ways to get off track is by worrying about creating a unique project:

  • Student projects are not meant to be unique.

  • You're not creating a new app that addresses a gap in the market.

  • You aren't deploying this app for the purpose of having real users.

  • Student projects are meant for learning and demonstrating your learning

Make Decisions Quickly

You may have a great idea that you really want to implement, but remember, you are working as a team and you only have a week. Time is not on your side and the more time you waste disagreeing with your partner about what features to implement or what API to use, the less time you'll have to actually build the thing.

Plan and Delegate!!

  • Use branches and make PRs

  • Use your scrum board

  • Assign tasks

  • Don't do duplicate work

Meet on your own time

Be in alignment with your teammate outside of the scheduled meetings with your engineering manager

Test your API!

Actually write a fetch to make sure that the API works before choosing it for your proposal

this deployed example
list of free APIs
Overview
Learning Objectives
Tips for Success
Focus on demonstrating your learning, not building something unique.
Make Decisions Quickly
Plan and Delegate!!
Meet on your own time
Test your API!