DEV Community: Saloni Saraiya

The best project structure for your backend applications | NodeJS

Saloni Saraiya — Fri, 09 Jun 2023 04:16:17 +0000

The Best Project Structure for Your Backend Applications | Node.js

This article is all about structuring your new project when you are building a NodeJS application. It will guide you through, how you can follow best practices.

Hey folks,

Let’s discuss the underrated topic “Project Structure”.

NodeJS has been a favorite choice for building a backend application for web, mobile, and desktop apps for many years. It has become a chosen one for many backend developers as it has many advantages.

In this article, I will discuss a Project structure for backend applications built on top of NodeJS, ExpressJs, and MongoDB.

With these, You can develop microservices and REST APIs to work as a backend for your web and mobile applications.

Let’s have a brief idea about 3 of them.

NodeJS

NodeJS is an open-source, cross-platform, backend JavaScript runtime environment that runs on a JavaScript Engine and executes JavaScript code outside a web browser, designed to build scalable network applications.

Express.js

Express.js is a backend web application framework for building RESTful APIs with NodeJS, released as free and open-source software under the MIT License. It is designed for building web applications and APIs. It has been called the standard server framework for NodeJS, as it has more than 26 lakh weekly downloads.

MongoDB

MongoDB is a source-available cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with optional schemas, unlike SQL.

Before reading this article further, apart from the mentioned topic above, you should know about,

REST APIs
Routing in ExpressJS
HTML templating
Postman and Swagger Documents

These are the basic concepts used in building any NodeJS backend applications.

NodeJS, Express.js, and MongoDB are ideal for a tech stack when creating a scalable server application because they complement each other’s advantages.

Firstly, There are three options in which your project can be structured.

First and the lazy one! You don’t structure it. Instead, create files and call them from the main file where your server is running. This is one of the mistakes that freshers make while submitting their backend application after the interview. It is the worst practice to follow. TLDR; Don’t use this one!
The second and most widely used is MVC architecture. You can structure your projects in three primary directories model, view, and controller. In addition, there can be other directories like configuration, services, utilities, etc. I’ll walk you through this structure later in this article. Meanwhile, you can learn about MVC architecture from Here.
The third, which has become popular in the past few years, is Clean-Code architecture! You can read about it Here. This architecture is built upon MVC but has some other principles as well, which we will walk through in this article.

Both these, Second and third, have their Pros and Cons. Let’s discuss them in detail.

MVC ARCHITECTURE

As mentioned above, You’ll be having three folders mandatorily, which are “Models”, “Views”, and “Controllers”.

Regarding a backend application, You can put HTML templates inside a “Views” folder or skip it.

The fourth folder that is required is “Routes”. If you are building REST APIs, you must need routes to call your APIS.

After that, You might have DB configurations, DB calls functions, validations, services containing business logic, constants, authentication, and middleware. For That, you must use separate folders and import them in your “Models” and “Controllers” folders.

Here is the git link of a running backend application built on the tech mentioned earlier, stack with MVC architecture. You can check the in-detail project structure in the same

GitHub - saloni137/MVC-template

CLEAN CODE ARCHITECTURE

In the Clean-Code architecture, Like MVC, the Folder structure is almost identical.

Here too, We have “Models”, “Views”, and “Controllers.” And We have “Routes” and other services, utility files, and folders. Apart from that, we have different use cases in “usecases” folder, which can be called from the controller. (Basically an extra layer, as a separation of concerns).

The difference here is The way of using the functions as dependencies in other files.

The Clean Code theory, in simple words

The basic clean code theory says that UI should talk to the presentations, not business logic. In our case, Our API routes call the controller functions, and all the business logic is there.

But according to the Clean Code rule, there should be one more layer where application rules will be kept. So “UseCases” are introduced.

And In MVC architecture, we make database calls using model instances. But per the Clean Code rule, a layer should handle the business logic. That’s why “Entities” are introduced. So Using the model instance, You create an entity, validate the upcoming request bodies, map key values, and then make the database call.

You must be thinking, What difference does it make? So let me spare you those details as well.

As the theory says, Every layer should be independent and passed as a dependency to the inner layer. The benefit is that you can change the passing dependency, not the inner layer of business logic.

Let me explain this with a simple example. Suppose you are using ExpressJS in your project and have developed some modules using the MongoDB database. The upcoming modules are supposed to be developed with MySQL and PostgreSQL. What would you do? Consider starting separate repositories for different modules! And you know the pain of starting any project from scratch and how time-consuming it is.

Here comes the Clean-code architecture. Check out the repository mentioned below for a practical example.

GitHub - saloni137/CC-template

You can check this:https://mannhowie.com/clean-architecture-node for more such examples.

Which one and why?

You must be confused about which architecture to choose and when. So let’s discuss that as well.

You have to work with different frameworks or databases.
Data integrity and security are essential to you.
You should be able to maintain every rule and the complexity even if the project grows big,

Then, Your choice should be clean code architecture. Also, Just FYI-With Clean Code architecture, You have to manage more files and folders and write more code than the MVC architecture.

Your framework and database are fixed.
Data is very much crucial for your application.
You like to work with simple architectural projects.

Then, Your choice should be MVC architecture.

Also, for MVC architecture, You will find lots of articles, demos, tips, etc. While with Clean Code, you have to set up everything by yourself, considering the size and requirements of your project, as there are fewer help, docs, examples, and other resources available.

Some Best Practices to follow,

Inside every folder, you may have many files. You can make one index file and export other files of that folder from the index file. Import one index file wherever required rather than importing everything separately. Also, when new files are added, you can import them into the index file, and you are good to use it.
Set up Eslint in your project.
Use separate .env files for different development stages. Manage it from package.json, and don’t push them to git.
Make a readme and mention everything about the project.
Use the spelling-errors-finder extension in your IDEs to make sure your code is readable.
Add comments necessarily. You read more about it here: https://medium.com/@salonii13/comments-in-javascript-18f3b3effb8a

Following such project structures in your ongoing projects as well as using them while submitting coding interviews and contests will help you lend your desired position. 🤯

That’s it for this article.

Happy Learning 🤗

FYI: You can use the above-mentioned repositories as a template 🤩. Have Fun building amazing apps!

About Me

I am an SDE(Backend Developer — NodeJS) at DhiWise for the past 2 years. Apart from development, I love to write and share technical stuff.

Let’s connect on LinkedIn and Twitter for more tech updates.

Keep coding👩‍💻️, and keep developing great apps. Bye. 👋️

Methods vs Functions

Saloni Saraiya — Thu, 22 Dec 2022 12:31:27 +0000

Let's clear some fundamentals.

Hi, devs,

You might be calling any function as a method or a function randomly in your day-to-day software development lifecycle.

So, Let's understand the primary difference between Methods and Functions.

What is a function?

A function is a set of instructions separated from the main code, to call it repetitively wherever needed.

A function can take arguments as inputs to process specific tasks.

A function can have a return value with a specific type to generate output for a particular task.

Functions are part of functional and procedural programming concepts.

What is a method?

A method is also a set of instructions separated from the main code, to call it repetitively wherever needed.

A method can also take arguments.

A method can also have a return value and type.

BUT….

Here are the key differences between a function and a method.

Methods are associated with a specific class instance to call it.
Methods cannot be accessed outside of a class, or they process other data.
Methods are part of Object-oriented programming concepts.

Basically,

If a function is associated with a class, it's a method. Otherwise, it is simply a function.

Let’s see an example

1. Function

function sum(a,b,c){
  return a+b+c;
}

console.log(sum(1,2,3));

2. Method

class Dog{
  bark(){
    console.log("dog has barked");
  }
}

let dog = new Dog();
dog.bark();

and with that,

That’s it for this article. I hope I have made you clear.

Let me know in the comments about small but mostly ignored topics you want me to discuss.

Bye. 👋🏼

Keep Coding 👩🏻‍💻, keep learning 🎯

About me👩🏻‍💻

I am a Backend Developer at DhiWise.

You can also follow me on LinkedIn and Twitter for more tech updates.

Git 101

Saloni Saraiya — Wed, 14 Dec 2022 11:01:17 +0000

Let's understand Git with its basic commands.

Hello geeks, 🙋🏻‍♀️

This article will list the Git commands you need in the daily development lifecycle while working with any version control systems.

Version Control Systems like GitHub, Gitlab, BitBucket etc., use Git commands to manage code repositories.

Before reading this article, you must know

What is Git, Git how does it work
Version control systems (VCS)
Repositories

Let's understand Git commands one by one.

Setup

Download Git from here, according to your OS.

create/ initialize a git repository

git init , this command will initialize your folder as a git repository.

check out the existing repository

git clone /path/to/repository , this command will create a copy of your remote repository in your local system.

If your repository is hosted privately on VCS, it will ask you for your username and personal access token. (Asking for passwords is deprecated.)

You can check your VCS doc to find out where to get the personal access token .

Local vs remote repositories

your local repository consists of three "trees" maintained by git. Git first one is your Working Directory , which holds the actual files. The second one is the Index which acts as a staging area, and finally, the HEAD which points to the last commit you've made.

Your commits will be stored locally until and unless you push it.

add files and commit code changes

After making changes in your local repo, you need to stage those changes. And for that, the command is git add <filename> .

Similarly, you can use git add . , add all the files that have changes.

after that, you need to fire git commit -m “commit message” , which will commit your changes to HEAD . Yet, your changes remain to go on the remote repo.

Push changes to remote repositories

Your changes are now in the HEAD of your local working copy. To send those changes to your remote repository, execute git push origin <branch\_name> .

If you have not cloned an existing repository and want to connect your repository to a remote server, you need to add it with git remote add origin <remote_url> . Now you can push your changes to the selected remote server

Branches

Branches are used to develop isolated features(independent from each other) and work with other developers on the same repository.

So, work on different branches and merge them into a hosted branch once the work is done.

Create a new branch named "develop" and switch to it using

git checkout -b develop .

to delete branch git branch -d feature_x .

If you are creating a branch locally, it will not be available for others unless you push it. Use git push origin <branch> to push the branch to your remote repository.

Pull and merge

To fetch the latest changes on your remote repo, git fetch .

To update your current branch with the latest commits, use git pull .

To get another branch's code into your branch git merge <branch> .

If you and your colleague have worked on the same line in the same file, there will be merge conflicts in your file. You need to take either your changes or your colleague's changes, or you can take both. Then you need to again stage the file with git add <filename> . And it will be marked as merged.

Before merging changes, you can also preview them by using

git diff <source_branch> <target_branch>

Tagging

It's recommended to create tags for software releases. You can create a new tag named 1.0.0 by executing git tag 1.0.0 <commit_id .

That's all.

These are all the basic commands required to start using Git with VCS.

Bye. 👋🏼

Keep Coding, Keep committing, and Keep pushing 💻

About me👩🏻‍💻

I am a Backend Developer at DhiWise.

You can follow me on LinkedIn and Twitter for more tech updates.

JavaScript Developer Roadmap: Zero to Hero

Saloni Saraiya — Thu, 17 Nov 2022 11:59:21 +0000

Hi guys and girls!!

Today I will share the helpful tutorial links that helped me learn the Core Basic and advanced JavaScript for the past two years.

When I started my journey as a backend developer, I was pretty confused about choosing training topics and courses. So I am sharing those topics with links that helped me the most.

After that, I will share valuable tips to make development easy daily.

So let's get started.

JavaScript

Whether you are a frontend dev or backend, without core JavaScript concepts, you would never be able to solve problems and write logic.

Also, JavaScript's behaviour in different situations is quite surprising.

Basics

Start with three types of variable declaration available in JS: var, let and const. Learn about their difference, scope and which to use when.
DatatypesLearn about the datatypes in JS. Learn about the classes of datatypes available to access methods that come with them. For starters, learn about String and Number classes.
Objects and ArraysJavascript is all about objects and arrays. The more you are comfortable accessing and manipulating these, the merrier it will impact your coding.
Loopsto manipulate objects and arrays.

Once you get hands-on with these topics, Youll learn about functions and conditional statements.

Learn more about function, its scope and types from here.

After getting a perfect knowledge of these topics, you can learn popular libraries primarily used in frontend and backend JS projects which are lodash and dayjs. They provide utility functions for arrays and objects, and dates, respectively.

Advance

Lets dive deeper into advanced JavaScript concepts.

Variable Hoisting in JS, skip it if you already go through it while learning about variable declarations.
Arrow functions
Learn about asynchronous JS with: Promises, Callbacks, and async/await.
Call, apply and apply in JS
JS Timing Events: setTimeout and setInterval
JS Event Loop

Lastly, If you are more of a Video person than a reading person, then check out this series available on YouTube: Namaste JavaScript.

Learning these topics in detail may help you crack any JS interview as a fresher or beginner role. Mostly the mentioned topics are asked in JS/NodeJS/React interviews.

Thats all for JS. Comment if I missed something.

After learning the basics of JS, Either you can start with NodeJS for backend development as a beginner or move to React/Angular for frontend development.

Some Useful Tips

Use VSCode IDE to code in JS.
Set up ESlint in your projects to follow linting rules and fix errors during development. Use this extension.
Add comments while working on any large or Small projects. Use this extension. You can check my article on this topic.
If you are a fresher, Learn basic Git and its commands along with learning JS and push everything on Git that your code.

Thats it for this article. In the following article, we will learn about backend development with NodeJS, APIs and databases.

About Me

I am a Backend Developer at DhiWise.

You can follow me on LinkedIn and Twitter for more tech updates.

Keep coding👩💻, and keep developing great apps. Bye. 👋

How I created my portfolio website with React, Nestjs, and Prisma using DhiWise

Saloni Saraiya — Mon, 03 Oct 2022 08:32:23 +0000

Hi developer friends,

Sharing a personal story today

For the past two years, I have worked in the industry as a backend software engineer. I have worked on numerous freelancing projects outside of backend software, including social media marketing, content creation, front-end development, and many others. Therefore, I had to be prepared to convey the job I had done thus far.

I then considered creating a website to showcase my work.

As a backend developer, I had experience working with Prisma and Nestjs and wanted to see how React would function with these backend technologies.

So I created my Portfolio website using NestJs, Prisma, and React and built it with DhiWise.

I completed the website by following these steps

I decided what projects should be on my website, under which category, and what other content should be there.
Found the Figma from Figma Community and made some changes following requirements.
Created the boilerplate of the NestJS Project.
I created tables in SQLite and models in Prisma according to the content and design.
Added CRUD APIs for models.
Used DhiWise to convert Figma design into React code.
Checked Preview of converted design.
Integrated multiple APIs on the page using DhiWise.
Downloaded the entire application.
I made some required changes, and my website was ready to go live in just 8 hours. Deployed the app on vercel.

Let me spare you the details

1) On my website, I wanted to add a list of websites, services, blogs, experiences, and education. After searching, I found this Figma from Figma Community, which matched my requirements.

https://medium.com/media/ddfefddfb2d44e0ef9d80990cffb9589/href

2) In building the backend, Using this Guide, I created the NestJS boilerplate with the integration of Prima.

FYI, I had already installed Prisma on my machine. Then created models. Also, I created these tables in sqlite3 using CLI.

Here are the models.

https://medium.com/media/334a93d18c8629d30cf540b2e7a45472/href

After creating these models, using the following command, generate a Prisma client to access these models instances in the NestJs project for the REST APIs.

npx prisma generate

3) Added CRUD APIs for these models. You can follow this Tutorial for an example. I must say, NestJS has dope Documentation!!

4) Created React application in DhiWise using Figma. Heres the tutorial for the same.

https://medium.com/media/c7b97b8e60af3de2323010bfb61e7e52/href

Set the Homepage and check the preview.

Set home page

I ship these underrated features of DhiWise! Like setting the home page, adding constants for the app, Exporting single page code, etc. Love them!!

5) Run the APIs locally. Enabled cors and integrated it into the Homepage.

6) After the integration is completed, Download the source code.

7) Updated personal details, which are static, on the page.

8) And my portfolio site was ready. Deployed the app on Vercel. Here is the link to check out: https://saloni-portfolio.vercel.app/

Ending Notes

If you are thinking of creating your portfolio, this is the sign for you to do it now. Go to my Git, and clone the repo.

If you want a new design, you can just use the backend and modify it according to your needs, and you are good to go.

Follow me on LinkedIn and Twitter.

Power up your ClickUp skills with Supabase, Figma, and DhiWise in a day.

Saloni Saraiya — Tue, 20 Sep 2022 06:09:16 +0000

Introduction

In this article, we will learn how I build a web application to manage goal mapping with metrics for my organization.

ClickUp has launched Goal tracking with its task-management system, measuring success based on key results to achieve targets.

For this application, it was needed to manage metrics for the individual goal, measuring its progress monthly. Surprisingly, ClickUp provides robust and organized REST APIs to build applications, based on the data available in ClickUp.

As our yearly goals with targets were already defined in ClickUp, using Supabase’s REST APIs, Metrics were stored and assigned to the individual goal available in ClickUp, with monthly targets for different categories. So it was handy to track monthly targets and yearly goal and their tasks available in ClickUp.

Data Management

1) I used ClickUp goal APIs to retire goals and all their Information. All the things required to run this API, are mentioned in the ClickUp API doc with the steps about where to get them.

2) I stored the required data in Supabase tables and used its REST APIs to manage the CRUD. Here are the tables.

Steps

Step: 1 Designed Figma according to my requirements and followed DhiWise designed guidelines to get the maximum accuracy.

Figma: https://www.figma.com/file/Erq165ue4ltdsHZMbQzo8u/Metrics-Mapping?node-id=5440%3A10238

For Getting above 80 % design accuracy in your Code, Follow These Design Guidelines while designing your Figma.

Step: 2 Imported this design to DhiWise to create a React application. Here’s the tutorial video for the same.

Step: 3 Set the Homepage of the application.

Step: 4 SetUp navigations on Menu Items

Step: 5 Integrated 6 APIs on my web pages. You can set APIs on “On loading of the page” and actions.

Here’s one example of ClickUp’s API integration on loading the page.

First, you need to add API to DhiWise. You can either use postman collection or use their in-built API runner.

You need to add the necessary information to run the API. I have not recorded it as it has private tokens.

Now you can use this API to be integrated on Your web page.

As you can see, DhiWise provides API integration with request params and body mapping from view or manual Inputs with validations, response mapping to the view or local storage, and success and error response handling.

Here’s the Detailed Documentation: API Integration in React Web App

Step: 6 Followed by step 5, let’s integrate all the APIs on the pages. Also, DhiWise has identified the Modal page, so I didn't need to code separately. I even integrated an API for modal as well.

Step: 7 After Downloading the source code, It was necessary to add an Editable dropdown on the “create metrics page”. As DhiWise generated code was component driven, I added a new component quickly and added it on the page and my job was done. Here’s the code of it.

Step: 8 After adding some business logic, the app was ready to go live. You can directly deploy the app to Vercel, from DhiWise.

Here is the live preview of the app: https://6324394cfe938f00146ab5d1-git-dhiwise-c45np24k-saloni137.vercel.app/

Step: 9 You can also set a favicon for your web app from DhiWise. Yes, DhiWise takes care of little features as well.

Summing Up

Using three powerful tools — ClickUp, Supabase, and DhiWise, It was a cakewalk to build such an application, using the ClickUp APIs, Supabase for database efficiency, and DhiWise for code quality without sacrificing security and performance along with cost and time-saving!

Here is the Source Code Link: https://github.com/DhiWise/metrics-management

Here is a preview of the app design: https://6324394cfe938f00146ab5d1-git-dhiwise-c45np24k-saloni137.vercel.app/

How to build a Grocery Application with Webflow CMS using DhiWise

Saloni Saraiya — Wed, 31 Aug 2022 05:40:58 +0000

Building an e-commerce application has no “Why” anymore. It has “how”.

Today in this article, I will walk you through how to build a Grocery Application using Two very interesting developer tools Webflow and DhiWise.

The grocery application is a part of an e-commerce marketplace and contains buying and selling goods and groceries online.

As online shopping and payments have snowballed, It helps local stores to have their marketplace online for their daily customer as a helping hand in their routine.

Many reports have stated that it costs $2000 to $18000 to build such a demanding application.

But with the No-code tool Webflow and a pro-code tool DhiWise, by our side, it can be built in around 40 HOURS, because both these platforms are Free to use, and provides a large Feature basket.

Let’s dig deeper into the “how” part.

Webflow

Webflow is a popular no-code Software-as-a-Service, that provides an online visual editor platform that allows users to design, build, and launch websites. As most websites interact with users and live data, for that Webflow provides its in-built CMS where you can store data in collections, and they provide REST APIs to access those collections.

Webflow CMS: Webflow provides its super customizable CMS, which you can use to store and retrieve collections of items, which we will be using as our application’s data store.

DhiWise

DhiWise is a pro-code platform, specially built for developers to build web and mobile apps within the comfort of a developer-first environment without the hassle of repetitive coding. It predominantly supports front-end tech stack React for the web and Flutter for mobile along with other technologies like Node.js, iOS, Android, and Laravel.

DhiWise Flutter Builder: DhiWise Flutter Builder converts your Figma into Flutter Code along with Integrations of Authentication, Navigations, API Integrations and Firebase and Supabase Integrations.

Steps

Step 1: Import Figma Design

Here is my Figma Design

Let’s Convert Our Screens into Flutter Code to get started within a minute.

As you can see in the attached video, I have created a Flutter Application and imported Figma, Selected the necessary screens. In a few minutes screens are ready to be configured further.

Step 2: Setup Authentication

I wanted to add Email SignUp and SignIn, along with Social Authentication with Facebook and Google. Surprisingly, DhiWise has all these three with Firebase in the backend, So I integrated it quickly, and by quick I mean just in 2 minutes.

Step 3: API Integration

As I have used Webflow CMS, Here is the Reference Link to Webflow’s CMS APIs Doc: https://developers.webflow.com/

In the below image, you can see the List of collections of my Webflow Application. You can learn how to create a project and CMS collections From Webflow University.

Also, Webflow provides a whole Section on E-commerce by giving Sample Collections and separate APIs. With which you add those collections with Predefined schemas and sample data as well.

I created my own collections according to my requirements.

Here I am attaching a video, in which you can see how you can integrate an API for the “on ready” lifecycle method on Home screen. You can also integrate APIs on Onclick as well on Success on any other integration.

Check this Doc for the in-detail process.

Step 4: Changes after downloading the Code.

I integrated two APIs on Details Screen, One was for Fetching Details of Products and Another one was Similar Products, So I integrated them into the screen downloaded the code and As I checked the code, it was readable and easy to customize as it was modular and following clean code architecture.

So After downloading the code, I quickly added a filter in the API function and my Screen was ready.

By DhiWise on the Side…

After I imported the Design into DhiWise, the Code was component Driven. Commonly used widgets were created separately in files and used — basically code reusability.

Also, Widgets like sliders, page indicators, checkboxes, listview, and grid were identified accurately. (You can see the Figma, how complex the design is.)

With DhiWise’s Design to Code Algorithm 2.0, back navigations on all the screens where the back button is were added automatically.

Validations on Inputs like Email, password, PhoneNumbers were added automatically right after the design was imported.

Now, you can imagine how much time you can save by avoiding this boring and mundane task.

Summary

By using a pro-code tool DhiWise, and maximizing its capabilities by using Webflow’s REST APIs, all of the features except the payment were ready without wasting a time in following the ancient methodology to develop an app.

Here’s the link to the Git Repository for the complete application review: GitHub

5 Flutter app Ideas to kickstart your development

Saloni Saraiya — Thu, 28 Jul 2022 06:12:17 +0000

Are you a Flutter newbie?

Do you want to kickstart your development journey with some real-time applicationsby getting hands-on with Flutter?

As many of my developer friends describe, one of the most difficult things to do after learning any language is to implement the same. Practice can be tricky as you need to get more familiar with fundamentals and industrial standards. Thats not always easy if you need to code from the scratch.

Well, we hear you. Wear a seat belt and sit tight. We shall now be embarking on an insightful journey.

But first, the deets:

What is Flutter, and why should you choose it?

We interact with thousands of applications on our smartphones. These apps are developed using pre-built app development frameworks like Kotlin, SwiftUI, and Flutter. The latter is the best among them, in terms of usability.

Flutter is an open-source UI software development kit created by Google. It allows you to create beautiful, natively built, and multiplatform apps from a single codebase.

Yes, you read that right. THE GOOGLE develops it.

Flutter provides an insane range of widgets as it is a UI kit, and the codebase uses dart language to write the business Logic.

We are sure that you would like to read more. So lets jump right in:

There are two ways you can build the application on or rather with Flutter. Either you build it from scratch to pass the learning curve, or take the readymade UI kit of Flutter and manipulate real-time data around it.

I will list the Application ideas from beginner to advanced levels.

1. ToDo

It is a basic yet fascinating application for managing ToDos.

While building this application, you can learn about widgets, layouts, responsiveness, and state management. These are all the fundamentals of a Flutter eco-system, which require hands-on.

You can add features like implementing new todos and descriptions, checking them off, adding favorites, and anything else that floats your boat.

For storing the data, you can use shared preferences, which is part of the fundamentals.

2. Calculator

It is an app meant for learning to write simple business logic for a flutter application using dart language for beginners. The app includes functions, loops, and conditional statements.

While developing a UI, you can get an overview of the Row and Column widgets.

For starters, you can include addition, subtraction, multiplication, and division. Once done, you can add other exciting calculation features like currency conversion or scientific calculations.

3. TickTacToe Game

A game application: meant to learn the basics while having fun.

Building this app will help you get a stronger knowledge of UI widgets and business logic.

Either you can build a two-player game, or if you are good at writing algorithms, you can go for a single-player vs machine game. The choice is yours!

4. E-commerce

Well, now things are getting serious. Comes Ecommerce where almost everything is in one appfrom the Signup/ SignIn to products, details, orders, wishlist, and obviously, payments.

You need to have a dedicated backend to manage the data of your e-commerce application.

You can use Firebase or Supabase integration for authentication and data management. Or you can separately use Airtable APIs to store data. The usage depends solely on your requirements.

With that, you will learn how to manage real-time data in your application, as it is a basic requirement of any industrial app development event.

5. Movie Streaming

After learning APIs and other integrations in your application, you can play around with video streaming widgets to build this app.

From the ToDo app to a streaming app, you cover more than the fundamentals and conceptual aspects of any mobile and flutter application Development.

Make sure you dive deep into the Lifecycle methods of any Flutter application, which will help you solve the bugs more efficiently.

In a Nutshell

If you are into learning tech, you must start it somewhere. And learning tech hands-on is the best way to do it.

I have shared multiple ideas in this article, which you can select based on your knowledge of Flutter.

You must be thinking why I havent shared any projects git links because rather than checking my code, Take my suggestion and,

Go to DhiWise, Build a Flutter application with available templates and screens to start your Flutter journey, and have fun learning Flutter. Here is the Guide to Get Started with it.

Hopefully, I have motivated you enough to get started Fluttering.

How to Convert Your Figma Design into React Code: Step by Step Guide ⚛️

Saloni Saraiya — Mon, 18 Jul 2022 06:14:24 +0000

Do you want to speed up your React.js application development? Precisely by automatically converting your design into React components!

If yes, DhiWise web app builder is here to save precious time, which you can otherwise use to develop critical application features. The mentioned web app builder can quickly generate production-ready code from your Figma design. And whats important is that it follows the ethos of visual programming to the letter.

In this article, we will learn how DhiWise can help you get a production-ready front-end application, along with features like Page navigation and API integrations.

Before that, lets start with a brief introduction to Figma and React.

Figma 🖌

Figma is a popular web-based vector graphics editor and prototyping tool. It comes with additional functionalities supported by desktop applications for macOS and Windows.

It allows mobile users to view Figma prototypes in real-time using Figma mirror companion appsfor both Android and iOS. Also, it enables designers and developers to create UI and wireframing for web and mobile apps.

React.js

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies.

React is used to build single-page applications. It allows us to create reusable UI components.

For Getting above 80 % design accuracy in your Code, Follow These Design Guidelines while designing your Figma.

Lets Dive deeper into it🚀

Step 1: Sign in to DhiWise

First thing first, Sign into DhiWise using your Google or GitHub account.

Step 2: Create a new application

Once sign-up is done, you will be directed to the Dashboard. You can search and view the previously created apps if any. You will find apps divided into three categories: web, mobile, and backend. You can either create an app with Figma URL or if you dont have a design, check out templates and screens by selecting the second and third options.

In this tutorial, we will go with Figma URL. For that, select Create a new app.

You will be prompted to choose between backend, web, and mobile. We will choose web.

Step 3: Add app name, select tech, and add Figma URL.

Add the meaningful app name, and select React web app. Add your Figma design URL, and click Create new app.

FYI: You must link your DhiWise account to your Figma account. You can add different accounts to access your Figma designs, and if you put a private or inaccessible Figma URL with the account you have chosen, an error will be displayed.

Step 4: Select the screens youd like to sync to your application

From your Figma design, you may choose the screens and pages you want for your application.

Additionally, If you have already set up the prototype in your Figma, half of your work is almost done. For prototypes, DhiWise fetches screen resources automatically and you dont need to deal with the screen navigation again. The code for it will be added.

As soon as you click submit, in a few minutes, DhiWise will convert your UI design into React code.

As shown in the screenshot above, DhiWise algorithm has intelligently added authentication, and page navigation, after identifying all components of your screens.

Step 5: Screen Configurations

Next, you can set up a home page, and screen name, view the screen summary, and configure actions such as lifecycle methods and API integrations along with request validations.

Additionally, you can apply actions starting from social authentication to page navigations, Open modal, and API Integration . Yes, You can bind real-time data from REST APIs to your pages.

Learn More about All the features In Details: React web app Builder

After the customization, click on Build to get the structured source code with all the customizations in a few minutes.

Once your App is built, you can download the entire source code from the DhiWise and/or sync it with your GitHub or GitLab Repository.

If you make more changes in DhiWise application and you want updated code in your application, you can use VSCode Extension to get the latest code directly into your VSCode.

Additional Things

There are two awesome features from DhiWise to make the development life more excitingall while using DhiWise.

You can see and share a preview of your app in different screen sizes to check the responsiveness straight from DhiWise.
Now you can see and share a prototype of your app by deploying the application to Vercel in a single click!
Secondly, You can use Figma to Code plugin in Figma to get the code in minutes.

In a Nutshell

These are just a few steps to transform Figma design into React code, along with the additional features mentioned above.

Here is the YouTube playlist for the visual representation of this blog: https://www.youtube.com/playlist?list=PLMJ0858-zE7SHkj3vFE5OH2Nc-QxIxzAn

If you are new to Figma, form here you can learn it easily: https://www.youtube.com/playlist?list=PLMJ0858-zE7S7DXtSufSR1xrCxGZMeH8h

SignUp Now! (It is free😉)

Here are all the resource links the DhiWise provides to help you get started easily with its app builders.

How to convert Figma Design into Flutter Code: 5 Steps Guide ️

Saloni Saraiya — Mon, 11 Jul 2022 09:43:35 +0000

In the modern era, for every startup or business entity, building an exclusive app has become indispensable. To reach out to potential customers, businesses must invest in mobile application development. Reason: the number of mobile app users is consistently growing worldwide.

However, building an enterprise mobile application is not a cakewalk. The agile methodology relevant to every mobile application development process includes planning, designing, coding, testing, and maintenance. Quite much, right?

Converting your design to code is the most frustrating and time-consuming task. More so for developers who are not familiar with the designing world.

And that is where DhiWise comes into the scheme of things!

There have been 4 million Figma users and over 2 million Flutter users in the past two years. And, DhiWise mitigates manual conversion of Figma design to Flutter code in a few steps.

In this article, we will learn about converting your Figma design to Flutter code using DhiWise. But before digging deeper into the Figma to Flutter, lets first understand Figma and Flutter briefly.

Note: For Getting above 80 % design accuracy in your Code, Follow These Design Guidelines while designing your Figma.

Figma 🖌

Figma is a popular web-based vector graphics editor and prototyping tool. It comes with additional functionalities supported by desktop applications for macOS and Windows.

It allows mobile users to view Figma prototypes in real-time using Figma mirror companion apps for Android and iOS. It enables designers and developers to create UI and wireframing for web and mobile apps.

Flutter 👩💻

Flutter is an open-source Google UI toolkit to develop beautiful, natively compiled apps for Android, iOS, Linux, Mac, Windows, Google Fuchsia, and the web from a single codebase.

Flutter is among the top software repositories. Based on the Github stars, there are over 100,000 apps scripted using Flutter since its first launch. One of the most notable apps is Xianyu created by the Alibaba team, which 50 million people use.

Lets Get Started 🚀

DhiWise helps you bridge the gap between designing and development with its Flutter app builder, mitigating the dependency of designers and developers.

It enables developers to convert their Figma design to production-ready Flutter code in a few steps. Lets learn how to translate the beautiful Figma design into excellent Flutter code using DhiWise.

Step 1: Sign up for DhiWise

First, sign up/Into DhiWise using your Google or GitHub account.

Step 2: Create a new application

Once sign-up is done, you will be directed to the Dashboard. You can search and view the previously created apps, if any. You will find apps divided into three categories: web, mobile, and backend. You can either create an app with Figma URL or, if you dont have a design, check out templates and screens by selecting the second and third options.

In this tutorial, we will go with Figma URL. For that, select Create a new app.

You will be prompted to choose between backend, web, and mobile. We will choose mobile.

Step 3: Add app name, select tech, and add Figma URL.

Add the meaningful app name. Select any mobile technology in which you want your app. The options are android, iOS, and Flutter. I will select Flutter. Add your Figma design URL, and click Create new app.

FYI: You must link your DhiWise account to your Figma account. You can add different accounts to access your Figma designs, and if you put a private or inaccessible Figma URL with the account you have chosen, an error will be displayed.

Step 4: Select the screens youd like to sync to your application

From your Figma design, you may choose the screens and pages you want for your application.

Additionally, half of your work is almost done if you have already set up the prototype in your Figma. For prototypes, DhiWise fetches screen resources automatically, and you dont need to deal with the screen navigation again. The code for it will be added.

When you click submit, DhiWise will convert your UI design into Flutter code in a few minutes.

As shown in the screenshot above, DhiWise algorithm has intelligently added authentication, back navigation, screen navigation, and input field validations to your app after identifying all components of your screens.

Step 5: Screen Configurations

Next, you can set up a splash screen and screen name, view the screen summary, and configure actions such as lifecycle methods and API integrations using DhiWise Smart Editor.

Also, DhiWise lets you change the nature of the screen components (using change view), provided they have been wrongly picked up while importing.

You can also export the code for independent screens from here! (So cool, Right!!)

For the configuration part, here is the detailed Blog about API Integration in DhiWise.

As soon as you are ready with your configuration, build the app and get the source of your application within a few minutes.

After the build is complete, download the source code, or sync your app to git to manage the changes.

Additional Things from DhiWise to You

There are two remarkable features from DhiWise for its developers to make their development life exciting while using DhiWise.

Now you can see the Preview of Your application on different devices after importing your Figma design into DhiWise. Think of this as a built-in Emulator.

Secondly, You can use Figma to Code plugin in Figma to get the code in minutes directly from Figma.

Awesome Right! 😎

Here is the YouTube playlist for the visual representation of this blog: https://www.youtube.com/playlist?list=PLMJ0858-zE7SHkj3vFE5OH2Nc-QxIxzAn

If you are new to Figma, Here you can learn it easily: https://www.youtube.com/playlist?list=PLMJ0858-zE7S7DXtSufSR1xrCxGZMeH8h

Here are all the resource links the DhiWise provides to help you get started easily with its app builders.

Best App Development Frameworks for Building Cross-platform Apps in 2022

Saloni Saraiya — Thu, 07 Jul 2022 10:17:39 +0000

Hello geeks

Do you fancy a cross-platform app: an application that can work on both iOS and Android platforms? Well, we come bearing good news.

Building applications and choosing the right framework for the application, and making it cross-platform as well as responsive is quite a job. With the technology world growing and everyday new technology and framework being released, it has become quite tough to choose from the list.

Previously, There has been a hustle for developing Android and iOS apps, separately. This results in more developer hours and costs. However, a decade back, a revolutionary lunch of frameworks came up with the Code Once, deploy anywhere approach.

Over the years, These frameworks have improved and come with new features every now and then, and have larger Dev-communities.

As the Developers love open-source and cross-platform frameworks, Below is a list of some of them.

1. Flutter

Flutter is an open-source UI software development kit created by Google. It is used to develop cross-platform applications for Android, iOS, Linux, macOS, Windows, Google Fuchsia, and the web from a single codebase.

Being Open-source, cross-platform, and developed by google are three USPs of Flutter. Indeed it has a wide community and well-managed documents

Also, Google has announced Flutter 3 in its Google I/O 2022. Which means it has come up with improvements and new features.

2. React Native

React Native is an open-source UI software framework created by Meta Platforms, Inc(Basically Facebook). It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows, and UWP by enabling developers to use the React framework along with native platform capabilities.

As React Native uses React, It will be a walk in the park, for React/Javascript Developers to develop apps using React Native.

Like Flutter, Framework has become a top choice of Developers to build Native and Hybrid Apps, React and React Native has Larger Developer Communities and a document base, and cherry on topDeveloped by Facebook Developers.

3. Ionic

Another open-source mobile toolkit for building high-quality, cross-platform native and web app experiences. Move faster with a single code base, running everywhere with JavaScript and the Web.

Iconic gives excellent support for web apps, compare to Flutter.

Iconics USPs are open-source, cross-platform, enabling development for React.js, vue.js, angular.js, and other Javascript frameworks as well.

4. Apache Cordova ( Formerly Knowns as Phonegap)

Apache Cordova is an Open Source framework that helps build hybrid applications which work on most mobile platforms such as Android, iOS, Blackberry, and Windows Phone among others. The framework provides a container that bridges the native APIs to the web view.

Apache Cordova makes the application development simpler using CLI. Its a developer-friendly cross-platform development framework to build apps using CSS3, HTML, and JavaScript.

All of the mentioned Frameworks are keep working towards maintenance and new releases, hencTheir upcoming versions come with power-packed features to smoothen the cross-platform development.

Building Robust Applications and why it is important

In the fastest-growing era, if you are a Startup or a business entity that has requirements of developing applications on daily basis with fewer developer hours, You can use a developer tool that eases your way and makes development faster with effective cost-cutting.

If you are a Flutter Developer and want to Convert your Designs into UI code with a few clicks Checkout DhiWise Flutter Builder. It has advanced features starting with component detection to exclusive features like setting up Authentication, App navigations, API Integrations, Supabase, Firebase Integration, etc, and it's FREE...FREEFREEE 🎉

You can find me on LinkedIn

Keep coding👩💻, keep exploring. Bye. 👋

Improve your routine as a Developer

Saloni Saraiya — Tue, 28 Jun 2022 09:42:23 +0000

Hi folks,

I have been thinking of starting a series on how to reduce a developer's mundane tasks. These tasks include writing the same old CRUD APIs, testing, applying validations, converting designs of Figmas to code, and so on.

Automation is emerging nowadays, and developers are automating all most everything for people around the world, so why not automate some tasks for themselves as well.

Let’s begin with “Design to Code”.

If you are a Mobile or a front-end Developer, You must have this process flow at your organization that A designer gives you Figma/Sketch/XD/PSD files of the application and then the developer converts it into say React, Flutter, Android, etc. Which takes a few days and even weeks.

Now Imagine…

What If you don't need to code for UI screens and you can directly code for the Data Manipulation (say for API Integration) part of your application?

WAITTT…Stay there and imagine more, What If you can integrate APIs into the screens as well. (There are so many things like this that I will cover in this blog)

Amazing, right!🤩️

Well, it's actually possible. You can do it with a few clicks.

Here’s your Everyday Friend DhiWise who does out-of-the-box things for frontend and Mobile Developers. Dhiwise converts Figma/Sketch/XD designs to UI code.

Features of Dhiwise — Design to Code 🚀️

Component Identification and Updation
API Integration
Authentication
Firestore and Supabase Integrations
Validations on text fields
Navigation and Code Preview
Lifecycle Method setups
Create Actions
Setup App Drawers
Manage Alerts

I will write a detailed Blog on each feature mentioned above. You will surely love it.

So…Stay Tuned and Follow me 😉️

Forget doing repetitive tasks ever again when you can convert your design-to-code with DhiWise — The fastest way to build Enterprise-grade apps. Sign up & build Flutter, iOS, Android, & React apps for free!

Also, I have already written a Blog on Testing Automation. Do check it out.

About Me:

I am a Javascript Developer at DhiWise. It’s a pro-code devtool that generates production-ready code for 6 technologies/frameworks. Check it out if you are a tech-geek 😋️

You can find me on LinkedIn and we can talk about cool devtools like the one I am developing.

Keep coding👩‍💻️, keep automating. Bye. 👋️