Forem: Nurudeen Amedu

Finding Work as a Self-Taught Web Developer in 2024

Nurudeen Amedu — Sun, 28 Jul 2024 22:48:28 +0000

Introduction

Brief Overview of the Current Tech Job Market

As we progress through 2024, the tech job market remains robust, highlighting the pervasive integration of technology across various industries. Companies are on the lookout for skilled developers to spearhead innovation, create scalable solutions, and uphold resilient digital infrastructures. This demand spans from startups to large corporations, emphasizing the indispensable role developers play in today's digital economy.

Emphasis on the Increasing Demand for Developers

The surge in digital transformation initiatives and the expansion of the tech sector have catalyzed an unprecedented demand for developers. Recent studies show a significant increase in job openings for developers, particularly in roles that can swiftly adapt to technological advancements. This trend is poised to continue, offering numerous opportunities for those with the right skill sets.

Highlight the Viability and Challenges of Being a Self-Taught Developer

Pursuing a career as a self-taught developer has become a viable path for many aspiring tech professionals. With an abundance of online resources, coding boot camps, and community support, individuals can acquire the necessary skills outside traditional education frameworks. However, this path presents challenges. Self-taught developers need to be exceptionally motivated, disciplined, and proactive in seeking learning opportunities and practical experience. Navigating the job market can be challenging, but with determination and the right strategy, self-taught developers can secure coveted tech roles.

Understanding the Job Market

Key Trends in 2024 for Tech Jobs

Rise in Remote Work

The shift towards remote work, significantly accelerated by the COVID-19 pandemic, has become a staple in the tech industry. Companies have adopted the flexibility and efficiency of remote teams, enabling them to tap into a global talent pool. For developers, this translates to increased opportunities to work for top-tier companies irrespective of geographical location.

Emphasis on Practical Skills Over Formal Education

In 2024, the tech industry continues to value practical skills and hands-on experience over formal education. Employers are more interested in a candidate's capabilities rather than their academic credentials. This shift has opened doors for self-taught developers who can showcase their skills through portfolios and real-world projects.

Emerging Technologies and Frameworks

Keeping up with the latest technologies and frameworks is essential for developers. In 2024, there will be significant growth in fields such as artificial intelligence, machine learning, blockchain, and cloud computing. Frontend frameworks like React, Angular, and Vue.js, and backend technologies like Node.js, Python, and Ruby, remain in high demand.

Overview of Job Categories: Frontend, Backend, Full-Stack

The tech job market offers a variety of roles that cater to different skill sets and interests. Here’s a brief overview of the primary categories:

Frontend Developer: Specializes in the user interface and user experience. Key skills include HTML, CSS, JavaScript, and frameworks like React, Angular, or Vue.js.
Backend Developer: Focuses on server-side logic, databases, and API integration. Key skills include server-side languages (e.g., Node.js, Python, Ruby), database management (SQL, NoSQL), and API development.
Full-Stack Developer: Combines frontend and backend skills, proficient in creating comprehensive solutions that manage both client-side and server-side applications.

To explore current job openings in these categories, visit stackbay.org:

By understanding these trends and job categories, aspiring developers can align their skills and career goals to meet the demands of the tech industry in 2024.

Acquiring the Right Skills

To secure a job as a self-taught developer, it's essential to develop the right skills tailored to your target job category. Here are the crucial skills for frontend, backend, and full-stack developers, along with recommended resources for learning.

Essential Skills for Each Category

Frontend Developer:

Proficiency in HTML, CSS, and JavaScript:
- These are the core technologies of web development. HTML structures the content, CSS styles it, and JavaScript adds interactivity.
Knowledge of Frameworks/Libraries like React, Angular, or Vue.js:
- Modern web development heavily relies on these frameworks and libraries to create dynamic and efficient web applications. Familiarity with at least one is crucial.
Understanding of Responsive Design and User Experience (UX):
- A good front-end developer ensures applications work well on various devices and provide a positive user experience. Knowledge of responsive design principles and UX best practices is essential.

Backend Developer:

Strong Grasp of Server-Side Languages (e.g., Node.js, Python, Ruby):
- Backend development involves handling server-side logic. Proficiency in one or more server-side languages is necessary to manage the server, application, and database.
Database Management (SQL, NoSQL):
- Understanding how to design, manage, and interact with databases is fundamental for backend development. Knowledge of both SQL and NoSQL databases broadens your ability to handle various data storage needs.
API Development and RESTful Services:
- APIs are crucial for communication between different parts of an application. Knowing how to develop and integrate RESTful services allows you to build scalable and maintainable backend systems.

Full-Stack Developer:

Combination of Frontend and Backend Skills:
- A full-stack developer should be comfortable working with both the client-side and server side of an application. This means mastering the essential skills of both frontend and backend development.
Ability to Manage and Integrate Databases:
- Full-stack developers need to understand how to design and manage databases and integrate them seamlessly into applications.
Experience with Version Control (e.g., Git):
- Version control systems like Git are essential for tracking changes, collaborating with other developers, and managing code efficiently.

Leveraging Job Boards and Applying Strategically

Effectively navigating the job market is essential for any aspiring developer, particularly those who are self-taught. Here's how to make the most of job boards like stackbay.org, tailor your applications for each position, and maintain professional communication throughout the hiring process.

Utilizing Stackbay.org and Other Job Boards

Job boards are invaluable for discovering job opportunities and connecting with potential employers. Stackbay.org is especially useful for developers, offering a wide range of job listings tailored to various categories such as frontend, backend, and full-stack development. Here’s how to maximize these platforms:

Regularly Browse Listings: Make it a habit to check job boards frequently. New listings appear daily, and being among the first to apply can significantly enhance your visibility.
Set Up Job Alerts: Many job boards, including stackbay.org, offer job alert features. These notifications inform you when new jobs that match your criteria are posted, ensuring you never miss an opportunity.
Use Advanced Search Filters: Utilize advanced search filters to narrow down job listings based on your skills, preferred location (if not remote), and other relevant criteria. This helps you focus on the most suitable job opportunities.

Customizing Applications for Each Job

A generic application is unlikely to stand out in today's competitive job market. Customizing your application for each job demonstrates to potential employers that you understand their specific needs and are genuinely interested in the position. Here’s how to tailor your applications effectively:

Research the Company: Before applying, research the company to understand its products, culture, and values. This knowledge allows you to tailor your resume and cover letter to align with the company’s mission and goals.
Highlight Relevant Skills and Experience: Carefully read the job description and emphasize the skills and experiences that match the requirements. Use specific examples from your past projects or work experience to showcase your capabilities.
Personalize Your Cover Letter: Address the hiring manager by name if possible, and explain why you are interested in the role and how your skills make you a perfect fit. Mention any specific projects or achievements that align with the job requirements.
Optimize Your Resume: Tailor your resume to highlight the most relevant aspects of your experience. Incorporate keywords from the job description to help your resume pass through Applicant Tracking Systems (ATS).

Following Up and Maintaining Professional Communication

Following up after submitting your application and maintaining professional communication throughout the hiring process can significantly enhance your chances of success. Here’s how to do it right:

Send a Follow-Up Email: If you haven’t heard back within a week or two of applying, send a polite follow-up email to inquire about the status of your application. This shows your continued interest and can prompt the hiring team to review your application.
Be Professional in All Communications: Whether emailing, speaking on the phone, or participating in interviews, always maintain a professional tone. Be respectful, courteous, and prompt in your responses.
Prepare for Interviews: If you’re invited for an interview, prepare thoroughly. Research common interview questions, practice your answers, and be ready to discuss your skills and experiences in detail. After the interview, send a thank-you email to express your appreciation for the opportunity.
Keep in Touch: If you don’t get the job, don’t be discouraged. Ask for feedback, stay connected with the company on professional networks like LinkedIn, and keep an eye out for future opportunities. Maintaining these connections can be valuable for your long-term career growth.

Recommended Resources for Learning

Self Learning Resources:

StackBay: Here you will find lots of resources for learning various tools, roadmaps outlining the different parts of popular dev stacks, job openings, and materials for interview prep like questions and code challenges.

Books and Tutorials:

"Eloquent JavaScript" by Marijn Haverbeke: A comprehensive guide to JavaScript programming.
"You Don’t Know JS" series by Kyle Simpson: Delves deeply into JavaScript, covering various aspects of the language.

By focusing on these essential skills and utilizing the recommended resources, self-taught developers can effectively prepare for the job market and enhance their chances of securing a desirable position in 2024.

Ultimate Data Science Roadmap

Nurudeen Amedu — Fri, 29 Dec 2023 19:07:27 +0000

Introduction

Greetings to all aspiring data enthusiasts! Today, we embark on a comprehensive exploration of the Ultimate Data Science Roadmap. In this extensive article, we will delve into the fundamental concepts and tools that are indispensable for anyone aspiring to become a proficient data scientist. Whether you're a novice looking to kickstart your journey or a seasoned professional seeking to enhance your skills, understanding the core elements of data science is crucial. Join us as we navigate through the intricacies of the data science landscape, equipping ourselves with the knowledge necessary for making informed decisions and driving meaningful insights.

The Role of a Data Scientist

At the heart of the data science discipline lies the pivotal role of a data scientist. Armed with statistical models, data scientists are tasked with the responsibility of not only analyzing but also innovating and predicting trends. Ethical regulations like GDPR, HIPAA, PCI DSS, and others are paramount in guiding their work, ensuring a commitment to privacy and equity. In essence, data scientists can be likened to modern alchemists, possessing the unique ability to transform raw data into valuable insights that serve as the bedrock for informed decision-making.

Building Blocks of Data Science

To commence our journey into the intricate world of data science, it is imperative to understand the fundamental building blocks: Data Structures and Algorithms. Visualize data structures as diverse containers holding information, ranging from arrays to linked lists. Algorithms, on the other hand, are meticulous step-by-step procedures designed for effective problem-solving. Mastery of these foundational concepts is essential for a solid grasp of the basics of data science.

Software Development Life Cycle

A cornerstone in the data science domain is a comprehensive understanding of the Software Development Life Cycle (SDLC). This cycle serves as a guiding framework through the various stages involved in creating software, encompassing everything from gathering initial requirements to the eventual deployment and maintenance phases. The SDLC includes crucial steps such as understanding requirements, designing, implementing, testing, deploying, and maintaining the developed software. This knowledge is not only valuable but is indeed imperative for comprehending how software products are effectively delivered to end-users.

Programming Languages: Python and SQL

In the vast landscape of data science, programming languages play a pivotal role. Python, with its readability and an extensive array of libraries, takes center stage in the field. Its versatility and applicability make it a powerful tool for data manipulation and analysis. Additionally, proficiency in SQL is indispensable for efficient database querying and manipulation. By mastering these two languages, one establishes a robust foundation to embark on the exciting journey into data science.

Collaboration and Version Control

Collaboration stands as a linchpin in any software development project. Recognizing the significance of efficient collaboration, version control tools like Git become indispensable. Git enables the streamlined management of changes and collaboration among multiple contributors. It is essential to acquaint yourself with the most useful Git commands and workflows, as they will undoubtedly enhance your efficiency in collaborative projects.

SQL Databases: PostgreSQL and Beyond

In the realm of data storage and management, SQL databases are foundational. Databases such as PostgreSQL play a significant role in storing, retrieving, and manipulating data. Understanding the intricacies of at least one SQL database is crucial for any aspiring data scientist. PostgreSQL, with its relational database model, is widely used and serves as an excellent starting point for learning the SQL language.

NoSQL Databases

In the realm of data science, the evolution of handling diverse data types has led to the prominence of NoSQL databases. Unlike traditional relational databases, NoSQL databases provide a flexible and scalable approach to managing data. One notable example is MongoDB, a widely adopted NoSQL database.

Data Warehousing

In the landscape of managing large datasets efficiently, data warehousing plays a crucial role. It involves the collection, storage, and management of data from various sources for analytical processing. Popular tools like Amazon Redshift and Google BigQuery facilitate querying extensive datasets.

Exploratory Data Analysis and Data Cleaning

No data science journey is complete without mastering the twin pillars of Exploratory Data Analysis (EDA) and Data Cleaning. EDA involves the process of scrutinizing and summarizing the essential characteristics of a dataset, aiding in uncovering patterns, trends, and potential outliers. Data Cleaning is the meticulous process of identifying and rectifying errors or inconsistencies within the dataset. To navigate through these crucial aspects, familiarize yourself with tools like Jupyter Notebook and leverage libraries such as Pandas and Matplotlib to refine your skills in handling and cleaning data.

Data Visualization

Effective data visualization serves as the bridge between raw data and meaningful insights. As a data scientist, it is imperative to be well-versed in data visualization tools and techniques. Platforms such as Power BI and Tableau offer powerful visualization capabilities, enabling you to present complex data understandably and compellingly. These tools play a pivotal role in conveying insights to both technical and non-technical audiences, making them an integral part of a data scientist's toolkit.

Conclusion

Thank you for accompanying us on this comprehensive exploration of the Ultimate Data Science Roadmap. By delving into the core concepts and tools discussed in this article, you have equipped yourself with the foundational knowledge necessary for success in the dynamic field of data science. For those eager to delve even deeper, we invite you to explore our data science developer roadmap. This resource provides a detailed guide, complete with links to valuable resources and course recommendations, tailored to support and enhance your data science journey. Remember, building a robust foundation in these concepts and tools is the key to unlocking the doors to the fascinating world of data science. Happy learning!

👍 Enjoyed this article?, check out other great learning materials👍

Explore our Data Science Developer Roadmap 👉 https://stackbay.org/stacks/learn-data-science

Join our Discord community 🌐https://discord.com/invite/HNbNZDZWhN

Subscribe to our channel 🚀 https://youtube.com/@stackbay_47

Optimize Mongo DB Performance By Adding Indexes to Your Collection

Nurudeen Amedu — Sat, 16 Dec 2023 20:44:41 +0000

When handling extensive datasets in MongoDB, there are instances where you need to retrieve data that adheres to specific criteria. As the complexity of your requirements increases, the associated operation becomes more resource-intensive and costly.

To improve the efficiency of your database operation, Mongo DB has an interesting feature called an "index".

If you prefer a video walkthrough, watch below;

For the readers 😉, please carry on;

In MongoDB, an index is like a detailed map of data. It helps the database quickly find specific information, similar to an index in a book guiding you to the exact pages where certain topics are discussed. This speeds up data retrieval, making queries faster and more efficient.

Imagine a well-organized library where the librarian has created an index for every book, detailing its title, author, genre, and page numbers. When you ask for a specific book, instead of scanning every shelf, the librarian refers to the index, quickly pinpointing the exact location of the book. In the same way, MongoDB's index works as a sophisticated librarian, efficiently directing the database to the precise location of data based on predefined criteria.

To demonstrate this, we will import a large JSON file containing an array of over 60,000 jobs to a MongoDB database, and then we will attempt to run a resource-intensive command before and after we create an index for the jobs collection.

To follow along you need;

MongoDB setup and running on your PC or in the cloud
Hemlock; a Database management tool
A Large List of Jobs

Step 1: Setup Hemlock and Connect to your Database

After downloading all dependencies, you can follow these instructions on how to Connect Hemlock to a Database

Step 2: Create a Collection and Import the Jobs

Here, I will use the Commands tab in Hemlock to run a create collection command which will create my jobs collection.
db.createCollection("jobs")

Now switch to the Databases tab and refresh to reveal the new collection.

To import the large jobs JSON list, click jobs, then click "Import" and Select "JSON", then choose the file you downloaded and wait for several seconds, this may take longer if your database is in the cloud.

After import, you should see the jobs list and stats relating to the job.

Step 3: Run our `aggregate` Command

To show the issue with running resource-intensive commands on this dataset, we will run a command. Switch to "Commands" tab in Hemlock and run the following command;

db.jobs.aggregate([
  {
    $match: {
      $and: [
         {
          $or: [
            {
              commute_type: {
                $regex: `.*remote.*`,
                $options: 'i',
              },
            },
            {
              job_location: {
                $regex: `.*remote.*`,
                $options: 'i',
              },
            },
          ],
        },
      ]
    },
  },
  { $sort: { date_created: -1 } },
  { $skip: (3375 - 1) * 12 },
  { $limit: 12 },
])

This command is trying to find jobs where commute_type or job_location includes "remote", sort all jobs in descending order with the date_created field, paginate with 12 items per page and then return all items on page 3,375.

Running the command will result in the following error;
Uncaught MongoServerError: Error in $cursor stage :: caused by :: Sort exceeded memory limit of 104857600 bytes, but did not opt in to external sorting. Aborting operation. Pass allowDiskUse:true to opt in.

Step 4: Create an Index

To resolve this, we will create an index for our "jobs" collection with all our jobs sorted in descending order by date_created field.

db.jobs.createIndex({ date_created: -1 })

You can verify its creation by running;

db.jobs.getIndexes()

This should show a list of indexes including the one you just created.

Step 5: Run the `aggregate` Command Again

Trigger the aggregate command again the same as before, this time you will get an array of 12 jobs meeting the requirements we specified.

Conclusion

In conclusion, MongoDB's index feature plays a pivotal role in optimizing data retrieval efficiency, akin to a librarian's well-organized index in a library. As demonstrated with a substantial job dataset, the impact of indexes became evident when a resource-intensive command encountered memory limits. With the strategic use of indexes, MongoDB empowers smoother and more efficient database operations, highlighting its significance in handling large and complex datasets.

👍 Enjoyed this article?, check out other great learning materials👍

Explore our MongoDB module 👉 https://stackbay.org/modules/60b9235ad88c0300220a4a73

Join our Discord community 🌐 https://discord.com/invite/HNbNZDZWhN

Enroll in our FREE MongoDB Course 🚀 https://www.udemy.com/course/mongodb-unleashed-a-complete-guide/

Breadth First Search Visualizer with React, Redux & ReactFlow

Nurudeen Amedu — Sun, 18 Dec 2022 12:42:49 +0000

This tutorial shows how you can use a generator function to check every step of a Breadth First Search Iteration and also visualize the progress using React and ReactFlow.

Read CSV Files in React Apps without Installing Any Package

Nurudeen Amedu — Sun, 13 Jun 2021 11:24:45 +0000

This article covers how you can read any CSV file in your React app without the need for an npm package installation.

If you would prefer a video walkthrough, check it out on YouTube;

To try this out you need a react app, you can use an existing one or create a new app with;

npx create-react-app csv-reader

After the app setup is complete, create a component in the src folder called CsvReader.jsx

Inside it we'll be adding a basic form that accepts a csv file input and sets it to a csvFile state, and a submit button that does nothing for now. The code should look like below;



import { useState } from 'react'

export default function CsvReader(){
    const [csvFile, setCsvFile] = useState();

    return(
        <form id='csv-form'>
            <input
                type='file'
                accept='.csv'
                id='csvFile'
                onChange={(e) => {
                    setCsvFile(e.target.files[0])
                }}
            >
            </input>
            <br/>
            <button>
                Submit
            </button>
        </form>
    );

}

You can preview by plugging it into a page in your react app, I'll simply replace my app content with the csv reader component;



import CsvReader from './CsvReader'
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <CsvReader />
      </header>
    </div>
  );
}

export default App;

Next, we add a submit button click handler, this addition will read the CSV file when the button is clicked using the FileReader objects and log the value of our csv file as text in the browser console.



import { useState } from 'react'

export default function CsvReader(){
    const [csvFile, setCsvFile] = useState();

    const submit = () => {
        const file = csvFile;
        const reader = new FileReader();

        reader.onload = function(e) {
            const text = e.target.result;
            console.log(text);
        }

        reader.readAsText(file);
    }

    return(
        <form id='csv-form'>
            <input
                type='file'
                accept='.csv'
                id='csvFile'
                onChange={(e) => {
                    setCsvFile(e.target.files[0])
                }}
            >
            </input>
            <br/>
            <button
                onClick={(e) => {
                    e.preventDefault()
                    if(csvFile)submit()
                }}>
                Submit
            </button>
        </form>
    );

}

Finally I will be breaking the csv text into an array of objects with each column and row data as key value pairs;
imagine we have a csv like below;

name	rank	age
Peter	Senior	21
Joey	Junior	20
Sarah	Veteran	33

I want to convert it into the following;



[{name: "Peter", rank: "Senior", age: 21},
{name: "Joey", rank: "Junior", age: 20},
{name: "Sarah", rank: "Veteran", age: 33}]

To do this we need a function that takes the plain text read from the CSV, parses it and converts into the format above, then set it to a csvArray state which we create before writing the function;



const [csvArray, setCsvArray] = useState([]);

const processCSV = (str, delim=',') => {
        const headers = str.slice(0,str.indexOf('\n')).split(delim);
        const rows = str.slice(str.indexOf('\n')+1).split('\n');

        const newArray = rows.map( row => {
            const values = row.split(delim);
            const eachObject = headers.reduce((obj, header, i) => {
                obj[header] = values[i];
                return obj;
            }, {})
            return eachObject;
        })

        setCsvArray(newArray)
    }

This function gets called after the console.log done in the submit handler



const submit = () => {
        const file = csvFile;
        const reader = new FileReader();

        reader.onload = function(e) {
            const text = e.target.result;
            console.log(text);
            processCSV(text) // plugged in here
        }

        reader.readAsText(file);
    }

Finally we want to display the csv data in a table on our web page, we can do this by mapping the csvArray state into a table, our final CsVReader component should look like;



import { useState } from 'react'

export default function CsvReader(){
    const [csvFile, setCsvFile] = useState();
    const [csvArray, setCsvArray] = useState([]);
    // [{name: "", age: 0, rank: ""},{name: "", age: 0, rank: ""}]

    const processCSV = (str, delim=',') => {
        const headers = str.slice(0,str.indexOf('\n')).split(delim);
        const rows = str.slice(str.indexOf('\n')+1).split('\n');

        const newArray = rows.map( row => {
            const values = row.split(delim);
            const eachObject = headers.reduce((obj, header, i) => {
                obj[header] = values[i];
                return obj;
            }, {})
            return eachObject;
        })

        setCsvArray(newArray)
    }

    const submit = () => {
        const file = csvFile;
        const reader = new FileReader();

        reader.onload = function(e) {
            const text = e.target.result;
            console.log(text);
            processCSV(text)
        }

        reader.readAsText(file);
    }

    return(
        <form id='csv-form'>
            <input
                type='file'
                accept='.csv'
                id='csvFile'
                onChange={(e) => {
                    setCsvFile(e.target.files[0])
                }}
            >
            </input>
            <br/>
            <button
                onClick={(e) => {
                    e.preventDefault()
                    if(csvFile)submit()
                }}
            >
                Submit
            </button>
            <br/>
            <br/>
            {csvArray.length>0 ? 
            <>
                <table>
                    <thead>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Rank</th>
                    </thead>
                    <tbody>
                        {
                            csvArray.map((item, i) => (
                                <tr key={i}>
                                    <td>{item.name}</td>
                                    <td>{item.age}</td>
                                    <td>{item.rank}</td>
                                </tr>
                            ))
                        }
                    </tbody>
                </table>
            </> : null}
        </form>
    );

}

And when we upload a CSV and click submit, we should have a view like below;

If you enjoyed this How-To article, please support by Subscribing to my youtube channel https://www.youtube.com/channel/UCvF499ChQBnWb5ex162EiMg

Add Bootstrap to Next.js App

Nurudeen Amedu — Tue, 24 Nov 2020 16:14:35 +0000

If you are familiar with bootstrap, you can agree that it is one of the fastest and easiest ways of developing the frontend of a web application, as it saves time on styling and responsive adaptation.

In this article, I will go over how you can configure your Next JS application to use bootstrap.

First set up your next js application

yarn create next-app next-strap

Next we install the desired packages

yarn add @zeit/next-css @zeit/next-less @zeit/next-sass next-images bootstrap react-bootstrap

These packages will allow us configure image, css, less and sass support for our next app, bootstrap and react-bootstrap are however needed to use bootstrap in our app.

To read more on react-bootstrap, visit React Bootstrap.

Now we create our next config file which will our asset support packages, create this file in the root of your app named "next.config.js"

Fill it with the code below;

const withSass = require('@zeit/next-sass');
const withImages = require('next-images');
const withLess = require('@zeit/next-less')
const withCSS = require('@zeit/next-css')

module.exports = withCSS(withLess(withImages(withSass({
  env: {
    ANY_ENV_KEY: "ANY_ENV_VARIABLE"
  }
}))));

Inside our config, I added an env object which will contain any environment variable you wish to include in your Next JS app.

Now add the following imports to the pages/_app.js file

import 'bootstrap/dist/css/bootstrap.min.css'

New _app.js should look like

import '../styles/globals.css'
import 'bootstrap/dist/css/bootstrap.min.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

In our pages/index file, I'll clear the content leaving only the head;

import Head from 'next/head'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>


    </div>
  )
}

I will proceed to attach a bootstrap component to this page, go over to the React Bootstrap Carousel Component.

Copy the first sample code into your pages/index file, also import the Carousel from react-bootstrap, thus making the code;

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { Carousel } from 'react-bootstrap'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <Carousel>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="holder.js/800x400?text=First slide&bg=373940"
            alt="First slide"
          />
          <Carousel.Caption>
            <h3>First slide label</h3>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="holder.js/800x400?text=Second slide&bg=282c34"
            alt="Third slide"
          />

          <Carousel.Caption>
            <h3>Second slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="holder.js/800x400?text=Third slide&bg=20232a"
            alt="Third slide"
          />

          <Carousel.Caption>
            <h3>Third slide label</h3>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
    </div>
  )
}

Now add some background image for your carousel slider, I'll be using a placeholder; https://placehold.it/800x400?text=800x400 for my background, feel free to use whatever you prefer.

My final code would look like;

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { Carousel } from 'react-bootstrap'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <Carousel>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="https://placehold.it/800x400?text=800x400"
            alt="First slide"
          />
          <Carousel.Caption>
            <h3>First slide label</h3>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="https://placehold.it/800x400?text=800x400"
            alt="Third slide"
          />

          <Carousel.Caption>
            <h3>Second slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="https://placehold.it/800x400?text=800x400"
            alt="Third slide"
          />

          <Carousel.Caption>
            <h3>Third slide label</h3>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
    </div>
  )
}

Now you can run your app by typing yarn run dev in your terminal, you should get the below behavior on your app homepage.

If you find this article helpful, you can also checkout other Next JS videos on Youtube or the Full Stack Next JS Course on Udemy

Add Redux to a Next JS App

Nurudeen Amedu — Sun, 15 Nov 2020 15:15:53 +0000

In this article, I will go over how you can configure your Next JS application to use redux.

First set up your next js application

yarn create next-app next-redux

Next we install the desired packages

yarn add redux redux-thunk next-redux-wrapper react-redux

After that installation, create a redux folder in the root of your project, inside that folder add a types.js and store.js files, also add folders for actions and reducers.

In the types file, lets add a single type; for setting the name of the user

export const SET_NAME = "SET_NAME"

In the reducers folder, add a main.js file, In this file we will create a reducer that will manage the main state of our app.

In this file we will initialize a main state with only one value for the name that defaults to guest. Then we will use a switch statement to detect the passed in action and value, the state gets updated based on the value received.

import * as t from "../types";

const main = (state = {
    name: "guest",
}, action) => {
  switch(action.type){
    case t.SET_NAME:
      return { 
        ...state,
        name: action.payload
      };
    default:
      return {...state};
    }
}

export default main;

In the same reducers folder, we will add a rootReducer.js file, this file will combine all our reducers into one, it is most useful when you have multiple reducer files, for this article i will only be using a single reducer file, which is my main reducer.

import { combineReducers } from "redux"
import main from "./main"

const rootReducer = combineReducers({
  main: main
})

export default rootReducer;

Next, we move to our store.js file

In this file we will create our redux store using redux and next-redux-wrapper, we will also add redux-thunk to allow us have extra functions before dispatching new values to our state.

import { createStore, applyMiddleware, compose } from "redux"
import thunk from "redux-thunk"
import { createWrapper } from "next-redux-wrapper"
import rootReducer from "./reducers/rootReducer"

const middleware = [thunk]

const makeStore = () => createStore(rootReducer, compose(applyMiddleware(...middleware)))

export const wrapper = createWrapper(makeStore)

Now we will create our set name action, create a main.js file in the actions folder, inside it we will have a function that specifies the set name type with a new name value.

import * as t from "../types";
import axios from "axios";
import { request } from "../../util/request";

export const setInfo = (name) => dispatch => {
  dispatch({
    type: t.SET_NAME,
    payload: name
  });
}

After you've done all of this, our directory should look like below

Now move to your _app.js file, it should look like;

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Update it to look like;

import React from "react"
import { wrapper } from "../redux/store"

const MyApp = ({ Component, pageProps}) => (
  <Component {...pageProps} />
)

export default wrapper.withRedux(MyApp);

We've wrapped the app in the redux wrapper we created in our store file and passed props to it.
In our index.js, take out all the page content and leave an input box asking for a name.

return (
    <div className={styles.container}>
      <p>Enter a Name :</p>
      <input 
        type="text">

        </input>
        <button>
          Submit
        </button>
    </div>
  )

Next we add some state management for updating and storing the value of our form using useState, we also link our index page to our redux state and finally connect the actions using mapDispatchToProps and the state using mapStateToProps, the final index.js should look like below

import { useState } from 'react'
import { connect } from "react-redux"
import { setInfo } from "../redux/actions/main"
import styles from '../styles/Home.module.css'

function Home(props) {
  const { name, setInfo } = props
  const [newName, setName] = useState("")

  return (
    <div className={styles.container}>
      <p>Enter a Name {name}:</p>
      <input 
        type="text" 
        value={newName} 
        onChange={(e) => setName(e.target.value)}>

        </input>
        <button onClick={() => setInfo(newName)}>
          Submit
        </button>
    </div>
  )
}

const mapStateToProps = state => {
 return { name: state.main.name }
}

const mapDispatchToProps = {
  setInfo
}

export default connect(mapStateToProps, mapDispatchToProps)(Home)

To be able to debug with Redux Dev Tools, update your store.js code to;

import { createStore, applyMiddleware, compose } from "redux"
import thunk from "redux-thunk"
import { createWrapper } from "next-redux-wrapper"
import rootReducer from "./reducers/rootReducer"

const middleware = [thunk]

const composeEnhancers =
  typeof window === 'object' &&
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;

const enhancer = composeEnhancers(applyMiddleware(...middleware));

const makeStore = () => createStore(rootReducer, enhancer)

export const wrapper = createWrapper(makeStore)

Your home page should now look like the below image, and changing the name should update the value of "guest"

If you find this article helpful, you can also checkout other Next JS videos on Youtube or the Full Stack Next JS Course on Udemy

Forem: Nurudeen Amedu

Finding Work as a Self-Taught Web Developer in 2024

Introduction

Brief Overview of the Current Tech Job Market

Emphasis on the Increasing Demand for Developers

Highlight the Viability and Challenges of Being a Self-Taught Developer

Understanding the Job Market

Key Trends in 2024 for Tech Jobs

Overview of Job Categories: Frontend, Backend, Full-Stack

Acquiring the Right Skills

Essential Skills for Each Category

Leveraging Job Boards and Applying Strategically

Utilizing Stackbay.org and Other Job Boards

Customizing Applications for Each Job

Following Up and Maintaining Professional Communication

Recommended Resources for Learning

Ultimate Data Science Roadmap

Introduction

The Role of a Data Scientist

Building Blocks of Data Science

Software Development Life Cycle

Programming Languages: Python and SQL

Collaboration and Version Control

SQL Databases: PostgreSQL and Beyond

NoSQL Databases

Data Warehousing

Exploratory Data Analysis and Data Cleaning

Data Visualization

Conclusion

Optimize Mongo DB Performance By Adding Indexes to Your Collection

Step 1: Setup Hemlock and Connect to your Database

Step 2: Create a Collection and Import the Jobs

Step 3: Run our aggregate Command

Step 4: Create an Index

Step 5: Run the aggregate Command Again

Conclusion

Breadth First Search Visualizer with React, Redux & ReactFlow

Read CSV Files in React Apps without Installing Any Package

Add Bootstrap to Next.js App

Add Redux to a Next JS App

Step 3: Run our `aggregate` Command

Step 5: Run the `aggregate` Command Again