DEV Community: DevManas13

Creating a Project Management Software

DevManas13 — Sat, 28 Jan 2023 06:03:29 +0000

It's been a while since a wrote last article. I used to share some tips over my articles, but this time, its different. I want to share something I started working on.

Problem I am facing

My current company has a really great work environment, but when it comes to work updates, we are still using excel sheets for it and we have to fill the excel sheet everyday, about work we did, progress of the work, how much time we took, etc. And, as a programmer, I am too lasy to fill it everyday.

Solution I came up with

After 3 months, I decided to create my own Projece Management Software, which every user can customize according to thier needs and use. There will be a website, which every user of a company can access to do every sort of thing. Managers can assign the work to a specific or multiple persons with a deadline over it. The user and see the work, put a timer over it, getting screenshots of thier work, add thier work update, after choosing a project, and the time taken (recorded time) to complete the work.

Business Executives can record thier Leads and the progress and all the client updates over it.

HR can add thier updates, meetings, schedule interviews etc.

Anyone can apply for leaves, and add a single or multiple person to approve it.

Overall, I am creating a software which can cover all the needs of a company.

Update

So, currently its a day one of creating project management software and from now on, I will update about the progress of my software every week.

Technology I am using

Frontend: React, Redux, Antd, Typescript
Backend: Nodejs, MongoDB, Express.js, Javascript
Mobile App: React Native, Typescript, Paper.

Layouts in Next.JS

DevManas13 — Tue, 04 Oct 2022 09:27:37 +0000

As a aweb developer, I always come accross a fix pattern where I have to create and setup layouts, for the complete website, and even have to define, which pages will not have layouts, or setting up multiple layouts. In this article, I will share everything I know about layouts, and how to create it.

What is Layout in website development ?

Layouts could be anything in your website, which you want to show in every page, and dont want to render, with every page change. For example, "Top Navbar", "SideBar", "Footer" etc. It could be anything.

Layouts in Next.JS

Next.js allow you to Create and define layouts and set it up for every page.

// components/Layout.tsx

import Sidebar from "./Sidebar";

export default function Layout({ children }: any) {
  return (
    <>
      <div className="w-screen h-screen flex">
        <div className="w-[28%] border h-full">Sidebar</div>
        <main className="w-[82%] bg-[#F3F3F3] pt-6 pl-4 h-full">
          {children}
        </main>
      </div>
    </>
  );
}

The above code is your layout component, which now will be used to wrap around the component.

// pages/_app.tsx

import "../styles/globals.css";
import type { AppProps } from "next/app";
import Layout from "../components/Layout/Layout";
import { useRouter } from "next/router";

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();

  return (
    <>
        <Layout>
          <Component {...pageProps} />
        </Layout>
    </>
  );
}

export default MyApp;

With the above code, you are able to wrap up the layout around the components, which lets your layout be visible in every page.

But, now the question is, that how could you stop the layout to be rendered in some specific pages, like in register page, or signIn pages etc.

Limiting the range of layouts

For limiting the range of layouts, you have to define that in which page, you dont want layouts to be appeared, and then we will use "useRouter" and ternary operator to set up the range.

// pages/_app.tsx

import "../styles/globals.css";
import type { AppProps } from "next/app";
import Layout from "../components/Layout/Layout";
import { useRouter } from "next/router";

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();
  const withOutLayouts = ["/auth/signin", "/auth/register"];

  return (
    <>
      {withOutLayouts?.includes(router.pathname) ? (
        <Component {...pageProps} />
      ) : (
        <Layout>
          <Component {...pageProps} />
        </Layout>
      )}
    </>
  );
}

export default MyApp;

In the above code, withOutLayouts is the pathname of the pages, in which we don't want to render layouts.

I hope you love the article, and it helps to apply the same in your project.

Please like this article, give your feedback and share it, if it helps you.

Linux: The Commands to Know

DevManas13 — Thu, 25 Aug 2022 08:04:00 +0000

Linux is being used all over the place now, android, IOS, supercomputers, in servers and at many different places. But, as compared to windows, its working is little bit different.

If you are using windows, then you must be familier with the copying and pasting files or folders, or navigating from one folder to another. You can do the same in linux GUI, but the fun of using linux is actually is in using command line, for nearly in every kind of stuff.

In this article, I am going to tell about some beginner linux commands, to start with, which makes your life easy to use linux.

1. pwd

pwd stands for Present Working Directory and its needed to check your location in the terminal. Consider if you want to create a file in Desktop directory(folder in windows), then you should check first that are u actually in Desktop directory or in some other one.

2. whoami

whoami commands tells you, your login info. Consider if you are login as a root, then this command will return root instead of the name of the user (manas in my case).

3. cd

cd command let you navigate the directories of the linux filesystem. Consider you are at the root level and you want to go to Desktop, then your command will be cd Desktop, which will let you navigate to the Desktop directory and in the above image, we are confirming the directory, by using pwd command.

But, what if you want to go back one directory, or multiple.

In this case, you use cd .. to go one directory back, but if you want to go multiple directories back, then you can use as many .. after cd, as demonstrated in the above image.

4. ls

ls command lets you list all the files and directories of a specific directory (in this case its root).

But, if you want to check all the files with more information, like the permissions, creation time etc, then you should use the command ls -l as shown in the image below.

But, if you even want to list the hidden files of the directory, you can do that with the command ls -la.

5. touch

touch command helps you to create file, as I created newfile.txt in the above screenshot.

6. mkdir

mkdir stands for make directory, and as the name stands, this command is being used to create directories.

7. rm

rm command is being used to delete the file (not directory).

But, if you want to remove the empty directory, then you should use the command rmdir <name>

But, if the directory is not empty and still you want to delete the whole directory, with items inside it, then you should use the command, rm -r <name>.

I hope you love this article over beginners linux commands and I hope it will help you with your linux journey. I will be writing an article a day over linux and cybersecurity.

If this article is helpful for you, save the post and like it too, and give you recommendation and feedback over the comment section.