• Chapter 1 - Framer Crash Course

• Chapter 2 - Login and Setup Framer

• Chapter 3 - Frames Stacks and Grids

• Chapter 4 - Typography Color and Styling

• Chapter 5 - Bonus Design Course

• Chapter 6 - Components in Framer

• Chapter 7 - Responsive Design

• Chapter 8 - Content Management System (CMS)

• Chapter 9 - Effects Animations and Transitions

• Chapter 10 - Marketplace and Templates

• Chapter 11 - Publishing Website

https://www.youtube.com/watch?v=RcGfLSjpR5Q

Youtube Video: Framer Crash Course 2026

Follow and support me:

Special thanks if you subscribe to my channel :)

• 🎞️ Youtube

• 🐦 Twitter

I needed to pick a good database for this SaaS. As the title suggests, I ended up picking MongoDB, however how I came to this conclusion took some research.

Youtube Video: Creating a SaaS Database The SaaS: Enhance AI MongoDB Atlas: https://www.mongodb.com/cloud/atlas/

Introduction

This will cover what I learned by picking and implementing MongoDB Atlas for my project and my thoughts. If you're expecting something technical, this won't be for you.

• Defining the scope and requirements
• Picking databases
• Deciding local vs cloud database
• Setting up the database schema
• Creating the API routes

Defining the Scope & Requirements

The first thing you want to consider is your goal for a project. Mine was to build a startup, in 30 days or less. This means I needed to build fast, and have good documentation whenever I encountered problems.

There was lots of options like firestore, or mysql, however one of the most common startup stacks is called MERN, which is Mongo, Express, React and Nodejs. There are lots of youtube videos on how to set them up (now one more!) and I was quite confident as I had worked with each one of those technologies in the past.

The other requirements was working with JSON objects, which Mongo does quite well as because of the fact that it's a document/collection based database. And finally the fact that it's quite flexible in the fact that it's schema can easily be changed on the fly meant I believe it was a good choice for my startup.

Deciding local vs cloud databases

It's 2021 and soon to be 2022. You are no longer limited to setup an entire production workstation with all items installed, such as a web server, database, files and more. Microservices and cloud services now allow you to distribute all your technologies.

So the question of hosting the database locally or online is an actual decision to make. There are a few advantages and disadvantages to both approaches. Yes you have more control if everything is locally on your machine, but by comparison, having a cloud version of a database means it's accessible anywhere.

As I often swap computers, work remotely, and want more flexibility, I had a look at the cloud version of MongoDb. It's called MongoDB Atlas. I have the option to connect directly to it via my vscode with a plugin, which is quite useful. On top of that, you can scale and grow it with your needs.

Other than that, the setup is exactly the same for connecting it to your project, minus the requirement to install and actually host the database on the machine. This meant I got to save time and effort and simply copy paste the url of the database from Mongo and I was up and running in minutes.

Setting up the Database Schema

Every website and application (hopefully) is unique. However there are some items which remain the same, such as the requirement for users, authentication, etc. I took a few days to plan out how I wanted to structure my database before actually implementing it.

The main difference was the fact that I was using OpenAI, and I wanted to make sure that could help improve my GPT-3 outputs overtime, so I made sure to also implement a history schema. Using express, I setup mongoose as it's one of the easier ways to define a schema, which I could later use in my routes.

Creating the API

With the database picked, the cloud setup, the schema defined, I was able to implement the API with ease.

Most of the requests could be simple GET, POST requests which are then using the findOne command using mongoose with mongo no different to if I was using it locally.

I originally thought I might get some significant delays by using the cloud version of MongoDB, however the server was quite fast and I never had any such delays.

Conclusion

While this was a brief overview of using MongoDB Atlas, it's worthwhile that people try it over the alternative of running up a database locally and manually. You will get the same results with less time and have more flexibility moving forward.

I've done a while video which goes more into depth about this journey but hopefully this gives you a good idea of some of the items I learned during this time.

MongoDB Atlas: https://www.mongodb.com/cloud/atlas/

Youtube Video: Creating a SaaS Database

Follow and support me:

Special thanks if you subscribe to my channel :)

• 🎞️ Youtube
• 🐦 Twitter

Storytelling is a very important skill in life. It is something that everyone does in their own way.

When I first started my youtube and blogging journey, I had no idea that a good story would be the key to success. And I don't just mean success in the terms of having more views on my videos, or likes on my tweets.

Let me explain, when I started taking my online presence seriously, it was just before Covid hit. I was a programmer at home with more free time on my hands and I saw this one article about some person called Florin Pop who had grown his audience from 0 to 30 thousand in a month. I thought to myself, I could do that.

Well, I was wrong and right. I first started writing on my blog and posting tweets and youtube videos. I would share them on Facebook, Reddit, Twitter, anywhere really to get visibility. It worked a little, but honestly, it failed. I would get a few likes, a few views but not much retention any many people didn't come back to revisit new work I did.

It wasn't that I was a bad writer, or that I lacked content, I was putting out great tutorials, going into depth about technical topics, and trying my hardest to put out a level of quality that was on par with other tech blogs.

What I lacked was a different approach to getting my content out there. That edge, that something that would make people want to read my content. What I lacked was a story.

The video that hit it off was when I did a day in my life video. That was my first viral video, and it's because there was a real story there. It was about my own life. But I realised I could apply this in both blogging and other videos.

This is when I started writing my technical posts in a story format. I would tell the story about how I came to write that article, what I learnt, and how it affected me. I would share all the hardships that I overcame to get to the end result. I would share the data that I gathered. I would share all the steps that it took to get to that there.

What makes a good story

Well, here are the main points that I learned to get people interested in my content. These are the things that will make you go viral in your niche.

- Align with your audience.

The story you write has to be something that your audience would enjoy hearing (hopefully). Developers build really awesome things all the time, but often behind closed doors. You want to give them value in your stories. You want to tell them about the work you do, the struggles you overcome. Talk about what you feel you can connect with them on. Make them feel like they are part of your story.

- Make it relatable.

Developers share common problems. Pain points. Frustrations. You can work with that to draw upon humor in your stories too. Look at other similar stories, other people who have done something similar, and take the best elements of their stories.

- Make it human.

Developers are people. So tell people about yourself, your experience. Talk about your failures, but also share your triumphs. Share the data you gathered along the way. Share how it affected you. Tell people what you learnt. The number of times you did something. The mistakes you did. The hardships you overcame.

Storytelling in Technical Writing

The best way to kickstart a story based blog is to start from a real life experience. Look at the common problems you have, like learning a language, or a new skill in a framework, and tell a story about how you overcame them. That will be a story developers can connect with.

- Build the story around a Problem, Solution, and Struggle.

This will help you improve the kind of written or video content you create. This will pave the way to a successful audience and will put you in front of people or companies you might not have otherwise had an opportunity to. And it will help you in other aspects too

Jobs, Pitching and Work

I've told you a story about how I learned the importance of storytelling, but what I didn't tell you was that I used it to get my job. Instead of simply saying the skills I have, when I applied, I told them a story of my struggles and how I overcame them, and how it helped me.

Also, writing a blog that tells a story will help you find clients, find jobs, and yes, even get better work.

If you write a blog, and share it with your audience, and one of those people is the right fit for your skills and career, and they see your blog and connect with it, and they offer you a job, and you accept it. That isn't luck. That is an opportunity created by storytelling.

I started communicating better with my friends about my experiences in life, and with strange ones too.

Conclusion

To create content, you need an idea. To get an idea, you need to ask yourself the right questions. To get the right questions, you need to ask yourself the right questions about your stories. And to get to those right questions, you need to open up and be honest with yourself.

When you ask these questions, look at them as a story. Ask yourself if you would want to read it, be a part of it. Make the story relatable or funny or something that people can connect with. And then share that story with the world.

Do this, and you can go from a just Developer to a Blogger, Storyteller, Educator, and much more.

https://www.figma.com/file/DqvYYgf3kmjhZ0Pj5zMfDh/Storytelling-in-Technical-Writing?node-id=0%3A1

1. Introduction

Building a SaaS application is a difficult task, but it can be simplified with the use of a few common technologies. To begin, let’s break down exactly what a SaaS application is.

A SaaS or Software as a Service is a type of product in which the software is hosted on servers owned by the software developer, rather than the consumer. A SaaS application is designed with the ability to be accessed through the internet, so this software is available anywhere with an internet connection.

There are many benefits of this type of application, including ease of use, access to the most up-to-date version of the software, and an unlimited number of individuals can be using the application at any and much more.

1. Picking a topic
2. Learning OpenAI
3. Registering a Domain Name
4. Creating a Logo
5. Designing a Landing Page in Figma
6. Coding the Website
7. Frontend and Backend development
8. Taking Payments with Stripe
9. Launching it

Picking a topic

For my specific SaaS, I wanted to build a tool using AI, specifically for developers. With tools like natural language Regex commands, or fixing code, or more. I researched a number of different machine learning providers, as all the top companies have options. Microsoft, Amazon, Google options looked much too complicated and difficult to setup, and I really liked OpenAI latest GitHub Copilot system, so I decided to research and try out OpenAI.

Learning OpenAI

OpenAI actually not that easy to get access to. It's got a waitlist, just like Co-pilot. However I did manage to get access and was able to start taking a look at what I could build in their playground system.

Since it was the first time using AI, I was learning while practicing, but that's one of the best ways to improve as a developer. I was able to get my regex natural language system up and running, so decided to try and continue building my SaaS.

Registering a Domain Name

As a developer, I own many domain names, a lot of them not in use. Time to register another! I picked a name for the business, subeditor... however I was unhappy with it, so decided to go with Enhance AI. I registered an .ai domain name and now it's time for a logo

Creating a Logo

The logo needs to represent a business, so I was looking for something that focuses on AI and developers. I ended up creating a bunch of shapes and colors for my logo, and since I just wanted to get started, I was happy with it and moved onto the actual design of the landing page!

Designing a Landing Page in Figma

I started out with the colors from the logo, then created a landing page based of that. I always felt that the landing pages these days were too generic and don't provide enough information about a product.

So I put in lots of examples to showcase what the product actually looks like and how it works. This is what I ended up with and I was quite happy with it.

Coding the Website

I used React to build the actual app version of the website, and webflow to build the landing page. Don't judge me for webflow, as it helped me build a page quick and easy based on the UI design I had already created in Figma.

The goal is often getting the job done, and while webflow did that for the landing page, react was needed for the app itself. I implemented things like react router for pages, mobx for the store, and axios for the API.

Frontend and Backend development

With the front-end more or less done, I worked on the backend next, which was a VPS I hosted on Linode running Linux. Since I know bash and a few other commands, I created it myself with express and node.

It hosts the application while connecting to a cloud mongo database to store users, prompts, and more. It also serves the react application which was technically just created react app bundled together.

Taking Payments with Stripe

With the front-end and backend done, I moved onto adding a payment processor, in this case, Stripe. It's one of the easiest to get up and running and their documentation made integrating a subscription-based service quick and easy.

Launch

I'm finally done and can launch the entire application now. I created, I posted on twitter a preview of how it works, and created a youtube video of the journey of creating it. I also wrote this article as a summary of how I did it too!

Feel free to check it out below Website: https://www.enhanceai.ai Twitter: https://twitter.com/EnhanceAI

I did a video about building it as well that you can check out below if you want more information about the journey!

Hope you guys enjoyed this article!

In this tutorial, we are going to check out how to use Twilio together with NodeJs to create SMS messages and receive and respond to them too.

1. Getting started
2. Setting up the server
3. Sending a message
4. Receiving a message

1. Getting Started

You'll need a Twilio account, which you can get using the following link https://twilio.com/ as well as a number that is ready to use.

First, we are going to install the main packages we will use for the nodejs server:

npm install express twilio dotenv --save

These will be used in our first file which will be index.js This file will host our web server.

2. Setting up the server

We are going to configure our server using a dotenv file. This will allow us to use environment variables to configure our server. Create a file named .env and add the following lines to it. Jump into the Twilio Dashboard to get the following details and put them into your env file.

TWILIO_ACCOUNT_SID=
TWILIO_ACCOUNT_AUTH=

We can later access these files in our server. Next, we are going to create a simple express server that listens on port 3000 and replies back with success if a get request is done. This will in in a new file called index.js.

const app = require('express')()
We will apply bodyParser and set the twilio module up next:
app.use(express.json());
app.use(express.urlencoded({
  extended: true
}));
const accountSid = process.env.SIDconst authToken = process.env.AUTHconst client = require('twilio')(accountSid, authToken);
const MessagingResponse = require('twilio').twiml.MessagingResponse

Finally, we will listen to '/' path for any get requests:

app.get('/',(req,res)=>{
res.send('Success!');
})

To run the server we will use node but first we will need to set the port and then listen to it:

const PORT = process.env.PORT || 3000
app.listen(PORT, () => {    console.log('Server listening on port ' + PORT)})

Finally we run the following command in our terminal to listen to the server: node index.js

Then point your browser to http://localhost:3000

3. Sending a message

Now we are ready to send our first message through the Twil server. I've setup a route using /send-message which will call the client from twilio and create a test message to send.

app.get('/send-message', async (req, res) => {
    let response = await client.messages.create({
        body: "I am testing",
        from: "+61480031902",
        to: "+61477789861",
    })
    res.json({
        success: true,
        message: response
    })
})

We can use Postman to make a request to our server. Perform a get request to this route to ensure it sends the message.

4. Receiving a message

We are going to add a webhook into Twilios backend to get this working. Under the number > manage > active numbers, we will select the number we are using. Near the bottom there is a section for webhooks for Messaging. This webhook will listen to SMS's send to the number and server them back to our express server.

I am using ngork to host my domain for the webhook, but if you have your own domain or URL which is public facing, you can add your own. You can find it https://ngrok.com/ so in my case I will add the following:

http://a775605b0374.ngrok.io/sms

Then inside my app, I'll create the code to listen for this webhook, it will be as follows. The message received will be inside req.body.Body which we can console log out, while the output will allow us to send a reply.

app.post('/sms', async (req, res) => {
    console.log(req.body.Body)
    const output = "Testing a reply"
    const twiml = new MessagingResponse();
    const msg = twiml.message(output);
    res.writeHead(200, { 'Content-Type': 'text/xml' })
    res.end(twiml.toString())
})

That's basically it. You can add more features, like a chatbot or something specific inside of this response. I took this to another level, creating a chatbot of shorts which you can check out in the video I created to accompany this tutorial.

It will go into more detail for every single step and how to produce the SMS sending, receiving and communication!

Programmers that don't blog should start right now. You're future self with thank you when your blog helps you getting a better job, earn more money and of course, have an easier time learning new concepts.

I'm not exaggerating when I say that a year ago, I didn't consider blogging a worthwhile venture, more like a waste of time for those who had too much of it. So what did I do with my own spare time, well I would just watch some Netflix, maybe play some games, and waste it away instead of investing it into my future.

What changed?

Well, I decided to give Twitter a go, as I was stuck at home in lockdown. I got the chance to meet some really cool people on there who were in fact much more social than me, but I saw they all were putting out content and blogging consistently.

That's when I ran into my first surprise, I learned they actually made money from blogging.

Now I was interested.

Up to this point, I thought blogging was just something people do casually to talk about their feelings or day. However, I quickly learned that this isn't the case.

Through Twitter, I was able to make friends called Catalin Pit, and Danny Thomposon, and found that when it comes to development, there is so much more to blogging. You can write about languages you learn, or features you create, you're essentially teaching yourself and others about things you learn.

I started to feel like I had made a mistake not blogging earlier.

I'm not going to lie, it's not easy. I am not a wordsmith, and it's hard to come up with something to write about every day. But if you're a programmer, you should be blogging. You should be blogging because it helps you keep track of what you learn, it helps you stay up to date with the latest trends, it helps you get a better job, and it helps you earn more money.

2. How I started

With the lockdown being in effect and having more time on my hands then ever before, I wanted to know more about how I could blog in the software engineering space, and how people were actually using it to make money.

After lots of research in a montage format, I learn three valuable lessons.

1. Most successful developers blog

Take a look at Dan Abramov, the godfather of react, who blogs about, well, react haha. Or Flavio Copes, who also blogs about all things programming from JavaScript to Python and everything in between. They've been doing it for years, and examples like Flavio have done it literally everyday for the last several years. That's absolutely insane.

But it's not like they are writing up essays. They are just showcases snippets of that they have learned or interesting tips and tricks about NodeJS or other languages.

So why are they doing this, well that brings me to the second point.

2. Blogging is a way to teach learn and showcase your skills

I'm not saying you have to know everything, but blogging is a great way to help you remember what you've learned. It also helps others who are learning the same things as well.

For example, I started posting some of my tutorials on react and react native.

3. By showcasing their skills, they get opportunities for new jobs, affiliate marketing, and much more.

I'm not talking about money from ads like Google Adsense, but I am talking about how you can make money through blog sponsorships.

So what does this mean? Well, it means you can actually get paid to write about the things you are interested in.

For example, Catalin Pit has been doing a series of blog posts called "React Crash Course" where he has been getting paid to talk about ReactJS. It's really cool because he is able to learn more and share what he's learned with others at the same time.

This is one of the reasons why I decided that now was the time for me to start blogging as well!

3. Start!

So I started blogging, the first step was surprisingly easy but you need to make sure you find a good blogging platform. There were lots of options out there, like medium, which was already established for writing articles, but locked you into their platform and wasn't very coder friendly, especially for code snippets.

I also saw other places that let you post like devto, but those aren't really for blogging, and more akin to things like reddit.

The option I decided on was Hashnode

For those who haven't heard about it, it was one of the newer platforms, and this means that you get the opportunity to ride the wave of growth that comes along with that. If you want to get noticed, I would join in now because I can see this platform becoming as large as freeCodeCamp and other communities specifically for developers.

And the reason this was possible is because they combine of both your own personally blog, alongside a community of developer blogs that show up as a feed. This means that your articles will be recommended to others while also remaining your own. I wanted to give them a try.

Let's see what makes them different than other options.

Firstly they are free, so you don't have to worry about spending extra money, but they are also open, letting you own and even export all your data at any point, even if they were to shutdown in the future, which other places like devto or medium don't allow.

You get access to build your own newsletter collection, so each time you post, you grow your network which you could always use in the future to sell produces and services to!

You can also attach your own custom domain name to their and get your blog up and running in minutes. So, let's actually do that right now.

I registered the domain adriantwarog.com recently, and wanted to see how this works. The first step was to setup the DNS to point towards hashnode, and then, that's it!

This was a pretty quick and simple setup, faster than having to manually set something up in Wordpress or other providers where you don't actually own your own domain.

So let's write our first blog, which is why we should blog, this very article, inception so to speak! (and this blog, is that article!)

It took me about 2 hours to write this blog post, which is less than half of the time I spend on Netflix or wasting time daily.

Conclusion

I'll be posting the video for this article on Thursday where I'll go more into depth about my journey in content, blogging and why I think it's important, but hope you enjoyed this sneak peek!

If you haven't already, sign up to Hashnode and try writing your first article, your future self will definitely thank you!

https://hashnode.com/

Programmers That Don't Blog Should Start Right Now Check out the video where I go into more detail, as well as a quick how to get started guide to making your first blog!

These creators do videos on frontend, backend, databases, cloud servers and much more. If you want to learn anything from React, Angular, Vue or even NodeJS, Mongo, AWS and much more, there are great people to follow here.

Who is your favourite, and did I miss anyone?

1. Ben Awad https://www.youtube.com/channel/UC-8QAzbLcRglXeN_MY9blyw

2. The Coder Coder https://www.youtube.com/thecodercoder

3. Brad Traversy https://www.youtube.com/user/TechGuyWeb

4. Dev Ed https://www.youtube.com/channel/UClb90NQQcskPUGDIXsQEz5Q

5. Florin Pop https://www.youtube.com/c/florinpop

6. Fireship IO https://www.youtube.com/channel/UCsBjURrPoezykLs9EqgamOA

7. Danny Thompson https://www.youtube.com/DThompsonDev

8. The Net Ninja https://www.youtube.com/c/thenetninja

9. Niall Maher https://www.youtube.com/channel/UCvI5azOD4eDumpshr00EfIw/

10. William Candillon https://www.youtube.com/channel/UC806fwFWpiLQV5y-qifzHnA

11. developerHabits https://www.youtube.com/channel/UCJLZwePkNHps5Bv7VwISyTA

12. Tim https://youtube.com/techwithtim

13. Gary Simon https://www.youtube.com/user/DesignCourse

14. James Q Quick https://www.youtube.com/channel/UC-T8W79DN6PBnzomelvqJYw

15. Weibenfalk https://www.youtube.com/user/Weibenfalk

16. Kevin Powell https://www.youtube.com/user/KepowOb

17. Dennis Ivy https://www.youtube.com/c/DennisIvy

18. codeSTACKr https://www.youtube.com/codeSTACKr

19. Chris Sean https://www.youtube.com/c/ChrisSean

20. Program With Erik https://www.youtube.com/c/programwitherik

21. Swizec Teller https://www.youtube.com/channel/UCoyHgaeLLI7Knp7LDHOwZMw

22. Faraday Academy https://youtube.com/c/FaradayAcademy

23. Web Dev Simplified https://www.youtube.com/channel/UCFbNIlppjAuEX4znoulh0Cw

24. Coding Garden https://www.youtube.com/channel/UCLNgu_OupwoeESgtab33CCw

25. JavaScript Mastery https://www.youtube.com/JavaScriptMastery/

26. Code with Ania Kubów https://www.youtube.com/aniakubow

27. CodingTutorials360 https://www.youtube.com/codingtutorials360

28. Caleb Curry https://www.youtube.com/calebthevideomaker2

29. RealToughCandy https://www.youtube.com/realtoughcandy

30. Eddie Jaoude https://youtube.com/eddiejaoude

31. Eleftheria Batsou https://www.youtube.com/c/eleftheriabatsou

32. Jesse Showalter https://www.youtube.com/JesseShowalter

33. Catalin Pit https://www.youtube.com/CatalinPit

34. CodingEntrepreneurs https://www.youtube.com/CodingEntrepreneurs/

35. CoderOne https://www.youtube.com/coderone

36. Classsed https://www.youtube.com/classsed

37. Chau Codes https://youtube.com/chaucodes

38. Dev Mentor Live https://youtube.com/dementorlive

39. Claudio Bernasconi https://www.youtube.com/channel/UCTbHPk0bIOQwTXuGgD195bw

40. Free Code Camp https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ

These creators also have tips and tricks on freelancing, books to read to improve your programming skills or do better at coding. Application devs as well as web dev skills that you might want to learn along the way in your journey as a programmer. One of my favourites is freeCodeCamp which is a community of developers that cover all topics related to making websites and applications.

Follow and support me:

Special thanks if you subscribe to my channel :)

• 🎞️ Youtube
• 🐦 Twitter

Things that will be covered include:

• Color Theory
• Primary Colors
• Secondary and Tertiary Colors
• Hue, Saturation
• Tint, Shade
• Temperature
• Color Psychology

Follow and support me:

Special thanks if you subscribe to my channel :)

• 🎞️ Youtube
• 🐦 Twitter

• Hero Banner
• Navigation
• Call to Action
• Using correct images
• Selecting colors

In this video, I build out a restaurant-style website design, which includes a number of elements. We create a hero banner by selecting an image that works well for food. The image in this case had some good white background blends so we can flow it directly into the hero title.

The navigation follows the same sort of elements, using colors from the image to stand out while also staying consistent to the rest of the brand. Menus these days aren't as obviously displayed, with less background color (usually only on the active element).

The call to action also is nice a clear, with three options that are defined with nice large images and text as the three most likely places people would be clicking. As a restaurant website, this would be the menu, and possibly specific food selections. Whenever designing the UI for any website, it's important to take these items into account.

I hope you enjoyed this short ~15 video, let me know and I'll try to do more content like this in the future :)

Follow and support me: 🐦 Twitter: https://twitter.com/adrian_twarog 💬 Discord: https://discord.gg/nGdThpE 💸 Patreon: https://www.patreon.com/adriantwarog 🖥️ Dev.to: https://dev.to/adriantwarog