Skip to content

Latest commit

 

History

History
108 lines (78 loc) · 7.15 KB

instructions.md

File metadata and controls

108 lines (78 loc) · 7.15 KB

Project One

DESCRIPTION

It's time to put everything that you've learned in the past month together! For your first project you will build a full stack web application using jQuery and AJAX, Express, Node.js, Mongoose, and MongoDB.

The objective of this project is to:

  • Apply the skills you've learned by building a full-stack web application from the ground up.
  • Demonstrate mastery of topics covered during this course so far.
  • Build a polished, published website you can share in your portfolio.

You will be working in groups for this first project. Show us what you've got!

CORE REQUIREMENTS

Make sure to do all of the following with your app.

  • Express API Build an Express Application that has JSON endpoints.
  • RESTful Routes Design your CRUD routes using the REST convention.
  • AJAX Leverage AJAX to fetch JSON data from the backend.
  • jQuery Use jQuery to add interactivity and render data on the client-side.
  • Templating Render the JSON data on the frontend using ES6 String literals or on the backend using EJS.
  • MongoDB Persist at least two models to a Mongo Database. Use at least one one-to-many or many-to-many relationship between models. You can choose to reference or embed your data.
  • Git 50+ commits. Commit early, commit often. Tell a story with your commits. Each message should give a clear idea what you changed. (And don't expose any secret keys/tokens on GitHub!)
  • Visual Design You must use semantically clean HTML and CSS. You can also use Bootstrap, Foundation, or another CSS framework to make your front-end snazzy. First impressions matter!
  • Heroku Deploy your app to Heroku.
  • Documentation Write a README.md that would make an employer excited to hire you. Screenshots are encouraged. See the example readme for a suggested structure.

PLANNING DELIVERABLES

See the planning deliverables document for more information on the planning steps you should take.

  • A clearly defined Minimum Viable Product (MVP) Scope. What can you reasonably accomplish in a week?
  • Wireframes for every page. These don't have to be pretty; just sketch what the page will include.
  • User Stories (divided into sprints) - we recommend Trello for project tracking.
  • Database Models and ERD Make plans for each resource. List the attributes you'll include in your schemas and what type of data each attribute will be. Draw an Entity Relationship Diagram to illustrate the relationship(s) between models, and note whether you plan to reference or embed related data.

Once your project has been approved, create a GitHub Repo for your project and add your teaching team as collaborators.

BONUS IDEAS

If you want to push yourself and learn something new, optionally consider doing some of the following with your app, but please talk to an instructor beforehand:

  • Front-End Data Validation Validate data on the front-end by handling incorrect form inputs during create/update. For example, when a form is submitted, check that a field has some text in it, or that its value is a number.
  • Back-End Data Validation Validate data on the back-end using mongoose's built-in validations, or make your own custom validation.
  • More Models or Relationships Add another model to your project or create a new relationship.
  • External API Use an external API to integrate rich data into your app.
  • Model Methods Level up your models by adding a method to one of your schemas. For example, a person schema with firstName and lastName can have a fullName method (see mongoose docs on instance methods and static methods).
  • Authentication Enable users to store account information and signup, login, and logout.
  • Sass Use a CSS pre-compiler to write more imperative CSS.
  • Whatever else inspires you!

TIMELINE

DO NOT START CODING UNTIL YOUR PROJECT IS APPROVED.

  • Friday, October 13th by 3:00pm - Present your app plan to your instructors. Before you begin work on your project, the planning deliverables must be checked off with an instructor!
  • Weekdays: October 16th - 20th - Class Standups @ 9:30am.
  • Thursday, October 19th 4:00pm - Feature Freeze! Deploy your code to Heroku, and start polishing existing features. Finalize your README.md and prepare for presentations.
  • Friday, October 20th @ 9:30am - Project due and presentations!

WHAT WE ARE LOOKING FOR

Code must be...

  • Clean
    • no unused or commented-out code
    • proper spacing and indentation
  • Modular and well organized
    • use the module pattern with module.exports
    • separate large tasks into shorter functions
  • Appropriately commented
    • use comments to plan, but remove the unnecessary comments for your professional portfolio
    • prefer a well-named variable or function to a comment

ACCESS TO INSTRUCTORS

We will be checking github for issues and hold 1:1s throughout the week. We will also do mini lessons on certain topics if we notice that several people are running into the same issues.

FINAL DELIVERABLES

  • Completion of the core requirements
  • A link to your website hosted on Heroku
  • A link to your source code on GitHub
  • A README.md file that serves as your project documentation (this is important!)
  • A brief presentation, in the company of friends, illustrating:
    • Triumphs
    • Challenges
    • Words of Wisdom
    • And 3 lines(!) of code you want to share with your classmates

PROJECT FEEDBACK + DELIVERABLES

  • Technical Requirements: Did you deliver a project that met all the technical requirements?

  • Project Workflow: Did you complete the user stories, wireframes, task tracking, and/or ERDs, as specified above? Did you use source control as expected for the phase of the program you’re in (detailed above)?

  • Creativity: Did you add a personal spin or creative element to your project? Did you deliver something of value to the end user?

  • Code Quality: Did you follow code style guidance and best practices covered in class, such as spacing, modularity, and semantic naming? Did you comment your code?

  • Problem Solving: Are you able to defend why you implemented your solution in a certain way? Can you demonstrate that you thought through alternative implementations?

  • Deployment and Functionality: Is your application deployed and functional at a public URL? Is your application free of errors and incomplete functionality?

Presentation Tips

  • Please zoom your browser window to 150%.
  • Please set your Atom font to at least 20.0 pixels.
  • And speak up!

HAPPY CODING :)