Making with Code

Act II: Web App Pitch #

Act II focuses on planning and outlining a Web Application. Your will need to consider backend architecture and frontend architecture in order to create a comprehensive plan.

[0] Project Overview #

🎨 Design Brief: In this project, you must create a social computing Web App for G6 tutor groups. Students should be able to contribute, interact, view, and/or modify the Database. It is up to your team to decide what the App is its features.

🤔 Here are a few ideas:

[1] Design Document #

For this project, you will use a Whimsical board to design the frontend and backend of your Web App.

💻 In a another new tab, create a new Whimsical Board here on your Team.

💻 Create a sharable link and add it to the Google sheet

💻 Open the Whimsical Board Template here

  • Select Copy To
  • Select Your Board

✏️ You and your teammate(s) must work together to plan the backend and frontend of your web app.

🔍 A few resources:

[2] Pitch Presentation #

You will take your polished wireframes and you great web app idea and present it to your peers, teachers, and guests. After your presentation, the audience should understand what your app does, what features it has, and who will use it when it’s finished. This is a valuable opportunity to pitch your idea and receive feedback.

You can find the slides template in your Google Drive. Choose which of your team member’s slides to use and notify a teacher.

Your pitch should include:

  • a short description of your idea
  • what features your app will have
  • images of your wireframes

[3] Assessment #

✅ This project will be assessed on the following criteria:

  • Project Planning: Backend
    • We can describe the purpose and function of our web application
    • We can document the structure of our database with appropriate field types and default values
    • We can consider useful Python helper functions to access and manipulate our database
    • We can list and document all required Flask app function routes with their URLs, HTTP methods, and purpose
  • Project Planning: Frontend
    • We can plan the context, colors, fonts, and content prior to development
    • We can design detailed wireframes for all key templates with descriptions to explain specific interactions for each page
    • We can include example data from the database on the wireframe
    • We can include arrows on the wireframes to indicate how a user will navigate through the web application
  • Pitch Presentation
    • We can prepare slides that easy to read and include relevant visual aids
    • We can explain our Web App idea by describing its function and its intended users
    • We can respond thoughtfully to audience feedback, demonstrating and understanding of their suggestions

For each criteria you will be assessed on a score from 0-3.

  • 0 - no evidence of the practice
  • 1 - limited evidence of the practice
  • 2 - satisfactory evidence of the practice
  • 3 - substantial evidence of the practice

[4] Deliverables #

⚡✨

🗓️ Due Date

  • The planning document
    • CS10.1 - 26 March, end of class
    • CS10.2 - 26 March, start of class
  • You will pitch your web app during the class
    • CS10.1 - 16 April
    • CS10.2 - 26 March

📄 Deliverables

  • A Whimsical document with your Web App planning
  • A Google Slides presentation