Project Two: 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/Express/MongoDB app from the ground up yourself.

You will be working individually for this project, which means you'll be designing and coding the app yourself.

You get to decide what you want to build - as long as it meets the Technical Requirements outlined below.

Once you've decided what you will build, please contact your instructional team for approval of your idea and then begin working on the Planning Requirements.

Technical Requirements

Your App Must:

☐ Have at least 1 data entity (A Model). This entity must represent the main functional idea for your app.

☐ Have complete CRUD data operations on one of your data entities.

☐ Utilize MongoDB and Mongoose.

☐ Use a CSS stylesheet (Additional Use of a CSS Framework such as Bootstrap or Materialize is optional, however your must have your own stylesheet with some styles defined as well)

☐ Be deployed online (Heroku) - We will show you how to do this.

Optionally, Your App May:

☐ Use authentication.

☐ Implement basic authorization by restricting access to certain features, such as editing and deleting a resource, to an authenticated user, or the user that created that resource.

☐ Consume a third-party API.

☐ Expose its own API where it returns data resources as JSON. (You will need to research how to do this ... hint res.json())

Necessary Deliverables

☐ A working full-stack app that meets or exceeds the above technical requirements, built by you, and hosted on Heroku.

• A Project README.md file with these sections:

  ☐ <Your app's title>: A description of your app. Background info of the app is a nice touch.

  ☐ Screenshot(s): Images of your actual app.

  ☐ Technologies Used: List of the technologies used, e.g., JavaScript, HTML, CSS...

  ☐ Getting Started: In this section include the link to your deployed app and any instructions you deem important.

  ☐ Next Steps: Planned future enhancements (icebox items).

  Note: Don't underestimate the value of a well crafted README.md. The README.md introduces your project to prospective employers and forms their first impression of your work!

☐ Frequent commits dating back to the very beginning of the project. Commit messages should be in the present tense, e.g., "Style landing page" instead of "Styled landing page".

Planning Requirements

• You need to have turned in the following before starting Project Week:

• A Trello board with:

  • User Stories, each moving from left to right in the following three lists in your board:
  • Ice Box
  • Current/MVP
  • Completed

User Stories must follow the following template: As a user, I want [feature], because [reason].

The reason is optional if it's blatantly obvious.

Note: Prioritize your user stories within the Ice Box with your "wish list" stories at the bottom.

• Wireframes of the main pages of functionality, e.g. Landing Page, Posts Index Page, Favorite Posts Page, Add Post Page, etc.

• An ERD showing the attributes of each model (or schema in the case of embedding) and the associations between them.

Here's a YouTube video to show you how.

Click here for an example you can use for inspiration

Presentation Requirements

You will have a maximum of 5 minutes to present your project following these guidelines:

1. Introduce the Project:

   ☐ Intro your app by paraphrasing the README.

2. Demonstrate the Project:

   ☐ Launch the app by clicking the link in the README.

   ☐ (If auth added) - sign up a new user, then immediately log out.

   ☐ (If auth added) - log in with your preferred user and demonstrate the features of the app.

   ☐ Be sure to demo full-CRUD data operations.

3. Show/discuss your code:

   ☐ Show the "main" Mongoose model.

   ☐ Show your favorite EJS template.

   ☐ Show the controller for the main model.

4. Share the experience:

   ☐ What was your biggest challenge?

   ☐ What are your key learnings/takeaways?

5. Q & A + Feedback

Suggested Ways to Get Started

• Discuss your app idea with an instructor to get their feedback before you dive too deep into user stories and wireframes.
• Remember to keep things small and focus on the MVP – feature creep can doom a project!

Project Idea Guidance

Nearly all of the applications you interact with on a daily basis would do for this project as most are "full-stack" CRUD apps.

Do Not Do Non-CRUD Applications Such As:

• Games
• Portfolio, or presentational pages
• Marketing or content oriented websites

Good Examples

Some of the best apps are solutions that track or manage things of personal interest to you:

• Music lesson tracking
• Soccer team tracker
• Rock climbing planner

So much of the Internet is CRUD apps!

• Social media:
  • Twitter
  • Instagram
  • Reddit
• Marketplaces:
  • Craigslist
  • Etsy
• Organizational or Business apps:
  • Customer management
  • Payroll/Accounting

Many simple apps can have their functionality enhanced by implementing the ability of users to comment on, and/or like/favorite items.

Another piece of advice: If you choose to develop an app that has the concept of a shopping cart (storefront), do not attempt to implement the actual payment functionality.

Actual Recent Student Projects

• SEIR Ice Creams
• Book Worms United
• Mana Autisim
• NIGHTOWL Coffee
• Cat Instagram

Project Feedback + Evaluation

• Your instructors will be evaluating your project during your demonstration as well as reviewing the code in your repo.

• If your instructors determine that your project does not meet the above requirements (denoted using checkboxes), you and your instructional team will coordinate a resubmission deadline.

• If there is a specific section of code that you would like an instructor to provide feedback, please ask!

Useful Resources

• Writing Good User Stories (user story tips)
• Trello
• Example Trello Board
• How to Create ERDs