Project #3: MEAN Web Application

We're almost at the end of the journey. In our time together, we've looked at tons of different programming concepts and techniques. This is where you get to show it all off.

Your 3rd and final project will be a single-page Web application using the MEAN stack.

Like the other projects, this project is to be done individually.

Looking for Project #1 or #2? See the Project #1 document or the Project #2 document.

Table of Contents

  1. Schedule
  2. Updated Technical Requirements
  3. Updated Deliverables
  4. Presentations
  5. Grading Criteria

Schedule

Thursday - December 14th

  • 3:00 p.m. - Presentation Rehearsal #1: About You & Your Project
    For your first presentation rehearsal you should create your initial presentation as a short, 1-2 minute set of slides. Your slides only need to talk about you and your project idea.
    See Presentation Section

Friday - December 15th

  • 3:00 p.m. - Presentation Rehearsal #2: Slides With Structure
    For the second presentation rehearsal you should change your short presentation into its final, 3 minute form. Your slides will have more structure and more content.
    See Final Presentation Structure

Monday - December 18th

  • 3:00 p.m. - Presentation Rehearsal #3: Demo
    For the third presentation rehearsal you should incorporate a demo of your live application at the end of your talk. Your presentation structure should be more or less the same, but you should make adjustments based on feedback from the previous day.
    See Demo Tips

Tuesday - December 19th

  • 10:00 a.m. - Hackshow: WebDev Final Presentations
    Finally, on Tuesday it's time for your last Ironhack project presentation. You will present your projects to senior dev judges, staff and other students. Remember to dress at least one degree nicer than normal.

  • 2:00 p.m. - Hackshow: UX Final Presentations The UX students are also having their final presentations on the same day. All of us are expected to support them!

  • 5:00 p.m. - Graduation Both you and the UX students will have an Ironhack graduation ceremony!

Updated Technical Requirements

You app must:

  1. Use Angular for all of the user-facing parts of your application.
  2. Use Express for your API backend that your Angular app will communicate with.
  3. Use Mongoose for models and database communication.
  4. Have 3 models or more. Having one for users is a no-brainer. The other two should represent the main functionality of your app. Don't force it if having a 3rd model doesn't make sense.
  5. Have validation on its models with feedback for users if their submission is invalid.
  6. Include sign up, log in & log out functionality with encrypted passwords (or social logins) and authorization (logged in users can do extra things).
  7. Have two repos on GitHub. One for your Angular application and the other for your Express API backend.
  8. Have at least 1 commit per day that you worked on it.
  9. Be deployed online using Heroku, so anybody could use your app.
  10. Be connected to your free .co domain. Ironhack will send you an email with your promo code and instructions on how to redeem it for your free .co domain.

Responsive design is not a requirement.
Wireframes are not a requirement.
Full CRUD is not a requirement.

Updated Deliverables

  • A working MEAN stack application, built by you that runs on a server.
  • A deploy of your app on Heroku with a .co domain.
  • The two URLs of your GitHub repositories (Angular & Express).
  • The URL of the live app on your .co domain.
  • The URL of the Heroku app.
  • The URL of the slides for your app's presentation.
  • Your GitHub repos should have the URL of your live app in the URL section.
  • You must present your app during Project #3 final presentations (last day of Project #3 time).

Wireframes are not a deliverable.
User stories are not a deliverable.

Presentations

Project #3's presentation will focus more on you again, since you will be presenting to judges.

Format

  • Talking with Slides: 3 minutes
  • Demo: 2 minutes
  • Total: 5 minutes

Attire

  • Dress nicely for this and all final project presentations (last day of each project's time).
  • Dress at least one degree more elegantly than you usually dress for class.
  • Examples:
    • If you wear t-shirts every day, wear a button-down shirt.
    • If you wear jeans every day, wear some slacks.
    • If you wear sneakers every day, wear nicer shoes.

Slide Applications

  • All presentations will be done from a staff member's computer, so your slides need to be online.
  • PowerPoint files, Keynote files or files of any kind will not be accepted.
  • Suggested online slide applications:

Short Presentation Structure

  1. Title Slide (1 slide): your project's name & your name
  2. About Me (1-2 slides):
    • Where are you from?
    • What are some interesting facts about you? (hobbies, travels, etc.)
  3. Project Elevator Pitch (1-2 slides):
    • What is your project?
    • How will it work?
    • Why did you choose it?
  4. Closing Slide (1 slide): your project's name, your name & a "Thank You"
  5. Total: 4-6 slides

Final Presentation Structure

  1. Title Slide (1 slide): your project's name & your name
  2. About Me (1-2 slides):
    • Where are you from?
    • What are some interesting facts about you? (hobbies, travels, etc.)
  3. Project Elevator Pitch (1-2 slides):
    • What is your project?
    • How does it work?
    • Why did you choose it?
  4. Technical Challenge (1-2 slides):
    • What was the most important technical challenge you faced?
    • How did you overcome that challenge?
  5. Big Mistake (1-2 slides):
    • What was the biggest mistake you made during this project?
    • What did you learn from it?
  6. Demo Slide (1 slide): literally says "DEMO" with a link to your project so you can open it easily
  7. Closing Slide (1 slide): your project's name, your name & a "Thank You"
  8. Total: 7-11 slides

Presentation Structure Notes

  • Don't include a slide just for the technologies.
  • Don't include any code in your slides. Nobody will read it.
  • Don't include a slide for GitHub graphs.
  • Don't go into detail about how the app works. Your demo is where you want to do that.
  • If you think that deviating from the structure improves your presentation, feel free to do so. This suggested structure is mostly for people who don't know what to do.

Demo Tips

  1. Plan what you are going to demo and practice it on the live site. That way you won't be surprised if something breaks on the live version.
  2. Deploy early so you can squash bugs. There are always bugs on the live site at first.
  3. Add link to your live project to your DEMO slide so you can start it smoothly.
  4. Your app's colors and sizing might look different on the projector. If you think it might be a problem, ask to test it beforehand.
  5. If you app is on Heroku, refresh it before you present. Otherwise there will be a delay on the initial load.

Grading Criteria (same as on platform)

  • Technical Requirements: Did you deliver a project that met all the technical requirements? Given what the class has covered so far, did you build something that was reasonably complex?

  • Creativity: Did you added a personal spin or creative element into your project submission? Did you deliver something engaging and playable 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?

  • Deployment: Did you deploy your application to a public URL using GitHub Pages?

  • Total: Your instructors will give you a total score on your project between:

Score Expectations
0 Does not meet expectations.
1 Meets expectations. Good job!
2 Exceeds expectations, you wonderful creature, you!