Product Manager | Fullstack Unicorn | Coder | Blogger | Speaker | Sketcher | Entrepreneur... err 🤔 and more 🙃
This article will detail my journey from a Full Stack Engineer to Startup founder over the course of 10 months. Throughout this article I’ll explain the rationale behind choosing each part of my stack and how it played out in the end.
So strap in, it is going to be a long yet fun article!
Well it took a couple weeks to get a clean pitch drafted so I’ll lead with that.
skillShack(⚡); is a community for software professionals looking to share the projects they are working on and get feedback. From side projects to startups!
With “skillShack(⚡);” I wanted to build a platform for developers to share the projects they are working on, and for those stuck in tutorial hell provide a curated list of challenges that can be built into projects to put their skills to use.
It has been my firm belief since the start that you can only get better at Software Development by actually DEVELOPING SOFTWARE (obvious right ?) and yet most people engage in endless sprints of watching tutorial after tutorial to add new buzz words to their Resumes. Most coding centric platforms online have catered to the problem solving aspects of programming, which while giving you a good understanding of the fundamentals of the language and engaging your intellect have diminishing returns after a while.
So I set out to build this platform with hopes of providing a safe space for developers to share their projects, get feedback from the community and learn from one another.
Once I wrote down all the features I would want to make the experience truly unique, I set out to finalise a tech stack. I needed the following attributes:
Easy to Scale and Deploy
A Good ORM with a strong API and support for formatted output on Raw Queries.
React on the frontend (it’s 2021 or 2022 by the time you read this)
Excellent SEO Support
PWA Support
Admin tools that were served separately from the main website
Social Authentication
GitHub Integration so that users can link their repositories.
For each requirement I put together a list of possible technologies/frameworks.
As stated earlier SEO was crucial for me, and with create-react-app you subscribe to Client-Side Rendering which will not play well with Web Crawlers of Search Engines (they do not execute JS).
Next.js supports SSR(Server Side Rendering), SSG (Static Site Generation) and ISR (Incremental Static Regeneration). I’ll summarize each in simple terms below:
SSR: Essentially serves documents with all the components rendered and populated with necessary data (from APIs). This way a bot can see all the info without the need for JavaScript execution. This makes serving pages with no real time updates like Blogs, Profile data etc simple and allows for good SEO.
SSG: It serves purely static pages (No API data), and offers good SEO at the same time. Useful for things like documentation.
ISR: It’s like SSR but it periodically refreshes the static Pages with new API data. Useful for things like blogs and profiles where updates may not be frequent but do happen and must be reflected.
Bonus: Next.js and Vercel have the perfect ecosystem.
It couples perfectly with Next.js, its served as a serverless function via Next.js which fully supports them and Vercel does too in production, so no extra configurations. You can even remotely monitor the function and check for errors through Vercel. It is perfect in every way, you should just look at their website to learn more.
The docs were simple and I was able to setup Google and GitHub authentication in under an hour (had to wait for Google to sync callback urls).
I started the project before the Tailwind hype train hit its peak. And I did eventually try it on another project, but it’s not my kind of thing. I’m very good at pure CSS already so I went with material-ui, it comes with a good set of components out of the box and a few more from other community made packages like treasury, pickers etc.
It comes with a good set of tools out of the box it makes use of material-ui (so easier to customize and share components). Plus you can easily assign roles and give restricted access to different aspects of the App.
Express has been around since forever and it is pretty much the goto for most people. I added a few packages like express-sequelize-crud so that I could allow my admin tools to query it easily without the need for more endpoints. Secured all the endpoints with JWT authentication and setup Role Based Permissions.
This project was going to have a lot of inter linked tables, so No SQL was not going to cut it. I also needed support for JSON documents to store certain nested data (Resumes). PostgreSQL also supports Full-Text Search (FTS) out of the box which made it easier to build a feature rich Search option.
Sequelize was good, it supported TS_Vectors out of the box which was necessary for me to build FTS supported documents. And the support for formatted Raw Queries made writing joins simpler (kind of a pain doing it through the ORM’s native API).
Merge a Pull Request to main to Trigger GitHub Actions.
Build Preview Deployments for the admin and main website on Vercel.
Once the Preview build is built successfully, promote it to production. (I get notifications for each step on Slack thanks to a sweet Slack Integration).
In parallel a docker image is created with contents of the backend code and pushed to my EC2 instance, where its run with pm2. A script then performs necessary database migrations via sequelize-cli.
It was a great journey building out the whole project by myself, I learnt a lot of thing along the way including Canva and Figma. Spent a lot of time binging YC Startup School videos to figure out my pitch, website content. I also tweeted my entire journey on Twitter, which was great because I got to connect with a lot of cool people.
I’m excited to close this article by saying skillShack(⚡); is live at skillshack.dev!
Product Manager | Fullstack Unicorn | Coder | Blogger | Speaker | Sketcher | Entrepreneur... err 🤔 and more 🙃
Learn & use these 2 languages for 90% of your career and never look back
This article will detail my beliefs on why for most people out there learning these 2 languages would be sufficient, and how you can dive deeper and deeper into them to cater to all your needs. Be it portfolio buidling, your next startup product, these 2 will have you covered. You can basically build a fullstack application by the end of this article by following the resources mentioned.
This will be a long post, so feel free to skim through sections you are familiar with.
In this universe, there are few things that you cannot avoid: Getting Rick-Rolled and getting into a debate over which language/framework one should pick and stick to.
The dilemma of picking a language/framework comes from the fact that the time invested to learn it in the first place is a lot. And the possibility of finally understanding it enough only to realize it cannot do what we wanted to do with it. And finding another that can is what haunts everyone before they pull the trigger.
So why should you listen to me or anyone? The thing is no one has the right answers. All of us are inherently biased towards something. In my case, the only justification I can offer is that I have used these and many more languages/frameworks over the years (almost 15 years now)and I continue to explore new ones as time goes on. And I’ve found myself coming back to these.
JavaScript and Python are well known, and both receive their fair share of praises and criticism. And everything has pros and cons, these two are far from perfect from a purist's point of view. Just think of your favorite TV Show or Movie, there will always be haters, some with valid points too.
Let's list out everything possible with these 2 and the frameworks/libraries I use to make them yield good quality results.
In brief here are my suggestions:
Web: NodeJS (React/NextJS)
Mobile: React Native
Server: Express/Django/FastAPI
Machine Learning: Tensorflow
Database: Mongoose for MongoDB, Sequelize for SQL Flavours
Web development is an easy answer. Everyone who has built a website has used some JavaScript somewhere.
The Classic HTML+CSS+JS: This will always be the easiest way to build a simple website add some Bootstrap, Materialize and you can produce some beautiful and functional websites.
ReactJS: React allows you to do so much more, you still use HTML and CSS but you use NodeJS and you are basically creating User Interfaces that are as robust and feature Rich as an App would be. Its got some good to haves like reusable components (components are like tiny parts of your page that you would like to reuse Ex: a login form) that make development simpler. Plus you can build PWAs (Progressive Web Apps) which are websites that can be used after being installed like a native app from your device (No internet needed after the install).
React is kinda overkill when it comes to building a landing page though.
NextJS: NextJS is based on React, so you end up using a lot of the same principles, however, NextJS supports certain concepts like:
You can click on the links to learn more, in a nutshell, they allow you to fetch data on the server, populate it into the page being sent to the user on a request or fetch it once when the website is being deployed.
This pattern is essential when you want to build Systems like Social Networks where each person has a profile on a path like /users/username and other similar pages that are dynamically generated. Or even blogs where you organize posts by date, categories, etc.
Component libraries and complementary resources: We cannot start this list without discussing component libraries. Component libraries consist of prewritten components like buttons, dialogs, headers, etc that you can reuse in your application and customize to a degree.
material-ui: This is my goto component library of choice. It’s based on Material Design. Offers excellent theming options and if you are planning to build a PWA you can pass off your app as an actual Android app with similar UX.
chakra-ui: Offers the same functionality as material-ui but has a different aesthetic you are not losing anything by using the other. I like chakra-ui’s aesthetic more but am deeply invested in material-ui (just a matter of which library I chose on a whim).
tailwindcss/tailwind-ui: Everyone is talking about tailwind now and frankly it's good the learning curve is different but in the end no matter which you pick you’ll have a good-looking UI. Tailwind-ui however is paid and seems to have more options than the above 2. So go through the page and decide if it saves you time in designing your own components.
styled-components: material-ui actually has adopted styled-components. This gives you more raw control over the CSS you can apply transformations, selectors with ease and reuse them everywhere with options to conditionally theme them. I use styled-components alongside material-ui. It will work with any component library, all you do is modify the CSS properties or add more.
State management: In React we render HTML based on changes to state (variable values assigned/modified by us). This is super handy as React is smart enough to render the exact node that needs to be updated and not the whole page (this is performant). The State can be shared between different components by passing props to child components (This is one way only from the higher level to lower level) (not ideal always).
Context API: This is a built-in API that allows you to pass props in any direction as long as you wrap the components in your context. This is Simple to implement does what it says.
React Redux: This allows you to do more than what Context API offers, it can also pass data in all directions, however, you can maintain one state across the entire App/Website and also your local states on the component level. Apart from this Redux offers actions that allow you to update state directly after executing business logic (API calls, some long async function, etc) without worrying about the asynchronous nature, promises, etc. Redux requires a lot of boilerplate, some people do not like it for this (it is also opinionated) but once you get used to the boilerplate it is very flexible. Go with redux-thunkas your middleware of choice, this makes API call triggered state updates easier.
For NextJS I recommend using next-redux-wrapper you will never face any configuration issues.
Data Fetching/Submission: Every website requires data fetching, be it loading the active number of likes and comments on a post you’re currently viewing or submitting a form.
fetch: This is the built-in API that allows you to get send data across.
axios: It’s functionally similar to fetch but more backward compatible with browsers. I use this by default.
When using Redux, you can call your data fetching code from within a Redux Action and then push the values you get from the request to update your state. Or just assign it local state whenever convenient.
SEO (Search Engine Optimization) is one of the key concerns many developers have when building websites. React by itself uses something called client-side rendering because of which it has terrible SEO however NextJS does not share the same flaw.
next-seo: This module opens you up to every last SEO option on the web, configure this right and your site will be ready to greet search engines.
Building for mobile has always been expensive and challenging, Android and iOS have completely different APIs, different coding environments, and languages not to mention. This is where React saves us again.
Once you learn React, you can apply all the concepts to pick up React Native. It builds apps for Android and iOS from one codebase. React Native has a similar API to ReactJS with a few changes that are obvious certain features that are available to the browser may not be available here (like window ). It's mostly simple and you can reuse Redux, Axios here as well.
react-native-paper: This is the equivalent of material-ui for React Native, you get a good set of components to start with and you can always chain them together with ease,
redux-persist: One of the advantages of using React Native is, you’re no longer dependent on browser sessions, you can write data to the device’s memory (yes browsers have localStorage). And have it persist. Redux Persist allows you to persist your redux state across multiple launches.
React Native has always been my go-to for mobile development, and there are very few times that you have to actually go tweak native code to get some things working. You can trust React Native in production.
Now you need someplace your app can call home, someplace it can count on for data. And this data can come from Databases, from a machine learning pipeline, but someone has to glue these pieces together.
Django is like the WeChat to The WhatsApp that its competitors are. (WeChat is a super app that does like 50 different things for context). Django does almost everything:
Routing
Has an ORM (Object Relationship Mapper, more about this later)
Support for Templating (Jinja) to create your own pages to go with the data you send
Django-rest-framework
And more.
Most of all Django has a “Django way” of doing things, so if you follow the way Django does things you won’t go wrong, your services will be secure and robust. This however comes at a cost of a lot of boilerplate that Django generates for you in one command, but you still have to understand a lot of it to get started and do things right.
Django was the first framework I used to build a production application and I liked the way it handled everything. Plus the fact that it's Python, it's easy to connect to your Machine Learning Logic that is guaranteed to be in Python.
FastAPI is very different from Django, it's simpler to start with like you literally write one function and you have a route mapped, call a function, pass the data from the route and you have a working API. It doesn’t get more simpler. Plus you can always extend and add more features to it like ORMs.
I use FastAPI to call my machine learning pipelines and the API itself is accessed by my express services. It is super fast as the name suggests.
Now if you do not need the features Django offers or you do not need to connect any python code (ML/AI) you can stick to NodeJS and use Express.
Now databases are challenging, the queries are hard to make sense of at times, and you are naturally less comfortable testing out new queries, not to mention the query language may not always be what you are comfortable with. ORMs are amazing, they let you skip the native query language for the most part and make querying feel natural to the language you’re using it with.
For Python, nothing is as good as Django’s ORM from my experience. Mongoengine for MongoDB is good for mongo users.
Sequelize is great I’ve used it for 3 projects now and it has never let me down. It comes with a great CLI that handles migrations, the type support is great and it works with all SQL flavors.
sequelize-slugify: Generate slugs (for URLs) from a specific field. Useful when you have things like blogs where titles may be the same but need to be converted into URLs (be unique)
sequelize-paginate: Pagination is a common pattern one must implement when building something, it is simple to do, but sequelize-paginate makes it simple and you don’t have to duplicate code for it to work everywhere.
Machine Learning deserves a whole post for itself, and luckily I’ve one! The gist is, I have used Tensorflow since the 1st stable launch and it has catered to everything I have wanted to build.
keras: They keep including and excluding it in the standard library so just wherever it is use Keras. Keras offers a very high-level approach to building models, where you can essentially create layers as objects and link them together instead of performing all the math operations yourself with Tensorflow.
tensorfboard: Like chrome dev tools for your machine learning endeavors you can monitor in real-time the performance of your model, the resources it uses, the shape of it, and more things most of us do not understand (myself included).
jupyter-notebook: Jupyter is more an interactive environment that I recommend over Python’s IDLE to everyone, and when you configure it well, it's excellent for data science, you can execute code as cells and make changes without rerunning the whole program each time.
So that’s all from my side, be sure to let me know your thoughts in the comments down below 👇. Would love to hear your experiences and suggestions too 😁.
