Beyond todo app. how does real-world app work?


#1

Hi, I’m a newbie programmer who wants to know how things work other than todo app.
Here is my background to let you know how newbie programmer I am
(basic html+css+javascript and few hours of jquery and then meteor… started with blaze, now I forgot most of it as I started to learn React. while learning meteor, first time using console, knowing database, routing etc… )

Problem is that after I read many articles, I still don’t know how to build something more than a todo app. I hope you suggest the big pictures of structuring a web app.

I’m not really sure what kind of collections I should make or how to divide it and where to put user specific data. how real world app can be made using Meteor.

Example 1 - Amazon (It apply to FB, Pinterest, any e-commerce, Netflix, )
here’s the basic 4 important Features

  1. I see lists of books nicely (I can search, sort. top 10 books, recommended list for me etc… )
    how to - subscribe to the Book db collection (get data) and give it to UI component where render only book image, title, author, stars, price.
  2. If clicked, go to clicked book’s page(all the book has its page)
    how to - if one component is clicked, route to its book page. I now render all the information I have. (product detail, summary, reviews etc…)
  3. see the details of book, If I want it to be at my cart/wish list
    -I don’t know… - if click “add to list”, clicked item(book) will go to my wish list. if click “add to cart”, it goes to shopping cart
  4. user page(It could be my wish list, shopping cart, liked books, purchased books, whatever user specific things can be seen )
  • I don’t know…

My How-to idea is… I will make 2 collections like this

users collection - (meteor’s login system)

 {_id : qwrifuasdnflwk,
  username : "john",
  email : john@gmail.com,
  password : ???? 
},   ...many other user exist

Book collection - where I put all the data of each book

  [ { _id : weradjfionsdf,
    title : "Meteor.js for a modern web application",
    author : ["MDG","others","others"],
    isbn : 1231297183750,
    price : [paper:10 , hardcover : 20],    
    imageurl : asdlfkjlsdfkasdf,
    review : [{username : "john",
               content : "blah blah blah ~~~",
               createdAt : new Date(),
               like : ["user1","user2","user3"]
              },
              {username : "mike",
               content : "blah blah blah ~~~",
               createdAt : new Date(),
               like : ["user10","user20","user30"]
              },  etc.......]
     },   etc.... more and more books here.
]

I can kind of make Feature 1 and 2, but can’t make 3 and 4. In Feature 3, How should I add to my list? what should I do here? more field to the user collection and put its data into that field? for example, insert clicked book’s data to user collection. Now user collection looks like this.

 {_id : qwrifuasdnflwk,
  username : "john",
  email : john@gmail.com,
  password : ????,
  wishList : [{ _id : weradjfionsdf,
         	title : "Meteor.js for a modern web application",
    		author : ["MDG","others","others"],
			price : [paper:10 , hardcover : 20],    
  		imageurl : asdlfkjlsdfkasdf,
                url : "www.amazon.com/book/Meteorjs-for-a-modern-web-application"
               },
	      { _id : weradjfiasdfonsdf,
		title : "Hew.. It seems I'm no good at programming",
    	        author : ["me","others","others"],
		price : [paper:5 , hardcover : 10],    
  	        imageurl : asdlfkjdflsdfkasdf,
                url : "www.amazon.com/book/Hew-It-seems-Im-no-good-at-programming"
              },    .... lists of books information here
			  ]
  shoppingCart: [{...},{....},{....}, ....],
  friendList : [{"john"},{"mike"},{..},...],   (If I think of Facebook)
  groups : ["Learning Meteor Js", "React", "MongoDB", "AnimeFan"]  (If I think of Facebook)
  howManyDaysSignedIn : 64, 
  SignedTime : [{},{},{}...],
  HowMuchSpentOverTime : [{January : asdf},{February : 124}, ...]   }

Ideally all the analysis of user behavior, something can be showned to User page or just for companies to use it. Using D3 or whatever to visualize data nicely

If can do it like this, Feature 4 is same as Feature 1. Get data from user collection and show it nicely to user page. About todo example tutorials, visibility of content is sorted by created user/public/private settings. My initial thought is I can make user page like this. making each todos have “add” field and when user click whatever todos, update add field by putting user id. At user’s page, sort all the todos by check add field by currentUser Id. I feel like this is very bad… as app grows and if I just think of architecture, add clicked todos information to user collection sounds reasonable. (whatever added to user collection, user can see it right away)

simply say

  1. whatever datas on the screen.(made by me, others, company, from other site or whatever)
  2. I can add it to my account and I can see it at my page

I think this is such a basic feature that any application has it. (sadly, I’m really poor at understanding how these works…)

Add - add to cart/add to list/add to pin/add to playlist/like button(I can see all the people who clicked like button)/Comment system
It seems like other tutorial says… make collection everything like collection, friend collection, comment collection…

Sorting - I don’t know how this works. any contents can be categorized. Movie, Book, Music, Anime. sci-fi, k-pop, fiction, buiness etc…
In Amazon’s case I wrote above, something like putting tags into each book’s db??
ex) tags : [“Books”,“Computers & Technology”,“Web Development & Design”,“Programming”]
If it’s Anime - tags :[“Action”,“Game”,“Fantasy”,“SuperPower”,“School”] and when I click “Action” in sorting menu, I search every anime’s tags field and check if Action is exist or not??

I know my questions are broad and not clear, please give me some big pictures of how it is made…
If you are busy or the answer can be easily found somewhere else, just let me know url…


#2

there’s an todo example which has lists per user of tasks, and it has load of other nonsense as for deterrence since there’s no guidance there on what is what.


other than that the thing is hosted by meteor account on github.


#3

Just get started and do what you think could work. If it turns out to not work as well as expected, you have learned something and you can try something else.

Don’t think about optimization and scaling at all for your initial solution. Those are problems that you can solve, when you have them.

For very specific questions you can often find an answer on stack overflow.

Use divide and conquer to solve smaller problems individually and then you can connect the solutions (modules, components) to create the larger application.


#4

hm… for me todo tutorial was good. Full example looks good too… I don’t know why but I can’t run react version of Full example on my computer… besides that not much of a problem for the tutorial and full example. Now I think It’ll be nice if there’s a tutorial for the real one.


#5

Yeah, It seems like what you said is what I should follow… best thing is actually trying and see how it goes


#6

btw, anyone who has same kind of question… I actually found what I was looking for. Unfortunately, There’s no one size fits all answer on this matter. I bet you should check out database more. especially data model/ schema. I read few articles before, but It didn’t interest me that much at that time.
So… I’ve been reading articles about MongoDB data model. It seems like it depends on situations…
> normalize vs denormalize
> reference vs embed
> one to one / one to many / many to many relations
> one vs multiple query/operations(leads to client and server request/response round)
> read vs write (which happens frequently)
> data life cycle / growth of data(delete, mutate, push to existing data)
+ Meteor specific concern which is about the DDP.

I think It’s really important to understand these notions. here are some links for that
the best resource I could find it this
https://docs.mongodb.org/master/MongoDB-data-models-guide-master.pdf
this one is a lecture https://university.mongodb.com/courses/MongoDB/M101JS/2015_October/courseware/Week_3_Schema_Design/529dfa95e2d42347509fb37d
(If you are korean like me. this can be helpful too)
https://blog.outsider.ne.kr/655
personally, first one is the best!! Though, I’m still curious on how real things are built…


#7

This series may be a good start:

He has some other good videos too. Otherwise, I agree there are very few resources that get the big picture across and it makes it hard for newbies to understand… a lot of the stuff doesn’t make sense in a vacuum.


#8

Thanks for the help. I’ll definitely check it.