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
- 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. - 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…) - 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 - 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
- whatever datas on the screen.(made by me, others, company, from other site or whatever)
- 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…