Skip to main content

Project 3: Front-End UI

Due Dates
  • Checkpoint: Tuesday, April 1, 11:59am EST
  • Deadline: Tuesday, April 8, 11:59am EST

Overview​

Learning Goals​

By the end of this lab you will learn how to plan a large-scale project and develop the front-end UI for your project.

Requirements​

By the checkpoint, you should have:

  • Iterated on the low-fidelity prototypes based on feedback obtained during class.
  • A "Timeline" Google Doc in your team's Google Drive folder that displays a timeline for your project in a table. The timeline should map onto your MVP requirements for the next six weeks and should include a list of tasks (pertaining to a requirement), a time estimate for completing the tasks (each person should budget 5-8 hours/week), the person responsible for each task, and the due date for each task. Below are the remaining due dates for the project:
    • two weeks for the front-end UI (due 4/8)
    • two weeks for the back-end server and database (due 4/22)
    • one week to deploy your project (due 4/29)
    • one week to finalize your code base and prepare for the final presentation (due 5/6)
  • A codebase that contains:
    • A README.md file that describes the project, lists team members, and provides exact instructions for how to set up and run your application.
    • A templates directory that contains all of the HTML code for your project.
    • A static directory that contains all of the CSS and JavaScript code for your project.
    • A requirements.txt file that lists all of the Python packages that are required to run your project.
  • The first iteration of your front-end UI for your MVP requirements (apart from the account creation/login/logout pages). The pages you create should have a consistent look and feel, but do not need to be functional — we are only concerned about form at this stage. You do not need to write any JavaScript at this point.

Note: If you are developing an application using something other than Flask/HTML/JS/CSS, please let me know. You can overwrite the repository with your own structure but your intstructions need to be explicit on how to install all of the requirements to your application.

By the deadline, you should have:

  • The second iteration of your front-end UI for your MVP requirements that includes the necessary JavaScript code to make the pages functional, e.g., clicking on a button makes a call to the server and updates the page with a new element, etc. The call to the server should be mocked at this point. For instance, if a user clicks the "new post" button, the page should update with a new post without actually creating a new post in the database.

Setup​

a. Clone Your Lab Repository​

Get your Lab SSH URL from the CS77-S25 GitHub organization. The repository to clone is named final_project-<userID1>-<userID2>.

$ git clone [your final_project-userID1-userID2 url]
$ cd lab3-userID1-userID2
$ ls
Note
  • Here's a handy visual guide to help you better understand git.
  • If you need help getting your git ssh keys setup or cloning the repository, please refer to the using git guide.
  • If you are having trouble ssh-ing into a lab machine, make sure you've followed the instructions in the ssh setup guide.

b. Set Up Your Virtual Environment​

  1. In your lab repository, create a virtual environment:

    uv venv

  2. To activate your virtual environment, type source .venv/bin/activate. You should see your shell change to have a (folder name) prefix.

  3. To deactivate your virtual environment, type deactivate.

  4. Check that your virtual environment is using the correct version of Python:

    (.venv) $ which python
    <path_to_directory>/.venv/bin/python

  5. Great, now install Flask and Flask-SQLAlchemy and other required Python libraries:

    uv pip install flask flask-cors Flask-SQLAlchemy
    #OR 
    uv pip install -r requirements.txt

c. Run Your Flask App​

If your main flask application is set up in a file called app.py, you can start your flask web server using the following command:

flask run --debug --reload

The --debug and --reload flags will automatically restart your sever if you make changes to files.

To run on a specific port, use the --port option with ports in the 5000-9000 range:

flask run --debug --reload --port 7007

Submission​

  • By the end of the lab session, discuss your timeline with me.
  • By the checkpoint, push your code to GitHub.
  • By the due date, push your code to GitHub.

Rubric​

CategoryNeeds Improvement (1)Good (2)Excellent (3)
MVP Requirements MetSeveral requirements are missing or non-functional.Most requirements are met, but some minor aspects are missing or incomplete.All requirements are fully implemented and functional.
User Interface QualityUI is inconsistent across pages, or deviates significantly from prototypes.UI is mostly consistent across pages and follows what is specified in the prototypes, but could use additional refinement.UI follows prototypes almost exactly, and has a consistent layout and styling.
JavaScript FunctionalityJavaScript has significant bugs or does not work as expected.JavaScript is mostly functional but may have minor bugs.JavaScript functions work smoothly without errors.
Code QualityCode lacks informative comments, is unorganized, or is difficult to read.Code is functional but may have inconsistent formatting or have overly verbose comments.Code is well-structured, readable, and well-commented, including concise function descriptions, appropriate function, and variable names.