Code Monkey home page Code Monkey logo

project-01's Introduction

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 individually 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 both HTML and 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 handlebars templates.
  • 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!)
  • Code Style Write professional-looking code. Follow the Airbnb Javascript Styleguide.
  • Visual Design Use Twitter Bootstrap, Foundation, Skeleton, 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.
  • A Feasibility Check for any bonus feature you'd like to complete.

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. CONFIRM THAT YOU ARE APPROVED ON THIS SPREADSHEET: PROJECT APPROVAL SPREADSHEET.

  • Wednesday, July 20th by 3:00pm - Present your app plan to your assigned instructor. Before you begin work on your project, the planning deliverables must be checked off with an instructor!
  • Weekdays, July 21st-25th - Standups @ 10:00am. Afternoon 1:1s with instructors.
  • Monday, July 25th - Feature Freeze! Deploy your code to Heroku, and start polishing existing features. Finalize your README.md and prepare for presentations.
  • Tuesday, July 26th @ 10am - 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

See the feedback document for the criteria on which your project will be evaluated.

ACCESS TO INSTRUCTORS

We will 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, copied into a seperate document.

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 :)

project-01's People

Contributors

justincastilla avatar melicarls avatar bgveenstra avatar willcauthen avatar

Watchers

James Cloos avatar Ben Manning avatar

Forkers

natapoli90

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.