Home
Javascript
Step-by-Step Implementation of the App

Step-by-Step Guide in Building the App

Step-by-Step Implementation

Step-by-Step Implementation

In this lesson, we will get our hands dirty with the actual implementation of a birthday reminder application in React JS. Let’s get started with the initial project setup!

Set up the environment

As the first step to get started with the implementation, we need to set up the environment for the project. Follow the below steps to set up the project.

Open VScode
Create a new folder named ‘birthday-reminder’
Open ‘new terminal’
Enter the command ‘npx create-react-app app’. This will create a new React JS project with the name ‘app’.
Once the installation is complete, enter the command ‘cd app & npm start’ to start the React JS application in localhost:3000.

After removing the unnecessary files and folders, the app directory will look like this.

Create a Data

In this step, we are going to create data that needs to be displayed on the website. Since this is a basic level application, we are going to create only 5 data in Javascript object format. For this,

Create a ‘data’ directory in the ‘src’ folder
Create a file named ‘data.js’

Add five person’s details in the below format and export it to use in other areas of the code.

export default [
  {
    id: 1,
    name: "Roopa Dharshini",
    age: 21,
    image:
      "https://res.cloudinary.com/diqqf3eq2/image/upload/v1595959131/person-2_ipcjws.jpg"
  },
  {
    id: 2,
    name: "Allen",
    age: 22,
    image:
      "https://res.cloudinary.com/diqqf3eq2/image/upload/v1595959131/person-3_rxtqvi.jpg"
  },
  {
    id: 3,
    name: "Harish Raghavendar",
    age: 20,
    image:
      "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883423/person-4_t9nxjt.jpg"
  },
  {
    id: 4,
    name: "Muthuganesan",
    age: 23,
    image:
      "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883417/person-3_ipa0mj.jpg"
  },
  {
    id: 5,
    name: "Keerthana",
    age: 22,
    image:
      "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883334/person-1_rfzshl.jpg"
  }
];

In the next lesson, we will look into the implementation of displaying the details in a formatted way.

Create Application Structure

In this step, we will create the basic structure to the application such as the output display area. This will make it easy to view the elements we need for the application.

For the birthday reminder, we need to only display the people’s details.
Create a ‘List.jsx’ file to format the data.

// List.jsx


import React from 'react'


// accept props here
const List = (props) => {
    const { people } = props
    // Map over prop "people" and code the right structure


    return people.map((person) => {
        const { id, name, age, image } = person
        return (
            <article key={id}>
                <img src={image} alt={name} />
                <div>
                    <h4>{name}</h4>
                    <p>{age} years</p>
                </div>
            </article>
        )
    })
}


export default List

Now that we created a format for the data using a component. Let’s create the application structure.

Modify the code in ‘App.js’

import React from 'react'
import data from './data/data'
import List from './List'
function App() {
    }
    return (
        <main>
          <h1>Birthday Reminder</h1>
            <section className="container">
                <h3> birthdays today</h3>
                <List people={people} />
                <button >Clear All</button>
            </section>
            <a href="https://www.guvi.in/" className="copywright">
        Made by Guvi💚
      </a>
        </main>
    )
}


export default App

Apply Styles to the Application

The next step is to add styles to each element to make it visually appealing using CSS. In this project, we need only one css file ‘App.css’.

Modify the existing code in ‘App.css’

body{
    background-color: #f28ab2;
}
main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.container {
    width: 90vw;
    margin: 2rem 0;
    max-width: max-content;
    background: #fff;
    border-radius: 10px;
    padding: 1.5rem 2rem;
}
.container h3 {
    text-align: center;
    font-weight: normal;
    text-transform: none;
    font-size: 1.5rem;
    margin-bottom: 2rem;
    align-self: center;
}
.person {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.5rem;
    margin: 1.5rem;
    align-items: center;
}
.person img {
    width: 75px;
    height: 75px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: var(--light-shadow);
}
.person h4 {
    margin-bottom: 0.35rem;
}
.person p {
    margin-bottom: 0;
}


button {
    align-self: center;
  width: 100%;
  border: none;
  color: #fff;
  font-size: 1.25rem;
  padding: 10px 0;
  margin: 10px;
  align-self: center;
    background-color: red;
  cursor: pointer;
}


.copywright {
    text-decoration: none;
    /* font-size: 12px; */
    color: #fff;
    margin-top: 20px;
}

Once you add the styling, the application will look like the below output.

Add Functionality to the Application

The last part of the application is to add the logic for the clear all button to be able to clear the data and functionality behind the extraction of data from the data folder. To do that, you do not need to create a separate file. We can achieve the logic by using useState() and onClick() function we saw in the previous lesson.

Add the logic to the App component.

import React, { useState } from 'react'
import data from './data/data'
import List from './List'
function App() {
    // create a state variable here
    const [people, setPeople] = useState(data)


    // this should clear all records
    function clearAllRecords() {
        setPeople([])
    }
    return (
        <main>
          <h1>Birthday Reminder</h1>
            <section className="container">
                <h3>{people.length} birthdays today</h3>
                <List people={people} />
                <button onClick={clearAllRecords}>Clear All</button>
            </section>
            <a href="https://www.guvi.in/" className="copywright">
        Made by Guvi💚
      </a>
        </main>
    )
}


export default App

With adding the logic to the component, you will now be able to see the entire working of the controls and display. The output will look like this

Congratulations 🎉!

You have successfully created your own birthday reminder application.

In the next lesson, we will look into the steps to deploy the project using vercel.

See you in the next lesson!

Recommended Handbooks

4.7

C++ Handbook

Level up your programming skills with our C++ Tutorials hub, guiding you from beginner to advanced. Start your journey now!

English

5966

3 hrs

4.7

Python Basics Handbook

Level up your programming skills with our Python Tutorials hub, guiding you from beginner to advanced. Start your journey now!

English

6078

3.5 hrs

4.6

Javascript Handbook

Level up your programming skills with our JavaScript Tutorials hub, guiding you from beginner to advanced. Start your journey now!

Step-by-Step Guide in Building the App

Contents

Step-by-Step Implementation

Set up the environment

Create a Data

Create Application Structure

Apply Styles to the Application

Add Functionality to the Application

ReactJS Projects

Recommended Handbooks

C++ Handbook

Python Basics Handbook

Javascript Handbook

Build Your Stopwatch Using ReactJS

Building a Random Joke Generator Using ReactJS

Build a Character Counter in React JS

Build Your QR Code Generator using React JS

Build a Birthday Reminder App using React JS

Building Random Password Generator using ReactJS

Temperature Converter Project in React

Building a To-Do List App Using ReactJS

Building a Weather App Project Using ReactJS

Building a Quiz App in ReactJS

Building a GenZ Carousel App in React