project: Tilde Mockups

Hard Prerequisites
IMPORTANT: Please review these prerequisites, they include important information that will help you with this content.
  • TOPICS: Introduction to web design
  • TOPICS: React: Basic basic architectural guidelines

    • Tilde is pretty cool and stuff, but it still needs a lot of work. This is your chance to make your mark!

    Spend a little bit of time thinking about a feature that you would like to have built in Tilde. Ok, now build out a proof of concept. Your output should feel interactive, if we put it in front of a user then they should be able to poke around and get it to do stuff.

    Your objective is not to make a fully functioning full stack web application. Your goal is to create a Mockup. If your mockup is suitably kiff then we might bring it to life :)

    Technologies in use:

    • use create-react-app to set up your app
    • material ui: we are already using this a lot
    • To get your site to be responsive, make use of The material ui Grid component
    • plotly: This is something that our data scientists are quite familiar with - it’s good to be consistent about out use of technologies in order to allow easy cross-functional communication. So if you draw any graphs look here first

    What does success look like?

    • Make use of Material UI
    • Your frontend should be intuitive for users. Try to empathize with the user. What will they want to see? Where will they be confused.
    • your website needs to be responsive. Make us of Material UI’s layout components to make it happen
    • make sure you follow good architectural practices
    • Demonstrate your understanding of React’s basic mechanisms. Please demonstrate:
      • the use of multiple functional components
      • props
      • useState
      • useEffect

    General procedure

    1. Draw pictures of what you want to build. This will help you refine your thinking. They don’t need to be super beautiful or anything.
    2. Show the pictures to people and get feedback. Refine your thinking. This is really important generally - if you build something for people then it’s good to validate your thinking before you build it. Why? Because this stuff is not obvious - out in the business world it can be really really expensive to build stuff based on incomplete understanding.
    3. Build a mockup

    Some ideas for you :)

    If you are struggling to think of something to build, here are a few ideas. If you want to build something else then that is also fine :)

    1. PROJECT: Code Review Performance Dashboard mockup
    2. PROJECT: Public Profile
    3. PROJECT: Volunteer Pair-programming Dashboard
    RAW CONTENT URL