DEV Community

loading...
Cover image for How to make applications from scratch without tutorials for beginners.

How to make applications from scratch without tutorials for beginners.

gbudjeakp profile image Sebastian Gbudje ・4 min read

Who this is for

You've been learning to code for a couple of months now, you are not from a tech background, been teaching yourself by watching tutorial videos, you have tried to make an app from scratch without using a tutorial video but cannot not seem to think of how to do it yourself. Well if this sounds like you then stick around and learn how to overcome this. I'll be explaining how I go about creating applications and what thought processes I employ to help me.

Always Plan

Before embarking on any project or task, make sure to always plan. The difference between a scalable and unscalable application is planning. Let's say you want to build an app, it could be anything. How do you go about it? First do some research. You cannot build something that you do not know the workings of (how it works). Find out if there's a similar app out there (trust me, there's most likely going to be one or two out there) and how it was executed. Once you know how it should function Think about the tools you want to use, if there is going to be persistent storage, how you want the UI(user-interface) to look, feel and the features you want to have then start thinking about how to implement it.

Think CRUD

If you've been coding or learning to code for sometime, you've probably come across or heard the term CRUD. What is CRUD? We can get as intricate as we want explaining it but we'll keep it simple. CRUD is an acronym that refers to the four functions that are considered necessary to implement a persistent storage application. CRUD simply stands for create, read, update and delete. So I want you to think about apps you've used recently, facebook, instagram, tiktok etc. What things do they have in common? If you guessed CRUD you got it right. Each of those apps lets you C- Create posts, videos, comments, likes etc. R- Read posts, view pictures, see like counts, see followers of other users etc. U- Edit posts, pictures, comments, profiles and update them etc. and finally D- Delete posts, pictures, comments, videos etc.

How CRUD Helps

Any application you are thinking about making is going to involve you either creating something, deleting something, updating something or viewing/reading something. The first thing to do before starting your project is think which of these four operations is my app going to need? Do I want to create something on a click of a button, do I want to just view posts, images, do I want to be able to edit things and do I need to delete Items. If yes to all or just one or two start thinking of how to structure your app.

App Structure

Let's say you want an app that lets a user add cat pictures, the first thing you should think of is how do I add pictures using code? Do some google searching and you will most likely find something to help. Once you cover the creating/adding part, you need to think about how you want your cat data to be presented/stored? do you want it in an array,

 let catPictures = [ catpic1, catpic2, catpic3, .... ];

array of objects,
 let catPictures = [{ catpic1: 'red-Cat'}, {catpic2: 'blue-cat' }];

or in an object
let catPictures = { catpic1: 'red-cat', catPic2: 'blue-cat' };

Once you've decided how you want your created data presented/stored you can start thinking about editing and deleting. You're probably wondering "why should I worry about how my created data is presented?" Well the answer is simple. The way you present the cat pictures will determine how you Read the cat picture data and render it on your user-interface (Front-end built with either HTML or React), Update information or edit information about the pictures and Delete the cat pictures data. Let's assume you decided to store your cat pictures in an array, the next thing to do is google, "how do I render the data in my array?" Depending on what you are using, say you are using vanilla JavaScript and HTML you would simply do a google search on how to render/display array information into HTML. Once you've figured out how to display the data, the next thing would probably be how to edit the cat pictures. Again based on how your cat pictures are being presented/stored, you can simply google how to modify contents of an array (assuming you store/presented your data using that) and do the same for deleting/removing. With this, you would have created your first app without a tutorial.

Conclusion

This is a personal take on how I approach making projects. It is by no means a one all thing. There are many ways to go about making applications without using videos and depending on the application idea, you might need to know some more concepts but this is pretty much a general guide. The core thing here is deciding how you want your data to be stored or if you are consuming an API, figure out how the API data is stored. Once you know how the data is stored, you can easily modify it and utilize it however you want.

Discussion (0)

pic
Editor guide