Hi I am Siddhant Jain , a Software developer and a first time Maker! I am documenting my progress on building a Project as a way to keep myself accountable and in hopes of maybe this will help someone starting out as me.
It’s been quite some time since i documented my progress, as i have been busy coding and building the website. Now that it’s completed check it out: https://devkit.in/
Let’s get started!
In my previous post I shared the idea which is as following:
Devkit is a platform where Startups can discover Tools/ Services/ Api’s to get leverage on their business. Example if you are creating a Superstar SAAS business then focus on your core product and leave the handling of complex in-app subscription and Payments collection logic to a service like RevenueCat (https://www.revenuecat.com/). Devkit will show you all the different options, their features and their pricing options, so you canmake the best decision.
For a much detailed explanation check this out ->
Design :
After the idea the first step was to create the design of the website. We all know how important a Landing Page is to your business. The best Landing Pages always tell a story and their anatomy is something like this:
- Start of With a Value Proposition: 90% of people visiting a landing page will leave in 10 seconds, so you need to capture their attention.
- Social Proof : It makes the user trust you more as a service. Showing Testimonials or the Logos of companies using your product is a great way to do this.
- Benefits : BENEFITS is not equal to FEATURES. Features are service centric whereas BENEFITS are what the user will gain from using your product. Example: Your product is an automation tool , so your features can be to Link Git and do a continuous deployment, but the Benefit for the user is to Save Time doing deployments by automation.
- Call To Action Button : This is what you ultimately want users to do. Example a “Try our Service” button.
As the landing Page above was getting really long we decided to shorten it by squeezing the benefits into one screen.
Here we were experimenting with the concept to directly show the services Page to the Users, with some filter categories on top. We actually ended up liking it more then the Landing Page approach.
Here I have shamelessly copied twitter’s night mode Stylesheet and used it to transform the ugly looking design into this one.
After these iterations we finally made a design that would be functional and looks great ✌️.
Time to Code :
After the design was ready, I started developing the UI with HTML, css and plain javascript as i knew using a framework like react would take a longer time to implement. I made some mistakes which i want to share here and some free advice because why not?
Using css grids :
I used to be bad with css, so when i learnt about the grid layout, i was thrilled by the sheer simplicity and ease of using it. So i quickly built a prototype with some basic features, but to my horror when i ran it in other browsers the support for grid was minimal or not there at all. I took my lesson and used flexbox model instead.
Bootstrap is a life saver :
Using Bootstrap helped me greatly as i didn’t need to write any logic to show or hide popups, modals or closing and opening accordions to name a few. Also using it’s column structure i was able to easily create a mobile responsive website.
Vanilla Javascript? Maybe not:
i started out with vanilla javascript, as i wanted to use a minimal amount of libraries. But when it comes to DOM manipulation , javascript syntax becomes really long and tedious. I shifted to jQuery and it gave a boost to my productivity.
Learn Git :
Take some time out to learn git, atleast the basics like merging or creating a pull request, developing on branches etc. If you are working in a team then this will really save you time and hassle.
Pre Launch Work :
Before Launching on to platforms like Product Hunt, we thought to do some Pre Launch work to get some traction.
To do that we posted on Maker’s Chat in Product Hunt and got some signups and a few forms filled. Also we are regularly adding new services each day and tweeting to their pages and founders about it. You’ve got to do it shamelessly 😞 and consistently!
Next Steps :
This week we will be launching on Indie Hackers, reddit and Product Hunt. I will keep you guys posted on our progress . Time to prepare for the Launch! Bye 👊
