Deploy Your Project Live On Netlify.

Gomandev — Wed, 27 Oct 2021 23:42:21 +0000

Have you ever wondered how to view your project live from anywhere not just your local machine as a beginner? You are not alone most beginners do that including me. :)

Today what I will be showing you guys is a way of deploying your project live using netlify.

What is netlify?

Netlify is a cloud platform that allows developers to Build, deploy, and scale modern web projects.

Now let's get started.

Create a netlify account

Visit netlify.com and click the signup button in the top-left corner of the webpage. There are a bunch of options to signup, but I will recommend signing up with Github.

Deploy your project

After you successfully log in, navigate to the site's page. At the bottom of the page, you will see a section like this:

All you need to do is to drag your project folder into the area and netlify will finish all the work.

Wait for a few minutes for the projects to finish deploying. When that's done let's make the URL more readable by changing the site name. go to the Site Settings page, under the general tab you will see the Site Details section, right at the bottom you will find the Change Site Name button and change it to something like preview-project it can be anything you could remember.

All good, now visit the site, https://preview-project.netlify.app

Note: This tutorial is geared more toward beginners.

No More Redux Boilerblate Hell.(Redux Toolkit)

Gomandev — Wed, 20 Oct 2021 12:05:22 +0000

A moment ago @yossefmohamed asked a question on how can he use Redux and Next.js. Well, developers get intimidated by redux because of its boilerplate code before you get it up and running. But they are actually a really cool tool that makes any redux user’s life easy.
Today what I will be showing you guys is Redux Toolkit with a simple CRUD example using Next.js. It doesn’t matter if you are already familiar with redux or just got started working with redux, this post is for you.

What is redux-toolkit?

Redux Toolkit is an opinionated, batteries-included toolset for efficient Redux development. It comes with the most widely used Redux addons out of the box, like Redux Thunk for async logic and Reselect for writing selector functions, so that you can use them right away without having to install them separately.

Enough for the talk, let’s write some code.

First, let’s start by scaffolding a basic Next.js Typescript Project with:

npx create-next-app redux-toolkit-example --ts

Your project root would look like this:

Let’s start building the UI.

Go to pages/index.js and replace the default code with this:

export default function Home() {
  return (
    <div className="conatiner">
      <div className="list-container">
        <div className="list-header">
          <h1 className="title">
            Lists<span>.</span>
          </h1>
          <div className="input-field">
            <input type="text" className="search" placeholder="Search..." />
            <button className="btn">Search</button>
          </div>
        </div>
        <div className="list-body">
          <div className="list-item">
            <div className="list-item-content">milk</div>
            <button className="list-item-footer">X</button>
          </div>
          <div className="list-item">
            <div className="list-item-content">sugar</div>
            <button className="list-item-footer">X</button>
          </div>
          <div className="list-item">
            <div className="list-item-content">coffee</div>
            <button className="list-item-footer">X</button>
          </div>
          <div className="list-item">
            <div className="list-item-content">eggs</div>
            <button className="list-item-footer">X</button>
          </div>
        </div>
      </div>
    </div>
  );
}

Then, go to styles/global.css and replace the code with this:

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  background-color: #fafafa;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

.conatiner {
  max-width: 700px;
  margin: 0 auto;
}

.list-container {
  display: flex;
  justify-self: center;
  align-self: center;
  flex-direction: column;
  width: 500px;
}

.list-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list-header .title {
  font-size: 2rem;
}

.list-header .input-field input {
  margin-right: 1em;
  padding: 8px 10px;
  border-radius: 10px;
  border: #ccc solid 1px;
}

.list-header .input-field button {
  display: inline-block;
  background-color: #78f0f0;
  color: #000;
  border-radius: 10px;
  border: none;
  padding: 8px 10px;
  cursor: pointer;
}

span {
  color: #78f0f0;
}

.list-body {
  width: 100%;
  margin-top: 2em;
}

.list-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1em;
}

.list-item button {
  background-color: #78f0f0;
  color: #000;
  border-radius: 50%;
  border: none;
  padding: 8px 10px;
  cursor: pointer;
}

Now start the project with yarn or npm depending on the package manager you are using which in my case is npm.

npm run dev

This will start the server on localhost:3000, then open localhost:3000 in your browser and you will see this printed in the webpage:

We are now done building the UI.

Let's dive into redux-toolkit

Let's start by installing required packages:

npm i @reduxjs/toolkit react-redux

When that is done, create a new folder in the root directory call store, then create two files config.js and rootReducer.js in /store.

rootReducer.js

this is the root of all reducers.
insert this code in rootReducer.js:

import { combineReducers } from "@reduxjs/toolkit";
import { listSlice } from "./ducks/list";

const rootReducer = combineReducers({
  list: listSlice.reducer,
});

export default rootReducer;

What happened here is that I imported a combineReducers() function from @reduxjs/toolkit. The combineReducers helper function turns an object whose values are different reducing functions into a single reducing function you can pass to createStore. We will be having a single reducer, so combineReducers isn't necessary. But as your app grows more complex, you'll want to split your reducing function into separate functions.
And also import listSlice which we have not create yet.

config.js

config.js is a where we configure our redux toolkit.
insert this code in config.js:

import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "./rootReducer";

const store = configureStore({
  reducer: rootReducer,
});

export type AppDispatch = typeof store.dispatch;
export type AppThunk = ThunkAction<void, RootState, unknown, Action>;

export default store;

We now configure the store using the configureStore function. configureStore is a friendly abstraction over the standard Redux createStore function that adds good defaults to the store setup for a better development experience. this function will automatically configure the redux devtools extension, you can also pass optional configuration to the function. to learn more refer to the docs.

Slices

Create a directory call ducks with listSlice.js file in it.
Paste this in listSlice.js:

import { createSlice } from "@reduxjs/toolkit";

export type listState = {
  list: any[];
};

const initialState: listState = {
  list: ["egg", "milk", "sugar", "coffee"],
};

export const listSlice: any = createSlice({
  name: "list",
  initialState,
  reducers: {
    addList: (state, { payload }) => void state.list.push(payload),
    removeList: (state, { payload }) =>
      void state.list.splice(state.list.findIndex((item) => item === payload)),
  },
  extraReducers: {},
});

export const { addList, removeList } = listSlice.actions;

export const listSelector = (state: any) => state.list;

Okay we now create our first slice using the createSlice function that performs two actions and we have our initial list state with some default items.

Back to the UI

To use redux in the UI we need to install the react-redux library.

npm i react-redux

When the installation is done, replace the default code with this in the _app.js file.

import "../styles/globals.css";

import store from "../store/config";
import { Provider } from "react-redux";

function MyApp({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

export default MyApp;

Now that we configure redux in our UI let move to index.tsx file and Replace it with this updated code:

import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { addList, listSelector, removeList } from "../store/ducks/list";

export default function Home() {
  const [input, setInput] = useState<string>("");
  const { list } = useSelector(listSelector);
  const dispatch = useDispatch();

  const addItem = () => {
    dispatch(addList(input));
  };
  const removeItem = (value: string) => {
    dispatch(removeList(value));
  };
  return (
    <div className="conatiner">
      <div className="list-container">
        <div className="list-header">
          <h1 className="title">
            Lists<span>.</span>
          </h1>
          <div className="input-field">
            <input
              onChange={(e) => setInput(e.target.value)}
              type="text"
              className="search"
              placeholder="Add"
            />
            <button onClick={addItem} className="btn">
              Add
            </button>
          </div>
        </div>
        <div className="list-body">
          {list &&
            list.map((l: string, index: number) => (
              <div key={index} className="list-item">
                <div className="list-item-content">{l}</div>
                <button
                  onClick={() => removeItem(l)}
                  className="list-item-footer"
                >
                  X
                </button>
              </div>
            ))}
        </div>
      </div>
    </div>
  );
}

Conclusion

Note: this is only the minor basic of redux-toolkit but they are a lot more about this library.
Thank you for reading my first tutorial on Dev.to, I hope you learn something from this :).

What will you change or add in javascript if you have a chance?

Gomandev — Fri, 27 Aug 2021 19:13:20 +0000

I was asked this question in an interview sitting a couple of months ago. I'm pretty sure some of you really ever thought of changing something in JS language.

I will be happy to know your opinion in the comment.

How to be an up-to-date programmer.

Gomandev — Tue, 13 Jul 2021 08:26:54 +0000

Just read posts on Dev.to every morning.

Thanks.

DEV Community: Gomandev