Learn Front-End Development and Automated Testing with Angular/

...

/

Let's Get Lunch: The Project App

Let's Get Lunch: The Project App

We’ll briefly introduce the project we’re building in this course along with some conventions used.

We'll cover the following...

What are we building?

  • We’re going to imagine that we work for a company building an internal tool to help employees coordinate lunches and happy hours. We’ll refer to the application as “Let’s Get Lunch.”

  • Like in most applications, we’ll let users choose a username and password and select their dietary preferences when creating their account.

  • After creating an account, users can then create events, specifying a start date, end date, and location. They’ll be able to view these events on a dashboard via a user-friendly calendar.

  • Within these events, users will see a list of people who have RSVPd to the event (those who plan to attend). We’ll also provide a comment section within events so users can discuss details in the app.

  • In addition to comments, we’ll also let users suggest locations for an event.

Course conventions

There are a few conventions used within this course that are worth addressing before moving forward.

  • We’ll be using command-line interfaces to run commands throughout the course. These commands will typically be put inside formatted blocks like echo hello

  • We’ll also use inline code, like const. Inline, formatted text such as const always relates to something within our code (including some Angular-provided error messages). The inline code is a visual aid to distinguish between plain English and technical terms such as variable names, file names, error messages, and occasionally a command-line interface command. We can consider letting user signup for an account, which is different from a signup function we may be writing. The differences between the two within the course should be fairly straightforward.

  • An example of an additional reference would be the file names found at the start of code blocks whenever we’re adding code to a file. Also, there will be highlighted lines that indicate the changes made in the code of some blocks. We’ll refer to those changes using line numbers. In the code below, line 4 has been highlighted as an example.

Press + to interact
//src/app/some-file.js
function myNewFunction() {
  return true;
}