How we built Magento 2 store in 24 hours and won MageDerby - Magenable / Magento ecommerce consulting, Melbourne

Most people probably don’t believe that it’s possible to build online store on Magento platform in 24 hours. Magento 2 is a complex beast indeed. But that was a challenge of inaugural MageDerby competition. Our team accepted it and captured the trophy. This blog post is about how we made it.

The competition

MageDerby is organized by Len Lorjin. It is a test, can fully functioning Magento 2 store be built in just 24 hours.

07 Feb 2020 at 4 pm all competing teams received a brief and started to build an online store for a fictional luxury brand DeGouges that was in a desperate need of having operational online store as soon as possible.

Magento Community is all about sharing and open source, so important requirement was to use purely open-source components – Magento 2 Open Source itself and any extensions used should be open source. The code that the teams developed has to be released as an open source to Github too.

Our approach

Anyone working with Magento knows that the platform (especially Magento 2) is complex and it takes time to build Magento 2 website. In real life most Magento 2 projects take 3 to 6 months to launch in average. So 24 hours is pretty challenging timeline, almost impossible.

Here is how we managed to do it.

Preparation

While the exact brief was released at the start of MageDerby, broad rules and challenge scope were announced in advance, so it was possible to prepare at some extent. As a preparation we:

Defined technical approach in general. We decided to build a store using MageSuite as a base. MageSuite is a collection of open-source modules enhancing Magento 2. It’s core component is a visual content authoring tool similar to PageBuilder, which is only available in Magento Commerce – paid version of Magento. We have looked into MageSuite for a while and decided that MageDerby will be a good reason to give it a real test drive
Testing production environment. MageDerby stores had to be deployed to MageMojo (Magento specialized hosting provider, they were also a sponsor of the event). We have some experience working with MageMojo, it’s a pretty solid hosting. However we haven’t used MageSuite there and MageSuite has some specific hosting requirements. So we made sure that all that requirements can be met and moreover, tested MageSuite on MageMojo in advance
Planning. Our team is fully remote, based in different countries and time zones. So planning when / who is available was essential. We have also prepared a draft project plan, anticipating what tasks have to be done and who’ll do what
Agreeing on communication tools and methods. 24 hours challenge is a bit different from business as usual. So we decided on what communication tools and methods we will use. Redmine was used as a main project management/issue tracking tool, Slack was a primary communication tool and Skype was used for video conferences.

All that things above helped us to save time during the challenge.

During the derby

After the brief was released and all available team members read it, we had a video conference about how we approach it.

Brief requirements could be split into 2 major groups:

Possible to meet with out-of-the-box functionality in our boilerplate tech stack (Magento 2 + MageSuite), that was ~80% of brief content
Custom development required, remaining 20%

We decided that we focus on the first and if have time will do the 2nd. It is close to real life approach, when you deliver high value-low cost functionality first. Apparently that was the main difference between what we and other teams delivered at the end.

Design

We were fortunate to have a designer in our team, that gave us opportunity to invest in website look & feel and visual product data.

Mage Suite is pretty good for adding different kind of beautiful components to the website pages (carousels, mosaics, teaser images, featured product blocks etc), so we could utilize them to build visually appealing pages quickly. Most customization were changing styles and design assets (images and icons).

As it often happens in real life the product images were not ideal (sub-optimal background, clarify), so we decided that improving them is important. For one product line all product images were the same, so we customized them, making image variations in different background, corresponding with the scent.

We also unified product images dimensions, so they look nice on product listing pages without weird differences and gaps.

Finally, for build your own product line we developed brand new product images that convey the idea of the product

Catalog

Fortunately product data was provided in ready to use format, easy to import in Magento, with just few little things to fix. Not often happens in real life, but this client did his homework here.

We used faceted navigation and defined several attributes (color, scent, size) for filtering products.

Since number of the products was not big (18 in one line, 330 in another) we decided do not use configurable products and have all simple, layered navigation helps to narrow down the choices. That way product range is presented in more obvious way and the UX is better than just have few configurable products.

For the optional requirement (building your own candle) we used Magento bundle product type. Possible customization there would be visually presenting the resulting candle (e.g. half red half blue), but it was quite complex feature, so we set it as the lowest priority in our tasks list.

Security

One of the requirements was to have a secure store. MageSuite helped there again. It includes 2FA authentication extension from MageSpecialist and possibility to use Google ReCaptcha. We configured both.

We also made sure that our store has no obvious vulnerabilities running it through Magereport

Custom features

The brief opened possibilities to build 2 custom features:

Custom product designer or visualization tool (briefly referred above)
Product order limits

Basic product order limits (like you can’t order more than 10 products in one order) is supported in Magento 2 out of the box, but the brief asked for more – have a limit set per customer group per period of time. We have started to work with this functionality, but haven’t finished it in 24 hours. So we ended up just setting Magento 2 out of the box limits per order.

Other things

The website has to sell to US, UK and probably EU. There are number of ways to do it in Magento (from separate websites to just allowing all 3 regions). We decided to keep it relatively simple and built one website one store one storeview, plus added a currency switcher to website header, so people from different regions can see prices in their local currency.

We spent a bit of time on basic SEO, configuring things like main pages and default titles and meta-tags, but nothing too complex.

Magemojo supports number of performance improvement technologies, including Redis and Varnish. We have enabled all what was available and did few other tweaks. Performance score (26 mobile, 66 desktop in Google Pagespeed) can be definitely further improved, but it is time consuming work.

The result, our version of DeGouges online store

You may find resulting website at https://7fbstwqq9z1nphky.mojostratus.io

DeGouges MageDerby website built by Magenable screenshots

Probably not the best Magento 2 website in the world, but it’s not a bad result for 24 hours. It is mobile friendly, reflects the brand identity, has all products listed with decent images and have number of nice additions like stressing products that are eligible for free shipping and hose that are almost out of stock

MageDerby point was proven, it is possible to build Magento 2 website in 24 hours if you have the right team, technologies and motivation.

At the Saturday afternoon in London or Sunday night in Melbourne the time was over, so we and all other teams stopped the work and waited for the decision of the judges.

Judgement day

Mage Derby attracted a solid panel of judges, including such a legend in Magento world as Vinai Kopp.

I was pretty tire, so took a nap. 4.45 am my time I was waken up by a call from Len. The judges made their decision. You may watch the video below to see and hear it.

Magenable team won the challenge! Appeared that we did better than other teams meeting the brief requirements in UX, marketing and security. So our investments in design and content paid off.

The team

Alexander Levashov – project management, content
Alexey Kurnosov – devops
Andrey Sidelnikov – front-end
Dmitry Shkinin – back-end
German Lyutajev – design

Final words

As MageDerby shows it is possible, while hard to build Magento 2 operational website in just 24 hours. With right processes, right team and tools it is doable.

Not sure, would we do it in real life for a real client, but as an exercise it was a great experience. We probably wouldn’t progressed there without MageSuite, so big kudos to people behind this open-source solution. It is definitely something we plan to use in the future for real projects as a solid alternative to PageBuilder.

Thanks to Len for organizing this event, sponsors who supported Mage Derby and judges who contributes their weekend time!

If you are curios of the code of all teams, you may find the reference to it here

Finally, if you need a Magento 2 online store – contact us.