Looking for some ideas on how to create an custom shirt designing like tailorstore - reactjs

Looking for recommendation to create a custom shirt designing feature like the website tailorstore.co.in (CUSTOMIZING SHIRT).
While exploring, i thoughts like they might:
1. Created 3D models and generated n-number of combinations.
- Because the shirt pictures were too accurate.
2. Used HAMMER.JS, THREEJS.ORG, REACT.JS to bring such a accurate feel.
- While reference their source codes.
3. Did some photo shoots and used in the website.
- Tried to convince myself.
But i couldn't jump into any conclusion, so i came here to know your opinion on this.
Any guidance on this is highly appreciable. Thanks...

Without going deep down to technicism, your stack seems appropriate.
I only suggest you to use a wrapper for library like hammer.js like react-hammerjs.
About ThreeJS: I've tried many wrappers, may be is better to build your own, I can provide examples if needed.

Related

What would be a good diagram for designing React.js UIs before writing any code?

So basically, I mean something like UML for designing classes in Object-Oriented programming.
How can we use a diagramming software to design (model) our UIs (Components, props, states, event etc) before writing any actual code?
You can use the https://balsamiq.cloud/ for creating the wireframes of UI before starting the actual code.You can create the mobile view screens for different mobile versions in that.Later you can work on the screens wise.
Once the UI is done you may get the clear idea of what is needed in reactjs states and props values.
Pen and paper ... whiteboard. It might sound like I'm kidding. But I find this to be the best way to model your app. When I'm done with a whiteboard diagram, I take a photo if I need to share it.
It does two big things, imo: 1. it keeps things simple so you get the important stuff figured out without overcomplicating things so you get started coding; 2. it doesn't look too official or polished so you remember it's just a sketch. When it comes time to write your code, your established patterns and conventions should dictate your app architecture and your "wireframes" should just be a reference to look back on.
Again, just my own opinion. There is no single answer to your question.

Could i use react-virtualized for rendering and modifying large tabular data?

I would like to build a service that can manage large dataset by grid view. It's similar to Excel or Google's Spreadsheet. The service can render and modify directly on the grid view.
I would like to use react or some latest technology to develop the front-end. I found a react component named react-virtualized.
I still wonder that can it implement modification functionality on it.
Could you explain me more about how it work or under the hood ? Actually i need some idea to propose the solution like this.
Could i use react-virtualized for rendering and modifying large tabular data?
Yes.
Sounds like you're looking to build something like this. It is built with react-virtualized and the source code for it can be found here.
Could you explain me more about how it work or under the hood ? Actually i need some idea to propose the solution like this.
This question is a bit too vague for Stack Overflow I think. You might find this talk informative since it kind of covers the basics of react-virtualized. After that I would suggest browsing the documentation.
Once you have a foundation then more specific questions could be directed here or to the react-virtualized Slack channel.

Custom arbor.js shapes

I'm creating html canvas illustrations using a an adobe illustrator plugin. Here is link to an example The example is an fried egg. As a fun project I'm making an illustrated restaurant menu linking things like eggs, bacon, bread etc.
I'm hopping to use these illustrations within arbor.js Any ideas how to do this?
I've found the best way to work out what's going on with arbor.js is to dive in and read the code, it's really well laid out. Look at the JavaScript for the sample project, in particular particleSystem.eachNode. You can see how and where the nodes and edges are rendered. For a more thorough version, check out the 'Altas' example - that shows how to do text rendering on the nodes.
Good luck!

Building a website with "catalogue" pages

I want to build a website that has the ability to search for products based on certain criteria.
Websites like Newegg.com are a perfect example.
What I want is the part that allows the website to list the products on the website dynamically on its pages and if there are too many products to list it will create pages(1,2,3).
I want to find some resources onto how to do this kind of stuff but can't formulate my question right to find it. What are some of the good resources? Complete beginner, never done this.
For a beginner would you suggest using ASP.NET for such kind of task?
I recommand you to use PHP and MYSQL, it's easier and there are a lot of ressources and examples.
I will not suggest any programming languages. Which one is easier, is an matter of opinion and perspective. Its up to each developer to draw his own conclusion.
But for a new developer you should probably leverage some existing solutions. Look for a cms solutions (content management system) like joomla, that already have a solution for a use case like catalog listing.(Looking for samples will help)
For you to come up with a good enterprise solution, you need to optimize data store, have some mechanism like Lucene searching to enable faster searching experience and the complexity does not stop there. ( no matter what language you use)..

Making development with Ext JS fast

Ext JS is a nice framework for web UI, but I found that building and putting stuff together takes a long time and painfully slow.
This might be a general problem when working with JavaScript, but does anybody have any way to speed things up?
What can I use? Better IDE with good JavaScript suppport? GUI designers? Code generators?
I need some way to speed up common things like building grids and forms but yet let me do complex things like creating custom components easily.
I'm using ASP.NET MVC. Coolite seems nice at first, but I feel that I'll be having trouble when creating any custom components later on.
There's always Ext GWT, which lets you use Eclipse tooling (and all of the advantages that gives you, such as refactoring, swift code navigation, etc.) to create your Ext/JavaScript app.
When you download the ExtJs library, you find lot of sample applications for common requirements like Grid panel, forms, form elements etc.
Regarding IDEs, you dont find mature productive tools, but check the below link and wish it could be of help to you
http://www.extjs.com/blog/2008/02/01/ides-plugins-and-tools-for-ext-js-20/
But if you really wish to develop custom components, you need to get through knowledge,start approaching with ExtJs-provided sample apps.
If you want to get faster at anything, practice it until you fully understand how it works and how to make it do what you want. If you are just starting out, why would expect to be able to work as quickly as you do when you are working on something that you are very familiar with?
Things I use to make ExtJS less painful
Chrome, for it's developer tools, or Firefox with Firebug.
snipMate: snippets for Vim, so I can quickly produce boiler plate code for classes.
JSLint as a command line tool. Especially good for detecting rogue commas.
Sencha forums.
ExtJS IRC chat (Server: irc.freenode.net Room: #extjs).
API documentation.
Sencha and Saki's ExtJS examples.
Beer.
ExtJS is building a designer right know so you can look forward it, the only problem I think is not gonna be free.
you can see a video demo there, in term of release date I think this is due to the first quarter of this year.
I say learn the framework. But to develop apps, I use IntelliJ IDEA, which has partial code completion, etc. It costs money though.
Once you have some practice and understanding of how ExtJS works, you'll get faster at it. By using the examples for reference, and building up my application in small pieces, I've gotten much better (and faster) at developing stuff with ExtJS. A great way to get started is to find an example (or two) that kind of do what you need, and modify (or combine) them to see how they work together.

Resources