Hello everyone, my name is Vlad, and I have created my own IT startup with just $100. I have always wanted to test my abilities and prove to myself what I am capable of. I wanted to see if I could go from creating an idea, designing the UI/UX, and developing the frontend and backend, to launching the product and marketing it. To provide some context, let me briefly describe my background. At the age of 14, I became fascinated with web development because I had a Counter-Strike team, and we needed a website to register for tournaments. As I maintained the website, I also delved into the art of using Photoshop. I began monetizing the site and explored ways to promote it. Moving forward, I attended university where I extensively wrote code in languages such as C++, Python, and C#. I developed my own neural networks, programmed robots, and tackled algorithms and data structures. During that time, I and my friends co-founded an event startup that helped users stay updated on schedules, changes, and notable speakers. I was responsible for UI/UX design and frontend development. It was during that period that I studied my first design methodologies: Google Material Design Guidelines and Apple’s Human Interface Guidelines. For my thesis, I worked on a project that involved fitting furniture using augmented reality on Swift. Later on, my partners and I established a 40-person IT outsourcing company where I served as the CTO and kept pace with technology stacks across JS, TypeScript, React, Vue, PHP, Python, Node.js, and React Native. With all the experience I had accumulated, I was eager to apply it to creating my own product. Choosing an Idea The plan was to create a product that: Would be beneficial for business owners. Could distribute itself without requiring my time and effort. Would have a monthly subscription (as extensive research indicates that this model is the most viable). Could be developed without external investments, utilizing only my own resources. Two ideas were considered: Developing a mobile application for Android and iOS. However, I discarded this idea immediately as the mobile app market is highly saturated. To achieve success, one needs to offer a truly exceptional product that surpasses enterprise competitors or secure significant investments. Developing applications for SaaS marketplaces such as Ecwid and Shopify. These platforms enable users to create an online store with just a few clicks, without any programming knowledge. I chose to pursue the development of applications for marketplaces because I already had experience in this field, albeit as a frontend developer and architect. Previously, I had created a smart assistant that enhanced the functionality of stores on both the Ecwid and Shopify platforms. Creation of the Idea I began researching what was popular at that time among users and what generated traffic for owners of online stores. The answer was obvious: social media. The success of a brand depends on its popularity in social networks and various business metrics, such as GMV, CMR, CM, and CLV. I realized that small business owners spent a lot of time managing their social media accounts, while medium-sized business owners invested a considerable amount of money and effort in hiring SMM specialists. To conduct research, I explored the app stores of Ecwid and Shopify. I found that there were similar applications available in Shopify, and in order to surpass the competition, I would need to create something genuinely superior and invest substantial resources so that merchants would choose my solution. I decided against that idea because I didn’t want to dive into video content creation or use neural networks for generating textual content. My goal was to develop a basic functionality that could solve real business problems. So, I turned to the Ecwid app store and discovered that there were hardly any competitors in the social media category. This was a win — merchants were seeking assistance with their social media management, and this is where they were waiting for a solution. Designing There are numerous insightful books written about project planning and design that can aid in designing one’s own project. However, after many years of working in IT, I have developed my own design principles that are quite simple and allow for quick design of small and medium-scale projects. All you need is a pen and a notebook. Start by listing the Actors that will be present in the system. Describe the functionality for each actor in the form of a list. Based on the functionality, design the layouts (this can be done in a notebook). Let’s delve into the design process using the example of an Instagram Autopost application. Actors in My Project — shop owner Merchant — a potential buyer on Instagram User The Functionality of Each Actor Prototyping In light of the information provided, it’s clear that I will be developing an administrative panel for merchants integrated with Ecwid, along with a post-publication service. The application will comprise the following key components: : This serves as an informative landing page where users can view their connected Instagram accounts and a list of their marketing campaigns. Dashboard Page : The first page users encounter after installing the application. Here, we provide a brief explanation of how to connect their Instagram account and configure their settings. Connect Instagram Page : This page features a form that allows users to input textual descriptions, set posting frequency, specify whether promotional codes need to be generated, select product categories from which items will be extracted, and view a post preview. Create/Edit Campaign : A helpful widget designed to guide users through the application’s processes and functionalities, facilitating their understanding of its operation. Tutorials Widget Armed with a pen and paper, I’ve sketched out a preliminary layout for these pages. Having a visual representation at hand greatly aids in the development of the application. It simplifies the design of both the frontend and the backend components and informs the database structure. This approach has proven valuable to me on numerous occasions. Welcome Page This is the first page users encounter, and our aim is to provide a comprehensive step-by-step guide on what they need to do. The page features a concise information block, simple graphics, and a single button for the primary action: connecting their account to the application. Additionally, we’ve included an onboarding widget on this page. Its purpose is to explain the process in detail. Let’s break down the elements of this crucial introductory page: : At the top of the page, you’ll find an information block. This block provides users with a quick overview of what they can expect and the benefits of connecting their account to our application. Information Block : To enhance user understanding, we’ve incorporated straightforward graphics. These visuals offer a visual representation of the steps they’ll be taking. Visual Aids : Prominently placed beneath the information block there is the main action button. Its purpose is clear — users click here to begin the process of connecting their account to our application. Action Button : To make the onboarding process as smooth as possible, we’ve integrated an onboarding widget. This widget serves as a virtual guide, walking users through each step they need to follow. It simplifies the entire process and ensures that users feel confident about proceeding. Onboarding Widget Dashboard Page The Dashboard page serves as the central hub for merchants, providing them with a comprehensive overview of our application’s functionality while ensuring timely updates on any issues and offering valuable activity statistics. Let’s break down the key components of this page: : In the first block, users can easily check the status of their connected account. If an account’s token has expired or if there are access configuration problems, this section will display the real-time status along with a description of the issue. Account Status : This block displays a list of connected Facebook pages or Instagram accounts. For each page, it indicates whether the application has access and whether there are any posting issues. This information helps users manage their social media presence effectively. Connected Pages : An essential aspect of successful posting is aligning with the store’s time zone. Users can view their current time zone in this block and have the option to adjust it to the time zone preferred. For instance, a store owner in London may see 21:00 GMT+1, while in New York it’s 16:00 GMT-4. This feature ensures posts are scheduled at the optimal times for their audience. Time Zone Management : The Campaign block is a pivotal component, offering users insights into their ongoing campaigns. Users can quickly check which campaigns are active, their status, the destination page for posting, and initiate quick actions to start or stop campaigns. Additionally, users can access the campaign creation and editing forms directly from this section. Campaign Overview The Dashboard page is designed to empower merchants with a clear understanding of their application’s performance and control over their marketing campaigns. By presenting crucial information in an accessible format, it streamlines the user experience and facilitates efficient management of their online presence. Create/Edit Campaign The campaign creation and editing page with its abundance of forms and fields can appear daunting to those not well-versed in its intricacies. To streamline the user experience, we’ve organized the page into logical blocks, introduced helpful tooltips for each section, and included a post-preview feature. Let’s dive into the various elements of this page: : Recognizing the need for dynamic and engaging content to prevent user fatigue and potential unsubscribes, we’ve implemented a solution that randomly selects templates from pre-defined text options. 1) Variations for Textual Descriptions The “Add Template” button allows users to add text variations, each represented by a number for easy selection. In the text editor, users can insert constants like {{PRODUCT_LINK}} to automate links to products. A quick-access “Insert Constant” button provides easy access to essential variables, such as product name, product link, product description, and price. : To enhance user comprehension of how their changes affect the appearance of the post, we’ve introduced a “Preview” block that replicates the design of Facebook and Instagram posts. 2) Preview Block Changes made to the active template in Block 1 automatically update the text in the preview. For instance, if a user includes {{PRODUCT_LINK}} in their message, they’ll see the final link in the preview. The post displays the product image, and if the user has enabled discount generation, the promotion code will be superimposed on the image. Switching the posting account in Block #5 will also update the account name in the preview. : This block allows users to personalize campaigns and add distinctive features. For example, users can assign unique names to their campaigns and select categories for posting. 3) Campaign Details : Users can specify the day of the week and time for post-publication in this section. 4) Scheduling Block : In this block, users can choose the account where the post will be published. 5) Account Selection : Users have the option to activate or deactivate campaigns. This feature is especially useful when users want to schedule campaigns in advance or pause ongoing ones. 6) Campaign Activation Checkbox : We provide a modal window with all site categories that will participate in the campaign. These categories are the source of randomly selected products for posting. 7) Modal Window with Categories : Unfortunately, this block is not reflected in the mockups but was added later. Here, users can configure discount and promotion code generation, which can be inserted into the text and overlaid on the product image. 8) Promotion Codes Block By structuring the campaign creation and editing page in this manner, we aim to simplify the process for users, providing clarity and control over their marketing efforts. With logical organization, helpful tooltips, and a real-time preview, we empower users to craft engaging campaigns effortlessly. Design Design development can be divided into 2 parts: Design of the merchant’s administrative panel App card design, advertising promotions, and app icon Admin Panel I did not develop the design of the administrative part, as I will be satisfied with the prototype that we developed earlier. Ecwid API has its own CSS framework, and all I need to do is create a grid and insert ready-made components into it. In addition to simple components, the Ecwid API also has complex components, similar to the following: If you are developing your own product that does not have its own CSS framework, you can use the open-source framework. This framework is known by many and has a large base of components and its own grid. Bootstrap Brand Identity Development Okay, let’s move on to the second part, which is the development of our own style. Yes, I have decided to develop it myself without outsourcing the services of a designer. I could have hired a designer, but I wanted to leave a part of myself in this, as it will be the first point of contact for my users with this application. The first thing the platform for hosting the application requires is a logo. I had an idea of placing the Instagram logo in the center, around which likes, people, and money revolve in their own orbits. The concept of the application is that Instagram is a whole world for businessmen, where millions of people want to learn about your product and use it as soon as possible. This is how the logo came about. It was very helpful for me to have Ecwid’s system of rules and guidelines for creating my logo. I believe that rules and specific frameworks simplify the task by reducing the possible variations of element placement and color usage. App Page In any app marketplace, the top priority is screenshots showcasing the functionality of the application. However, having just functionality is no longer enough. When we enter the App Store, we can see how each app competes for the user’s attention. I set a goal for myself to create informative screenshots that would highlight the benefits of my application in each module. To achieve this, I have decided to combine vibrant colors, concise module descriptions, and module screenshots. I opened Photoshop, created a canvas with a basic size, and applied the Instagram gradient. Then, I added a screenshot of the Instagram account connection module and included a brief description of this functionality. Done. And, of course, soft shadows for screenshots. Product Description Next, it was necessary to provide a product description that would clearly explain to the user what needs the application would fulfill for the merchant. Here, I strived to be honest and sincere with the users. This was before the advent of GPT technologies. Summary This was the first part of the article. In the second part, I will talk about how I developed the backend & frontend and reveal some information about the number of installations and the revenue it brings. In this article, I wanted to share the story of creating a product from scratch, and how one person can come up with an idea and bring it to life. Nowadays, we have so many opportunities for implementation, and I wanted to take advantage of them and create a cool product that would save time for small business owners. If you have a desire to bring your own product to life, but, for example, only have skills in backend development, try creating the design, and writing texts (if you are interested in that). In creating this project, my main goal was not only to make money but also to gain new skills in backend development and design development. And when you reach the end, you will feel a great level of dopamine in your blood, realizing that you can do so much.

Augmentastic || Augmented Reality

My Experience with Creating Frontend and Backend Applications for My Startup

Read My Stories

Too Long; Didn't Read

CTA: Download the FREE AI Productivity Shift report

Building and Launching a Tech Startup Solo: My Story of Turning an Idea Into a Successful Product

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How I Use AI in Frontend Development

10 Lessons Learned From Being An Entrepreneur

5 Lessons I Learnt From Starting A Remote Business

5 Major Mistakes Startup Owners Make After Getting Funded

55 Stories To Learn About Entrepreneur Mindset

How I Use AI in Frontend Development

10 Lessons Learned From Being An Entrepreneur

5 Lessons I Learnt From Starting A Remote Business

5 Major Mistakes Startup Owners Make After Getting Funded

55 Stories To Learn About Entrepreneur Mindset

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps