Act II: Web App Pitch #

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

[0] Project Overview #

🎨 Design Brief: In this project, you must create a social computing Web App. Users 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:

• r/place
• fizz or YikYak
• higher/lower game
• isf compliments
• list of fun APIs
• lucky draw
• blessings - use emma as the password
• communal Mad Libs, Magic-8 ball, or meme generator

[1] Design Document #

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

👀 Start by taking a look at the template and duplicating it for your group: Miro Board Template

0. Click on cs10 Web Apps Design Doc in the top left corner
1. Click Duplicate
2. Share it with your teammates and teachers.

🖌 You and your teammate must work together to plan the frontend and backend of your social computing web app.

• For the frontend,
  • you must design a high-fidelity wireframe for each page of your site. It should look as close to your final design as possible. ( Inspiration for high-fidelity wireframes)
• For the backend,
  • you must design the Model and Views of your app.

🔍 A few resources:

• Django Model Field Types
• Google Fonts
• Fontjoy - generates font combinations
• coolors generator
• google color picker
• dribbble

[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:

• Frontend Design [3]
  • We can appropriately plan the color palette and typography
  • We can design a high-fidelity wireframe for each necessary template
  • We can display the appropriate information in the layout
• Backend Design [3]
  • We can plan the architecture of a Django Model
    • All field types are appropriate
    • Methods are used to improve efficiency and abstraction
  • We can plan class-based and/or function-based Views
    • Each View is described in detail
    • Each View includes a corresponding url path
  • We can use descriptive names to support readability
• Pitch Presentation [3]
  • We can present the Web App idea in a clear, engaging manner
  • We can design slides that are readable and include appropriate visual aids
  • We can appropriately respond to audience feedback

For each criteria you will be assessed on a score from 0-3. With 9 criteria, there is a total of 9 potential points.

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

[4] Deliverables #

⚡✨

• A Miro Board with your Web App design specifications
• A Google Slides presentation