My 100 Days Of Coding Challenge: Exploring Nginx, Docker, and Redux Toolkit for Building Scalable Applications

Hello everyone! My name is Mohammed Rami Benhamida and I am excited to share my journey of learning coding with you. In my previous post, I talked about how I am planning to do the 100 days of coding challenge and document my progress in this blog. Today, I want to share with you my first 5 days of coding, where I learned the basics of nginx, docker, and redux toolkit with React.

Learning Nginx and Docker:

I started my journey by learning about nginx and docker. Nginx is a web server that can also be used as a reverse proxy, load balancer, and HTTP cache. It is widely used in microservices architecture because of its ability to handle high traffic and improve the performance of web applications. Docker, on the other hand, is a containerization platform that allows developers to package their applications and dependencies into a single container, making it easier to deploy and run applications across different environments.

To get started with nginx and docker, I created a simple API backend for a todo list application using Node.js and Express. Then, I containerized the backend using Docker and created a Dockerfile to define the environment and dependencies for the container. After that, I configured nginx to act as a reverse proxy for the backend container, which allowed me to access the API through a domain name and handle the traffic more efficiently.

Here is an example of how I configured nginx to proxy requests to the backend container:

server {
    listen 80;
    server_name todo.com;

    location / {
        proxy_pass http://backend-container:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Learning Redux Toolkit with React:

After learning about nginx and docker, I moved on to learning Redux Toolkit with React. Redux Toolkit is a library that provides a set of tools and conventions to simplify the process of managing the state of a React application. It includes features such as createSlice, createAsyncThunk, and createEntityAdapter that make it easier to write concise and maintainable code.

To practice using Redux Toolkit, I integrated it into my todo list application and used it to manage the state of the application. I created a todoSlice that defined the initial state and reducers for adding, editing, and deleting todos. Then, I created a TodoList component that used the useSelector hook to retrieve the todos from the Redux store and the useDispatch hook to dispatch actions to the store.

Here is an example of how I defined a todoSlice using Redux Toolkit:

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

const todoSlice = createSlice({
    name: 'todos',
    initialState: [],
    reducers: {
        addTodo: (state, action) => {
            state.push(action.payload);
        },
        editTodo: (state, action) => {
            const { id, title, description } = action.payload;
            const todo = state.find(todo => todo.id === id);
            if (todo) {
                todo.title = title;
                todo.description = description;
            }
        },
        deleteTodo: (state, action) => {
            const index = state.findIndex(todo => todo.id === action.payload);
            if (index !== -1) {
                state.splice(index, 1);
            }
        }
});

export const { addTodo, editTodo, deleteTodo } = todoSlice.actions;

export default todoSlice.reducer;

In conclusion, these past 5 days have been an incredible journey for me as I embarked on my 100-day coding challenge. I learned the importance of using technologies like Nginx and Docker to build scalable and efficient applications. I also explored the basics of Redux Toolkit, a powerful tool for state management in React applications.

I’m excited to see where this challenge takes me and what other technologies and concepts I will learn along the way. Thank you for joining me on this journey, and I hope to see you again in the next post, where I will dive deeper into the world of web development.