Tech shopping list
Let’s say that you and your buddies are ready to take on Medium and launch your private platform — Medium for Pet’s blogs. You think there is a market for it and you are prepared to move on it!
Photo by Krista Mangulsone on Unsplash
Let’s review the requirements for our web application:
- Pets have to be able to sign-up and write their stories.
-
Since a lot of pets already have their Twitter presence, we should let them sign up with their accounts.
- Pets need to be able to tag their articles and attach a lot of images to them.
- Medium for Pets should have a home page that will feature all the interesting articles.
- A visitor should be able to read and like articles, as well as recommend to others.
- A visitor should be able to search for articles.
- A visitor should be able to subscribe to receive e-mail notifications about new articles.
It looks like a nice shopping list. Let’s get to it!
First, we need a good web framework. Depending on your experience and knowledge that could be Ruby on Rails, Express (Node.js) or Laravel.The framework that you pick needs to help you develop prototype rapidly. Most of the web frameworks have some package/component system that could help you extend its functionality.
Sign up
Let’s tackle pet authentication system that supports social accounts first. Since we are building a minimum viable product to put out there and validate our assumption, we are going to go for a solution like Auth0 Okta. Practically, we are going to outsource user management, authentication and security to a third party to speed up the development.
Somewhere down the road, we could consider moving to our private, home-brew solution. That could be important if we want to control every aspect of our user’s experience.
Laravel social auth functionality is available through Socialite package. Rails has OmniAuth and Node.js has Passport.js.All of these options are pretty straightforward to implement.
Creation
After login, our pet writers should be able to access the area where they can start creating content. At this point, we would need to decide on our storage tech. Database management systems like MySQL and Postgres are ideal for storing our articles. MongoDB could also work pretty well especially if you pick Node.js as your backend tech.
To make our pet writer’s lives more comfortable, we have to choose a WYSIWYG editor. There are a lot of options there such as TinyMCE, Frola, Summernote but we are going to pick Redactor as it is pretty flexible and extensible with a straightforward API.
Photo by rawpixel.com on Unsplash
Another important feature is the ability to associate images with our articles. When we talk about storage, in that case, we have a few options. We could save pictures on the file system where our app resides. Although it would be a super easy solution, let’s not kid our selves, our app is going to be a huge success, and we have to keep scaling in our mind. We have to treat our image stash as the attached resource and keep our app stateless. Having a stateless app will let us run multiple instances of it and that way give us an opportunity to scale capacity when needed.There are a lot of options for storing images. One of the most obvious is Amazon Object Store — S3. All of our web frameworks have support for uploading images to S3. Laravel, for example, utilizes Flysystem composer package that supports not only AWS but other providers too — Azure, Digital Ocean, Rackspace.For our project, we are going to pick Cloudinary, which is an end-to-end media management solution. They offer image storage, optimization, manipulation and delivery through their CDN gateway which supports Cloudflare, CloudFront … Again we are building MVP so let’s keep it simple and outsource as much as we can for now.
Front-end
On the front-end side of things, we should also start simple. We will use Twitter Bootstrap & jQuery. As our project grows concerning functionality and interactivity, we could consider other, more robust options like React & Vue.js.What is essential in the beginning is to establish efficient and tight front-end build system to help us with asset compilation and optimization. For that, we could use what is available in our web framework. Laravel has Mix and Rails has Sprockets.
Search
As we mentioned before, we would like to give our visitors an option to search through the articles. Although our DB of choice, MySQL, supports full-text search, it is not an optimal solution and not future/feature proof. What we need is something like an Elasticsearch, a search engine with RESTful API.Since we don’t want to manage Elasticsearch cluster just now, we should look at some hosted/managed solutions. Both Elastic ( the company behind the project) and AWS offer their solutions with different options.
Photo by Agnieszka Boeske on Unsplash
To make things very simple, we are going to go for “ES-like” solution. It will give us similar functionality but reduce complexity vastly. Algolia is API based, hosted/managed solution that offers almost all functionalities systems like Elasticsearch offer.
# indexing docs with Algolia could not be simplerconst myIndex = apiClient.initIndex('articles');myIndex .addObject({ author: 'karate_the_dog', title: 'Running around' }) .then(content => console.log(content)) .catch(err => console.error(err));
They also offer drop-in libraries for all popular languages and frameworks. Laravel supports it natively through Scout package.
Subscription
Our readers would like to stay updated at all times. Pets’ captivating stories about their day-to-day life, just cannot be missed.Our reader should be able to subscribe to her favorite author and receive an email notification every time a new article is published.
Photo by Samuel Zeller on Unsplash
How do we deal with email? We don’t! If there is just one thing, you should not be concerned with at this point that would be managing email server. There are many services that you could rely on to help you with the email problem. In this space, we have two types of services: transactional email service and newsletter services. Difference between those is pretty significant. Transactional email service offers reliable sending of email messages through their APIs. They also provide simple statistics. Newsletter services give you much more. They offer an end-to-end solution for managing subscriptions and email campaigns. Again, what we are trying to build is a simple feature, and we want to keep things simple at this stage, so we are going to opt-in for transactional email service like Mailgun.
curl -s --user 'api:key-3ax6xnjp29jd6fds4gc373sgvjxteol0' \https://api.mailgun.net/v3/samples.mailgun.org/messages \-F from='Karate the Dog <[email protected]>' \-F to='[email protected]' \-F subject='Hello' \-F text='My new article is out!'
Picking this option, we have to be prepared for dealing with a pain known as responsive email templates. But luckily there are few good options there. Laravel out of the box supports responsive email templates for transactional messages. If you are using a different framework, Mailgun got you covered with their solution https://github.com/mailgun/transactional-email-templates.
Check out
We did it! We have all the tech we need to start building our application! Outsourcing all not essential tech to a 3rd party, we can focus on things that are important — what makes our startup unique. Treating all services mentioned above as attached resources let us quickly scale up our application. But not only that, our application core and business model are separated from the infrastructure. Moving forward, we will have a pretty clear path we can take to make our startup successful (at least when the tech is concerned).
Next time we are going to look at some of the best practices concerning the quality and security of our application. We are going to pick hosting and development environments and talk about deployment strategies. And of course, finally, we are going to talk about this little thing called mobile!
Now fire up your editors and let’s start writing code!
Part 2 of our journey: Collaboration and quality.
Thanks for reading! If you enjoyed this story, please click the 👏 button and share to help others find it! Feel free to leave a comment 💬 below.Have feedback? Let’s be friends on Twitter.