learn-co-curriculum / hs-designing-kiva Goto Github PK

Design Activity - Kiva.org

Today we're going to practice designing an application - deciding how our models, routes, and views should behave before we start coding. You'll be working in groups to design Kiva, a website which lets entrepreneurs in underdeveloped nations receive micro-loans from other people around the world.

Determine the Story

First, browse Kiva and tell the story of the app. How would you describe how the user interacts with the application? For example: "First, a user will browse projects. Projects have different funders, etc."

Designing the Schema

How many different nouns were in your story? Each of those nouns becomes a model in your application. Think about the relationship between those models. Make a class diagram of the models your app will need and the relationship between those models. Many developers use tools such as Gliffy for this, but you can also use a whiteboard or chart paper. In the example below, we can visually see that a customer has many orders.

Routing your Routes

Next, list out the different routes your application will need. For example, what route should show me all of the projects? What about the project with an id of 50?

Wireframing the Views

Once you've determined your routes, start wireframing the views that will correspond to those routes. What does the index page look like? What about the project page? Don't be afraid to make changes - ask yourself what could be improved? What could be done different?

Going Further

• Once you've finished, take a look at the sites below - how could you adapt your designs to fit the following applications?
  • Kickstarter - crowdfunding site where artists and inventors, users can support projects in exchange for prizes.
  • Do Something - organization promoting community service and social change
  • Donors Choose - allows individuals to donate directly to public school classrooms
  • Indie GoGo - crowdfunding site similar to Kickstarter

View Design Activity - Kiva.org on Learn.co and start learning to code for free.