PROJECT 3: FINAL PROJECT

For the final project, you'll be designing and building a web app of your choice.

Overview

This project will test your knowledge of JavaScript and ask you to apply everything you've learned in this course. The result will be a web app that you can add to your portfolio. You have a wide range of possibilities to choose from: a blog users can comment on; an app that allows users to search for social media posts; or even an application that logs users geolocations. Work with your instructor to create project goals that are realistic given the scope and timing of the class.

TECHNICAL REQUIREMENTS

  • Use JavaScript to correctly structure the code for a web application:
    • Structure your application to be a SPA (single page application)
    • Make HTTP requests to your own Firebase URL
    • Make at least one HTTP request to a third-party server
    • CRUD functionality should be present
    • Use either vanilla JS or jQuery to perform DOM manipulation
    • Listen for events and add interactivity based on user input
  • Hosting
    • App should be hosted on Firebase

BONUS / BEST PRACTICES

Your instructional team will provide feedback on how well you execute best practices. Even though it is not part of the requirements, you should keep these in mind:

  • Clean And Readable Code. The instructor should be able to read and follow your code easily. Maintain clean and readable code including: consistent indentation, code commenting and use of proper and consistent naming conventions.
  • Object Oriented and/or Functional. Implement function closures, keep code modular, maintain a separation of concerns, only put code on the global scope when absolutely necessary, use prototypal inheritance.

SPA Architecture

Single Page Applications (SPA) are all the rage today. The single page aspect of a SPA refers to a single page coming from the server, such as our index.html page. Once loaded, the SPA changes views by using client-side routing, which loads partial HTML snippets called templates. Think back to our Advanced APIs lesson where we showed specific views based off the login state of a user. The goal for you implementing a SPA is to not make users have to refresh the entire DOM every time they need a new piece of data to be represented in the UI.

spa-architecture

Necessary Deliverables

A production ready web application, SPA, hosted live on the web.

A new git repository hosted on Github where codebase is maintained.

A 5-10 minute presentation including 3 technical hurdles, 2 new things you learned, Q&A.

Getting Started

  • Think of a problem in the world, or even in your personal life, and apply what you've learned to build an application that can help solve the issue.
  • Research different social media APIs (i.e. twitter) and see what kind of information you can use from them.
  • Look at different online video games for inspiration.
  • Explore projects created by previous JSD students and Back End Web Development students

Timeline

DUE DATE MILESTONE
April 1 Project idea & list of possible APIs to use
April 8 Pseudocode of basic features & draft of HTML/CSS code
April 15 Final HTML/CSS code, draft of basic API functionality and DOM manipulation code
April 22 Completed project & presentation!