Project #2: Building Your First Full-stack Application

Overview

This second project is your first foray into building a full-stack application. You'll be building a Node app, which means you'll learn about what it takes to build a functional application from the ground up yourself.

This is exciting! We're not following a spec, you have no directions on the exact app you need to make. This is a chance to GET CREATIVE. Think about a product you think the world needs, an app that you think you would want to use, maybe something artistic you want to express (get it?).

You will be working individually for this project, and you'll be designing the app yourself. We hope you'll exercise creativity on this project! Sketch some wireframes before you start, and write user stories to define what your users will want to do with the app. Remember to keep things small and focus on mastering the fundamentals – scope creep/feature creep is one of the the biggest pitfalls for any project!

---

Requirements

Your project has 3 required parts: the app, a README markdown file, and a presentation

Your app must 💻:

• Have at least 2 models (more if they make sense) – And should have at least ONE relationship between tables.
• Use Express, PG-Promise, Body Parser and Mustache-Express,
• Have complete RESTful routes for at least one of your resources with GET, POST, PUT, and DELETE
• Your App must have MVC architecture
• Include wireframes that you designed during the planning process. wireframe.cc is a great place to make these. Photoshop and illustrator are good as well.
• Have clean HTML and CSS
• Be deployed online and accessible to the public
• Use at least one NPM package that we have not talked about in class

Reach goals 🎉:

• Include sign up/log in functionality, with encrypted passwords & authorization with bcrypt
• Add additional models, as is appropriate for your app.
• Utilize additional NPM packages, NPM has the largest collection of libraries ever made! Try to include something we haven't covered that will be useful for your app!

Your README.md file must include 📝:

• Explanations of the technologies used
• Wireframes
• User Stories
• The approach taken
• Installation instructions (if needed)
• Unsolved problems
• Shoutouts - show appreciation for those who helped you
• Resources - useful sources that you used during the creation of the app
• Any other useful information about your app

Your presentation will consist of 💬:

• 5 minutes: A well organized presentation:
  • Include wireframes that shows your app
  • Answer the following questions: - What is the your app about? - What features does it include? - What are you most proud of? - What was the hardest part? - Were there any constraints you had to work with? (e.g. technological, timing, content, etc.) - Is there any other information you think might help us (your stakeholders) understand what you've built?
• 2 minutes: A demo of your app
  • Show the functionality of your app!

---

Necessary Deliverables

For the App

• A working full-stack application, built by you, hosted on Heroku
• A git repository hosted on GitHub, with a link to your hosted project, and frequent commits dating back to the very beginning of the project. Commit early, commit often.

For the README:

• A readme.md file with explanations of the technologies used, the approach taken, installation instructions, unsolved problems, wireframes of your app, user stories, etc.

---

Timeline

Project Proposals: Due Tonight! 📆

• Spend the evening coming up with ideas and making plans for your app. By the end of the night, submit your project proposal!
• All proposals should be in the form of an issue attached to this repository.
• Your proposal should include:
  • Name of your app
  • What your app does
  • The models you need for your app and any relationships
  • Wireframes!
  • A timeline laying out what you're going to do each day. This should specify clear features to be implemented by the end of each day.
  • A link to the NPM package you intend to use.
  • Foreseen challenges or obstacles
  • Technology you intend to use
  • A link to your repo!

---

Suggested Ways to Get Started 🏁

• Break the project down into different components (data, presentation, views, style, DOM manipulation, server-side work, authentication) and brainstorm each component individually. Use whiteboards or sketch out ideas on paper!
• Write Your Pseudocode Start by stating the problems in plain text. This will help you guide your process and understand the problem better.
• Begin with the end in mind. Know where you want to go by planning with wireframes & user stories, so you don't waste time building things you don't need. State what your MVP looks like.
• Don’t hesitate to write throwaway code to solve short term problems
• Commit early, commit often. Don’t be afraid to break something because you can always go back in time to a previous version.
• User stories define what a specific type of user wants to accomplish with your application. It's tempting to just make them to-do lists for what needs to get done, but if you keep them small & focused on what a user cares about from their perspective, it'll help you know what to build

---

Project Submission 📬

Projects will be due Thursday 12/20. On Thursday we'll be doing presentations! To submit your project, create an issue on this repository including:

• A link to your project repo
• A link to your Heroku page

Set aside time to prepare for the presentation! Be prepared to talk about your project and remember to follow the rules in the requirements section!

---

Useful Resources 🔗

• Heroku (for hosting your app)
• Writing Good User Stories (for a few user story tips)
• Presenting Information Architecture (for more insight into wireframing)