Project for UCLA Computer Science 97

[97 home]

For the main project, you will creating a full-stack web app.

Features

Although the app is your choice, it should:

In addition to the above functionality requirements, your web app should contain at least 3 more distinct features. For example, if you were implementing Instagram for the first time, the features might be:

  1. Like and comment on photos
  2. Visit user profiles that show name, bio, and the user’s uploaded photos
  3. Follow other users.

If you were implementing the MyUCLA Class Planner, the features might be:

  1. Add/remove classes from your current plan.
  2. Enroll in classes.
  3. List additional information about classes such as days, time, location, instructor, and units.

App ideas include: fitness, social media, cooking, ride-sharing, messaging, music, banking, dating, productivity, COVID-19 tracking with privacy, etc. Don’t think about it too hard; you are being evaluated on the quality of your implementation, not the app idea itself! It’s totally okay to choose an app idea that already exists.

Though we do not expect your apps to be completely polished and visually aesthetic, we do expect it to be relatively organized and easy to use.

Technology

Node.js and React.

If you would like to try a different technology stack (i.e. build an iOS/Android app, use a different back-end framework such as Python/Django, etc.), you may provided you receive permission from an instructor by the end of Week 6. Your project is valid as long as it meets the requirements outlined above. Please note that choosing a different technology stack may limit the amount of help that instructors can provide you.

You must use Git and GitHub (or similar Git-based repository) to track the progress of your work. The project can receive a full grade only if the submission includes Git history no shorter than five commits from each group member. Commit history may be checked to ensure participation. “Participation” does not mean commits or lines of code, but rather the quality of work.

As is usual in this class, your work should be your own. Of course by using Node.js etc. you will be building on the work of others, and you will be working in a group project, but each of your own commits should be your own work. You should use a private GitHub repository (not visible to outsiders) to help ensure this.

Since you will submit your repository, it should also contain a README file (plaintext or Markdown) describing in detail how someone who cloned it can run your app. This should, of course, include any shell commands needed for setup.

Finally, each student must also submit a personal three-page final report that includes:

See the USENIX templates in Resources for written reports and oral presentations for good report formats.

Grading

Project grading will consist of the following components. All percentages below are percentages of the total project grade.

Group project components (one per group):

Final report (one per student):

Submission

You will present and demo your project during the course.

One team member must submit a compressed tarball of your GitHub repository to CCLE. This should contain all your group’s work, including any documentation, presentations, etc. The repository should not include generated files, only source code; the README file should explain how to generate any files (e.g., node modules) buildable from the source (adding their names to your .gitignore file can help you avoid submitting them by mistake). You should be able to obtain such a tarball directly from GitHub. Name the file UID-project.tar.gz, where UID is your student ID.

In addition, each group member must submit a final report to CCLE individually. Ensure that your report is in PDF format and is named UID-report.pdf.

Glossary

Front-end/Client:
Two terms that are often interchangeably used to refer to the user-facing part of your application, or everything that the user actual sees. In the context of web apps, this means the actual look of your website and all of its contents (buttons, tables, text, etc.).
Back-end/Server:
Two terms that are often interchangeably used to refer to the “behind-the-scenes” part of your application that handles business logic such as saving user data or generating the appropriate data to send back to the client. In the real world, servers typically run on their own dedicated hardware (really just another computer) and the client and server communicate via HTTP.
Dynamic:
Changing. In the context of web apps, dynamic content refers to anything (text, images, tables, etc.) that can change. That is, if you visit the website at different times or perform certain actions, the contents of the website may change. Dynamic is the opposite of static.
JavaScript:
The so-called “language of the Internet”. It is the language that virtually all websites use to perform things dynamically. Technically, it’s an interpreted language whose syntax borrows quite a few elements from C.
Node.js:
Node.js is a JavaScript run-time environment. In the same way that Bash allows you to execute shell commands, node.js is simply a program that allows you to execute JavaScript statements. node.js contains additional syntax and features that browsers do not have.
React:
React is (at the current time of writing) the most popular JavaScript framework for building user interfaces, and is maintained by Facebook alongside a group of individual contributors and developers. React provides you with a declarative way of creating user interface components (such as custom buttons, menus, etc.) and is written using JSX, which stands for JavaScript XML. JSX is an extension of JavaScript which incorporates HTML, and can be transpiled (converted) to regular JavaScript.