Alternatives to Storybook logo

Alternatives to Storybook

React Sketch.app, React Storybook, Bit, Pattern Lab, and Figma are the most popular alternatives and competitors to Storybook.
1.4K
637
+ 1
0

What is Storybook and what are its top alternatives?

Storybook is a popular tool used for developing UI components in isolation. It allows developers to showcase components in a variety of states and variations, making it easier to test and debug. Key features include interactive development environment, component explorer, add-ons for customization, and support for various frameworks like React, Vue, and Angular. However, Storybook can be complex to set up initially and may require some learning curve for beginners.

  1. Styleguidist: Styleguidist is a component development environment with hot reloaded dev server and a living style guide that automatically updates as your component library evolves. Pros include its ease of use and great customization options, while cons may include fewer integrations compared to Storybook.
  2. Cosmos: Cosmos is a tool for creating scalable, high-quality and maintainable UI components. It allows you to design and develop components outside of your app in an isolated environment. Pros include its focus on component quality, but it may have a steeper learning curve for some users.
  3. Pattern Lab: Pattern Lab is a static-site generator that helps you build atomic design systems and style guides. It provides a solid foundation for creating reusable components. Pros include its flexibility and scalability, while cons may include a potentially higher setup complexity compared to Storybook.
  4. Framer X: Framer X is an advanced tool for interactive design and prototyping. It allows for seamless integration of design and development, enabling you to create high-fidelity prototypes with code components. Pros include its powerful design capabilities, but it may be more focused on design rather than development like Storybook.
  5. Docz: Docz is a developer-friendly tool for creating documentation for your React components. It provides a fast and easy way to create beautiful documentation sites. Pros include its simplicity and speed, while cons may include limited support for other frameworks compared to Storybook.
  6. React-Proto: React-Proto is a React component prototyping tool that visually generates code for your components. It helps you build interactive prototypes quickly and efficiently. Pros include its visual approach to component development, but it may lack some of the advanced features of Storybook.
  7. React Sight: React Sight is a tool that allows you to visualize a React app's component hierarchy. It provides insights into your app's structure and helps with debugging. Pros include its simplicity and visualization capabilities, while cons may include a narrower focus compared to Storybook.
  8. Docusaurus: Docusaurus is a tool for building open source project websites easily. It comes with out-of-the-box support for documenting your components and provides a streamlined documentation workflow. Pros include its integration with popular version control systems, while cons may include a more limited scope compared to Storybook.
  9. React Styleguidist: React Styleguidist is a zero-configuration style guide generator for React components. It offers a live development environment and supports ES6, Flow, and TypeScript. Pros include its simplicity and great documentation, while cons may include a potentially smaller community compared to Storybook.
  10. Bit: Bit is a tool that allows you to share and reuse components across different projects. It facilitates component-driven development and improves collaboration among teams. Pros include its focus on component sharing and reusability, while cons may include a potentially different workflow compared to Storybook.

Top Alternatives to Storybook

  • React Sketch.app
    React Sketch.app

    Managing the assets of design systems in Sketch is complex, error-prone and time consuming. Sketch is scriptable, but the API often changes. React provides the perfect wrapper to build reusable documents in a way already familiar to JavaScript developers. ...

  • React Storybook
    React Storybook

    You just load your UI components into the React Storybook and start developing them. This functionality allows you to develop UI components rapidly without worrying about the app. It will improve your team’s collaboration and feedback loop. ...

  • Bit
    Bit

    It is open source tool that helps you easily publish and manage reusable components. It help teams scale shared components to hundreds and even thousands of components, while eliminating the overhead around this process. ...

  • Pattern Lab
    Pattern Lab

    It helps you and your team build thoughtful, pattern-driven user interfaces using atomic design principles. ...

  • Figma
    Figma

    Figma is the first interface design tool with real-time collaboration. It keeps everyone on the same page. Focus on the work instead of fighting your tools. ...

  • Material-UI
    Material-UI

    Material UI is a library of React UI components that implements Google's Material Design. ...

  • Cypress
    Cypress

    Cypress is a front end automated testing application created for the modern web. Cypress is built on a new architecture and runs in the same run-loop as the application being tested. As a result Cypress provides better, faster, and more reliable testing for anything that runs in a browser. Cypress works on any front-end framework or website. ...

  • jQuery
    jQuery

    jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. ...

Storybook alternatives & related posts

React Sketch.app logo

React Sketch.app

75
0
Render React components to Sketch ⚛️💎
75
0
PROS OF REACT SKETCH.APP
    Be the first to leave a pro
    CONS OF REACT SKETCH.APP
      Be the first to leave a con

      related React Sketch.app posts

      React Storybook logo

      React Storybook

      499
      0
      Develop and design React components without an app
      499
      0
      PROS OF REACT STORYBOOK
        Be the first to leave a pro
        CONS OF REACT STORYBOOK
        • 5
          Hard dependency to Babel loader

        related React Storybook posts

        Russel Werner
        Lead Engineer at StackShare · | 8 upvotes · 104.8K views

        Our front-end team decided to use React Storybook for our primary React development environment. It allows us to write components in isolation without the need to fire up our Rails stack. When writing components in isolation; you can focus on styling, behaviour and prop design. It forces you to think about how your component is going to be used by others. React Storybook uses webpack and hot module reloading under the hood. This allows us to write components very quickly since it hot reloads in the browser as you code!

        The knobs add-on is great for testing different edge cases for the component props. There is even an add-on that will auto-render and snapshot your components with every prop permutation allows by your defined knobs. These snapshots can then be part of your CI testing.

        We have a step in our build process that publishes a static React Storybook site on our production server. This allows our entire team to interactively test components before they are integrated into larger features. Once we are happy with our components in isolation, we integrate them into connected feature components which are wired up to Apollo and GraphQL to provide the data and state.

        There are heaps of React Storybook add-ons to checkout. If you aren't using it, you should be.

        See more
        Lars Lockefeer
        Mobile Tech Lead at Picnic · | 7 upvotes · 76.8K views

        Earlier this year, we started developing a new app to help our runners deliver groceries to our customers. We chose React Native over a native app or a PWA and are really happy with it. So far, we really like what we are seeing. Development speed is fast and the tooling is awesome. The “learn once, write anywhere”-promise is really fulfilled and when we ran our project for the first time on iOS after a few weeks of development, we were excited to see how well it worked and what it looked like.

        Read our blog post to learn more about how we use React Native, TypeScript, Redux.js, RxJS, CodePush, styled-components, React Storybook, Jest, and Prettier to develop this app, as well as our thought of what else we will do with it at Picnic.

        See more
        Bit logo

        Bit

        41
        0
        An open source tool for code sharing
        41
        0
        PROS OF BIT
          Be the first to leave a pro
          CONS OF BIT
            Be the first to leave a con

            related Bit posts

            Adebayo Akinlaja
            Engineering Manager at Andela · | 30 upvotes · 3.4M views

            I picked up an idea to develop and it was no brainer I had to go with React for the frontend. I was faced with challenges when it came to what component framework to use. I had worked extensively with Material-UI but I needed something different that would offer me wider range of well customized components (I became pretty slow at styling). I brought in Evergreen after several sampling and reads online but again, after several prototype development against Evergreen—since I was using TypeScript and I had to import custom Type, it felt exhaustive. After I validated Evergreen with the designs of the idea I was developing, I also noticed I might have to do a lot of styling. I later stumbled on Material Kit, the one specifically made for React . It was promising with beautifully crafted components, most of which fits into the designs pages I had on ground.

            A major problem of Material Kit for me is it isn't written in TypeScript and there isn't any plans to support its TypeScript version. I rolled up my sleeve and started converting their components to TypeScript and if you'll ask me, I am still on it.

            In summary, I used the Create React App with TypeScript support and I am spending some time converting Material Kit to TypeScript before I start developing against it. All of these components are going to be hosted on Bit.

            If you feel I am crazy or I have gotten something wrong, I'll be willing to listen to your opinion. Also, if you want to have a share of whatever TypeScript version of Material Kit I end up coming up with, let me know.

            See more

            I'm working as one of the engineering leads in RunaHR. As our platform is a Saas, we thought It'd be good to have an API (We chose Ruby and Rails for this) and a SPA (built with React and Redux ) connected. We started the SPA with Create React App since It's pretty easy to start.

            We use Jest as the testing framework and react-testing-library to test React components. In Rails we make tests using RSpec.

            Our main database is PostgreSQL, but we also use MongoDB to store some type of data. We started to use Redis  for cache and other time sensitive operations.

            We have a couple of extra projects: One is an Employee app built with React Native and the other is an internal back office dashboard built with Next.js for the client and Python in the backend side.

            Since we have different frontend apps we have found useful to have Bit to document visual components and utils in JavaScript.

            See more
            Pattern Lab logo

            Pattern Lab

            14
            0
            Create atomic design systems with it
            14
            0
            PROS OF PATTERN LAB
              Be the first to leave a pro
              CONS OF PATTERN LAB
                Be the first to leave a con

                related Pattern Lab posts

                Figma logo

                Figma

                4.1K
                87
                The collaborative interface design tool.
                4.1K
                87
                PROS OF FIGMA
                • 18
                  Web-based application
                • 10
                  Intuitive interface and perfect collaboration
                • 8
                  Free software
                • 7
                  Works on both Mac and Windows
                • 7
                  Highly Collaborative
                • 6
                  Great plugins, easy to extend
                • 5
                  Works on multiple OS's
                • 5
                  Imports Sketch files
                • 5
                  Large community, tutorials, documentation
                • 5
                  Hands done the best design tool for collaboration!
                • 4
                  Prototyping, design files and comments all in one place
                • 4
                  Interactive, event-based prototypes
                • 3
                  No more syncing between Sketch and InVision
                CONS OF FIGMA
                • 6
                  Limited Export options

                related Figma posts

                Jonathan Pugh
                Software Engineer / Project Manager / Technical Architect · | 25 upvotes · 3M views

                I needed to choose a full stack of tools for cross platform mobile application design & development. After much research and trying different tools, these are what I came up with that work for me today:

                For the client coding I chose Framework7 because of its performance, easy learning curve, and very well designed, beautiful UI widgets. I think it's perfect for solo development or small teams. I didn't like React Native. It felt heavy to me and rigid. Framework7 allows the use of #CSS3, which I think is the best technology to come out of the #WWW movement. No other tech has been able to allow designers and developers to develop such flexible, high performance, customisable user interface elements that are highly responsive and hardware accelerated before. Now #CSS3 includes variables and flexboxes it is truly a powerful language and there is no longer a need for preprocessors such as #SCSS / #Sass / #less. React Native contains a very limited interpretation of #CSS3 which I found very frustrating after using #CSS3 for some years already and knowing its powerful features. The other very nice feature of Framework7 is that you can even build for the browser if you want your app to be available for desktop web browsers. The latest release also includes the ability to build for #Electron so you can have MacOS, Windows and Linux desktop apps. This is not possible with React Native yet.

                Framework7 runs on top of Apache Cordova. Cordova and webviews have been slated as being slow in the past. Having a game developer background I found the tweeks to make it run as smooth as silk. One of those tweeks is to use WKWebView. Another important one was using srcset on images.

                I use #Template7 for the for the templating system which is a no-nonsense mobile-centric #HandleBars style extensible templating system. It's easy to write custom helpers for, is fast and has a small footprint. I'm not forced into a new paradigm or learning some new syntax. It operates with standard JavaScript, HTML5 and CSS 3. It's written by the developer of Framework7 and so dovetails with it as expected.

                I configured TypeScript to work with the latest version of Framework7. I consider TypeScript to be one of the best creations to come out of Microsoft in some time. They must have an amazing team working on it. It's very powerful and flexible. It helps you catch a lot of bugs and also provides code completion in supporting IDEs. So for my IDE I use Visual Studio Code which is a blazingly fast and silky smooth editor that integrates seamlessly with TypeScript for the ultimate type checking setup (both products are produced by Microsoft).

                I use Webpack and Babel to compile the JavaScript. TypeScript can compile to JavaScript directly but Babel offers a few more options and polyfills so you can use the latest (and even prerelease) JavaScript features today and compile to be backwards compatible with virtually any browser. My favorite recent addition is "optional chaining" which greatly simplifies and increases readability of a number of sections of my code dealing with getting and setting data in nested objects.

                I use some Ruby scripts to process images with ImageMagick and pngquant to optimise for size and even auto insert responsive image code into the HTML5. Ruby is the ultimate cross platform scripting language. Even as your scripts become large, Ruby allows you to refactor your code easily and make it Object Oriented if necessary. I find it the quickest and easiest way to maintain certain aspects of my build process.

                For the user interface design and prototyping I use Figma. Figma has an almost identical user interface to #Sketch but has the added advantage of being cross platform (MacOS and Windows). Its real-time collaboration features are outstanding and I use them a often as I work mostly on remote projects. Clients can collaborate in real-time and see changes I make as I make them. The clickable prototyping features in Figma are also very well designed and mean I can send clickable prototypes to clients to try user interface updates as they are made and get immediate feedback. I'm currently also evaluating the latest version of #AdobeXD as an alternative to Figma as it has the very cool auto-animate feature. It doesn't have real-time collaboration yet, but I heard it is proposed for 2019.

                For the UI icons I use Font Awesome Pro. They have the largest selection and best looking icons you can find on the internet with several variations in styles so you can find most of the icons you want for standard projects.

                For the backend I was using the #GraphCool Framework. As I later found out, #GraphQL still has some way to go in order to provide the full power of a mature graph query language so later in my project I ripped out #GraphCool and replaced it with CouchDB and Pouchdb. Primarily so I could provide good offline app support. CouchDB with Pouchdb is very flexible and efficient combination and overcomes some of the restrictions I found in #GraphQL and hence #GraphCool also. The most impressive and important feature of CouchDB is its replication. You can configure it in various ways for backups, fault tolerance, caching or conditional merging of databases. CouchDB and Pouchdb even supports storing, retrieving and serving binary or image data or other mime types. This removes a level of complexity usually present in database implementations where binary or image data is usually referenced through an #HTML5 link. With CouchDB and Pouchdb apps can operate offline and sync later, very efficiently, when the network connection is good.

                I use PhoneGap when testing the app. It auto-reloads your app when its code is changed and you can also install it on Android phones to preview your app instantly. iOS is a bit more tricky cause of Apple's policies so it's not available on the App Store, but you can build it and install it yourself to your device.

                So that's my latest mobile stack. What tools do you use? Have you tried these ones?

                See more
                Adam Neary

                The tool we use for editing UI is React Storybook. It is the perfect place to make sure your work aligns with designs to the pixel across breakpoints. You get fast hot module reloading and a couple checkboxes to enable/disable browser features like Flexbox.

                The only tricks I apply to Storybook are loading the stories with the mock data we’ve extracted from the API. If your mock data really covers all the various various possible states for your UI, you are good to go. Beyond that, if you have alternative states you want to account for, perhaps loading or error states, you can add them in manually.

                This is the crux of the matter for Storybook. This file is entirely generated from Yeoman (discussed below), and it delivers the examples from the Alps Journey by default. getSectionsFromJourney() just filters the sections.

                One other hack you’ll notice is that I added a pair of divs to bookend my component vertically, since Storybook renders with whitespace around the component. That is fine for buttons or UI with borders, but it’s hard to tell precisely where your component starts and ends, so I hacked them in there.

                Since we are talking about how all these fabulous tools work so well together to help you be productive, can I just say what a delight it is to work on UI with Zeplin or Figma side by side with Storybook. Digging into UI in this abstract way takes all the chaos of this madcap world away one breakpoint at a time, and in that quiet realm, you are good down to the pixel every time.

                To supply Storybook and our unit tests with realistic mock data, we want to extract the mock data directly from our Shared Development Environment. As with codegen, even a small change in a query fragment should also trigger many small changes in mock data. And here, similarly, the hard part is tackled entirely by Apollo CLI, and you can stitch it together with your own code in no time.

                Coming back to Zeplin and Figma briefly, they're both built to allow engineers to extract content directly to facilitate product development.

                Extracting the copy for an entire paragraph is as simple as selecting the content in Zeplin and clicking the “copy” icon in the Content section of the sidebar. In the case of Zeplin, images can be extracted by selecting and clicking the “download” icon in the Assets section of the sidebar.

                ReactDesignStack #StorybookStack #StorybookDesignStack
                See more
                Material-UI logo

                Material-UI

                2.3K
                445
                Material UI is a library of React UI components that implements Google's Material Design.
                2.3K
                445
                PROS OF MATERIAL-UI
                • 141
                  React
                • 82
                  Material Design
                • 60
                  Ui components
                • 30
                  CSS framework
                • 26
                  Component
                • 15
                  Looks great
                • 13
                  Responsive
                • 12
                  Good documentation
                • 9
                  LESS
                • 8
                  Ui component
                • 7
                  Open source
                • 6
                  Flexible
                • 6
                  Code examples
                • 5
                  JSS
                • 3
                  Supports old browsers out of the box
                • 3
                  Interface
                • 3
                  Angular
                • 3
                  Very accessible
                • 3
                  Fun
                • 2
                  Typescript support
                • 2
                  # of components
                • 2
                  Designed for Server Side Rendering
                • 1
                  Support for multiple styling systems
                • 1
                  Accessibility
                • 1
                  Easy to work with
                • 1
                  Css
                CONS OF MATERIAL-UI
                • 36
                  Hard to learn. Bad documentation
                • 29
                  Hard to customize
                • 22
                  Hard to understand Docs
                • 9
                  Bad performance
                • 7
                  Extra library needed for date/time pickers
                • 7
                  For editable table component need to use material-table
                • 2
                  Typescript Support
                • 1
                  # of components

                related Material-UI posts

                Adebayo Akinlaja
                Engineering Manager at Andela · | 30 upvotes · 3.4M views

                I picked up an idea to develop and it was no brainer I had to go with React for the frontend. I was faced with challenges when it came to what component framework to use. I had worked extensively with Material-UI but I needed something different that would offer me wider range of well customized components (I became pretty slow at styling). I brought in Evergreen after several sampling and reads online but again, after several prototype development against Evergreen—since I was using TypeScript and I had to import custom Type, it felt exhaustive. After I validated Evergreen with the designs of the idea I was developing, I also noticed I might have to do a lot of styling. I later stumbled on Material Kit, the one specifically made for React . It was promising with beautifully crafted components, most of which fits into the designs pages I had on ground.

                A major problem of Material Kit for me is it isn't written in TypeScript and there isn't any plans to support its TypeScript version. I rolled up my sleeve and started converting their components to TypeScript and if you'll ask me, I am still on it.

                In summary, I used the Create React App with TypeScript support and I am spending some time converting Material Kit to TypeScript before I start developing against it. All of these components are going to be hosted on Bit.

                If you feel I am crazy or I have gotten something wrong, I'll be willing to listen to your opinion. Also, if you want to have a share of whatever TypeScript version of Material Kit I end up coming up with, let me know.

                See more

                I just finished tweaking styles details of my hobby project MovieGeeks (https://moviegeeks.co/): The minimalist Online Movie Catalog

                This time I want to share my thoughts on the Tech-Stack I decided to use on the Frontend: React, React Router, Material-UI and React-Apollo:

                1. React is by far the Front-End "framework" with the biggest community. Some of the newest features like Suspense and Hooks makes it even more awesome and gives you even more power to write clean UI's

                2. Material UI is a very solid and stable set of react components that not only look good, but also are easy to use and customize. This was my first time using this library and I am very happy with the result

                3. React-Apollo in my opinion is the best GraphQL client for a React application. Easy to use and understand and it gives you awesome features out of the box like cache. With libraries like react-apollo-hooks you can even use it with the hooks api which makes the code cleaner and easier to follow.

                Any feedback is much appreciated :)

                See more
                Cypress logo

                Cypress

                2.4K
                115
                When testing is easy, developers build better things faster and with confidence.
                2.4K
                115
                PROS OF CYPRESS
                • 29
                  Open source
                • 22
                  Great documentation
                • 20
                  Simple usage
                • 18
                  Fast
                • 10
                  Cross Browser testing
                • 9
                  Easy us with CI
                • 5
                  Npm install cypress only
                • 2
                  Good for beginner automation engineers
                CONS OF CYPRESS
                • 21
                  Cypress is weak at cross-browser testing
                • 14
                  Switch tabs : Cypress can'nt support
                • 12
                  No iFrame support
                • 9
                  No page object support
                • 9
                  No multiple domain support
                • 8
                  No file upload support
                • 8
                  No support for multiple tab control
                • 8
                  No xPath support
                • 7
                  No support for Safari
                • 7
                  Cypress doesn't support native app
                • 7
                  Re-run failed tests retries not supported yet
                • 7
                  No support for multiple browser control
                • 5
                  $20/user/thread for reports
                • 4
                  Adobe
                • 4
                  Using a non-standard automation protocol
                • 4
                  Not freeware
                • 3
                  No 'WD wire protocol' support

                related Cypress posts

                Kamil Kowalski
                Lead Architect at Fresha · | 28 upvotes · 4.1M views

                When you think about test automation, it’s crucial to make it everyone’s responsibility (not just QA Engineers'). We started with Selenium and Java, but with our platform revolving around Ruby, Elixir and JavaScript, QA Engineers were left alone to automate tests. Cypress was the answer, as we could switch to JS and simply involve more people from day one. There's a downside too, as it meant testing on Chrome only, but that was "good enough" for us + if really needed we can always cover some specific cases in a different way.

                See more
                Robert Zuber

                We are in the process of adopting Next.js as our React framework and using Storybook to help build our React components in isolation. This new part of our frontend is written in TypeScript, and we use Emotion for CSS/styling. For delivering data, we use GraphQL and Apollo. Jest, Percy, and Cypress are used for testing.

                See more
                jQuery logo

                jQuery

                191.9K
                6.6K
                The Write Less, Do More, JavaScript Library.
                191.9K
                6.6K
                PROS OF JQUERY
                • 1.3K
                  Cross-browser
                • 957
                  Dom manipulation
                • 809
                  Power
                • 660
                  Open source
                • 610
                  Plugins
                • 459
                  Easy
                • 395
                  Popular
                • 350
                  Feature-rich
                • 281
                  Html5
                • 227
                  Light weight
                • 93
                  Simple
                • 84
                  Great community
                • 79
                  CSS3 Compliant
                • 69
                  Mobile friendly
                • 67
                  Fast
                • 43
                  Intuitive
                • 42
                  Swiss Army knife for webdev
                • 35
                  Huge Community
                • 11
                  Easy to learn
                • 4
                  Clean code
                • 3
                  Because of Ajax request :)
                • 2
                  Powerful
                • 2
                  Nice
                • 2
                  Just awesome
                • 2
                  Used everywhere
                • 1
                  Improves productivity
                • 1
                  Javascript
                • 1
                  Easy Setup
                • 1
                  Open Source, Simple, Easy Setup
                • 1
                  It Just Works
                • 1
                  Industry acceptance
                • 1
                  Allows great manipulation of HTML and CSS
                • 1
                  Widely Used
                • 1
                  I love jQuery
                CONS OF JQUERY
                • 6
                  Large size
                • 5
                  Sometimes inconsistent API
                • 5
                  Encourages DOM as primary data source
                • 2
                  Live events is overly complex feature

                related jQuery posts

                Kir Shatrov
                Engineering Lead at Shopify · | 22 upvotes · 2.4M views

                The client-side stack of Shopify Admin has been a long journey. It started with HTML templates, jQuery and Prototype. We moved to Batman.js, our in-house Single-Page-Application framework (SPA), in 2013. Then, we re-evaluated our approach and moved back to statically rendered HTML and vanilla JavaScript. As the front-end ecosystem matured, we felt that it was time to rethink our approach again. Last year, we started working on moving Shopify Admin to React and TypeScript.

                Many things have changed since the days of jQuery and Batman. JavaScript execution is much faster. We can easily render our apps on the server to do less work on the client, and the resources and tooling for developers are substantially better with React than we ever had with Batman.

                #FrameworksFullStack #Languages

                See more
                Ganesa Vijayakumar
                Full Stack Coder | Technical Architect · | 19 upvotes · 5.5M views

                I'm planning to create a web application and also a mobile application to provide a very good shopping experience to the end customers. Shortly, my application will be aggregate the product details from difference sources and giving a clear picture to the user that when and where to buy that product with best in Quality and cost.

                I have planned to develop this in many milestones for adding N number of features and I have picked my first part to complete the core part (aggregate the product details from different sources).

                As per my work experience and knowledge, I have chosen the followings stacks to this mission.

                UI: I would like to develop this application using React, React Router and React Native since I'm a little bit familiar on this and also most importantly these will help on developing both web and mobile apps. In addition, I'm gonna use the stacks JavaScript, jQuery, jQuery UI, jQuery Mobile, Bootstrap wherever required.

                Service: I have planned to use Java as the main business layer language as I have 7+ years of experience on this I believe I can do better work using Java than other languages. In addition, I'm thinking to use the stacks Node.js.

                Database and ORM: I'm gonna pick MySQL as DB and Hibernate as ORM since I have a piece of good knowledge and also work experience on this combination.

                Search Engine: I need to deal with a large amount of product data and it's in-detailed info to provide enough details to end user at the same time I need to focus on the performance area too. so I have decided to use Solr as a search engine for product search and suggestions. In addition, I'm thinking to replace Solr by Elasticsearch once explored/reviewed enough about Elasticsearch.

                Host: As of now, my plan to complete the application with decent features first and deploy it in a free hosting environment like Docker and Heroku and then once it is stable then I have planned to use the AWS products Amazon S3, EC2, Amazon RDS and Amazon Route 53. I'm not sure about Microsoft Azure that what is the specialty in it than Heroku and Amazon EC2 Container Service. Anyhow, I will do explore these once again and pick the best suite one for my requirement once I reached this level.

                Build and Repositories: I have decided to choose Apache Maven and Git as these are my favorites and also so popular on respectively build and repositories.

                Additional Utilities :) - I would like to choose Codacy for code review as their Startup plan will be very helpful to this application. I'm already experienced with Google CheckStyle and SonarQube even I'm looking something on Codacy.

                Happy Coding! Suggestions are welcome! :)

                Thanks, Ganesa

                See more