DEV Community: kande drivano

User authentication using fake back end: db.json

kande drivano — Mon, 20 Nov 2023 00:23:00 +0000

Introduction

Hello everyone,
In this post, I will share with you how I authenticate my users using a fake database db.json, in my Front-end React project. We will first ask them to provide a correct password after registration, and also we will prevent them from going back to the app or accessing the functionality after they log out.

Authentication during the Login process.
First, let's assume that we have a login component with two controlled inputs: Email and Password.
Also, this form is created using React-Bootstrap.

import React from "react"

function Login(){
//All the other codes controlled the form. See the Previous post for more on that

return(
<div>
<form onSubmit={handleSubmit}>
<label htmlFor="email">email</label>
<input name="email" value={email}>
<label htmlFor="password">password</label>
<input name="password" value="password">
<button type="submit">login</button>
</form>
</div>
})

This is a simple login form. We will not talk about how to control the inputs in React for that, as we already talked about that in the previous post. see this post.
Instead, here, we will only talk about the handleSubmit() function.

Let's also assume that we have created the Login component in our components folder, so write this code in Login.js.

import React from "react"

function Login(){
//All the other codes controlled the form.

function validation(){
let result = true;
if(email ==="" || email===null){
result = false;
alert("please enter email")
}
if(password==="" || password ===null){
result=false;
alert("please enter your password")
}
else{
return result;
}

}
function handleSubmit(e){
e.preventDefault();
fetch("your url"){
.then(response=>response.json)
.then(users=>{
if(object.keys(users).length===0){
alert("please provide valid informations")
}else{
const aUser = users.find(user =>user.password === password);
sessionStorage.setItem("email", email)

if(aUser){
alert("successfully login")
history.push("/home")
}else{
alert("invalid email or password")
}}
)})
}
}
return(<div>
<form onSubmit={handleSubmit}>
<label htmlFor="email">email</label>
<input name="email" value={email}>
<label htmlFor="password">password</label>
<input name="password" value="password">
<button type="submit">login</button>
</form>
</div>)
}

Here, we first created a function named validation(). This function is used to validate whether an email and password are entered.
If validation is verified, then in our handleSubmit() function, we fetch our users' array from the db.json file.

object.keys(users) is used to get an array of keys from the users' object. More on that here Object.key()

this code is used to check if the users' object is empty by examining its keys. If the object has no keys (i.e., it's empty), a warning message is displayed to prompt the user to provide valid information.

If the user provides the information, then we check if the Email and Password provided by the user correspond to a user in our database. We do that using the JavaScript fin() function.
If the Email and Password are correct, we redirect the user to the Home page using the react useHistory() hook. Otherwise, we ask him to enter the right informations.

We Also create a sessionStorage with the key=“email” and the value=email.

Session storage: is often used to store temporary user data or application state that needs to be available as long as the user is interacting with a specific page but doesn't need to persist beyond that. It's a useful tool for maintaining data consistency within a single session without the need for server-side storage or cookies.

Logout process
Let’s create a Logout Component in our components folder.

import React, {useEffect} from "react"
import {useHistory} from "react-router-dom"

function Logout(){
const history = useHistory()

useEffect(()=>{
const email = sessionStorage.getItem("email");
if(email==="" || email===null) history.replace("/login")
}, [history])

function handleLogout(){
sessionStorage.removeItem("email");
 history.replace("/login")
}
return (
<div>
<button onClick={handleLogout}>log out</button>
</div>)

}

Here, in React useEffect() hook, we use the variable "email" to get the sessionStorage("email")
And we redirect the user to the Login page when the sessionStorage becomes empty or null.

In the handleLogout() function, we remove the sessionStorage and redirect the user to the Login page when the Logout button is clicked. That will prevent them from accessing the app's functionality or using the browser's "back" and "forward" buttons to get back in the app.

Conclusion
And this concludes the Authentification process using db.json. Note that this process works just perfectly for my project as a new developer. I went through much research to get this working, so if there are any errors or mistakes, please help me correct them in the comment section. As I'm still learning, your feedback will be very helpful.

Thank you

How I Built My Single-Page React.js Web App.

kande drivano — Sun, 01 Oct 2023 15:05:17 +0000

Introduction

In my pursuit of becoming a front-end web developer, I embarked on the journey of creating a single-page React app for a school project, which I named "Dream Job." This application serves as a platform for connecting job seekers with job opportunities, enabling users to search for and apply to job listings while also allowing recruiters to post their job openings and receive applications from suitable candidates.

Objective

The primary goal behind developing this app was to serve my community and provide a solution to a common challenge. In many instances, people within my community frequently asked one another about job opportunities. As a web developer, I recognized the need to create a centralized platform where individuals could easily find job listings without relying on personal connections.

The Creation Process

Technology and Process

For this project, I focused on building the front-end of the application. To achieve the final result, I employed the following technologies:

React: As the core framework, React was my obvious choice, given that it was a school project.
React-Bootstrap: To streamline the development of forms and ensure the app's responsiveness across various devices.
React-toastify: To provide user feedback after performing actions.
Creating the React App

The journey began with setting up the basic file structure for the app using the create-react-app package. Here's the terminal command for initializing the project:

npx create-react-app my_phase2_project

Using React-Bootstrap
To leverage React-Bootstrap, you should also install the npm package:

npm install react-bootstrap

After installation, import the necessary components into your project, as demonstrated below:

Let's create a component called Component.js:

import React from "react";
import { Form, Button } from "react-bootstrap";

function Component() {
  // Other code
  return (
    <form>
      <Form.Group controlId="theId">
        <Form.Label className="name">Name</Form.Label>
        <Form.Control className="try" placeholder="Enter name" />
      </Form.Group>
      <Button>Send</Button>
    </form>
  );
}

In our Component.js, we imported Form and Button from react-bootstrap.
Ensure that you include the React-Bootstrap CSS at the top of your index.js file to prevent conflicts with your custom CSS:

In index.js

import 'bootstrap/dist/css/bootstrap.css';
import React from "react";
// Other imports

Using React-toastify

React-toastify is the best tool to give feedback to a user after performing a task. As with the other technologies, we also need to import the package from npm.

steps:
Install the package using npm:

npm install --save react-toastify

Import the ToastContainer component and the corresponding CSS into your App component:

In App.js:

import React from "react";
import { ToastContainer } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';

function App() {
  // Other code
  return (
    <div>
      <ToastContainer />
      {/* Other components */}
    </div>
  );
}

In the App.js component, we imported ToastContainer from react-toastify, and we rendered it at the top of the other component.
Now, you can use React-toastify in any component by importing it and calling the toast function as shown below:

Let's use it inside our Component.js

import React from "react";
import { Form, Button } from "react-bootstrap";
import { toast } from "react-toastify";

function Component() {
  function send() {
    toast.success("Sent with success");
  }
  // Other code
  return (
    <form>
      <Form.Group controlId="theId">
        <Form.Label className="name">Name</Form.Label>
        <Form.Control className="try" placeholder="Enter name" onChange={handleChange} />
      </Form.Group>
      <Button onClick={send}>Send</Button>
    </form>
  );
}

Here, we imported the toast function from react-toastify. and we created a function called send that will be triggered anytime the user clicks on the Send button, and the successful message will appear. "Sent with success"

Controlling the inputs

One of the important things in learning React is to control the inputs and forms. In the beginning, it seems to be complicated, but in reality, it’s a simple process.
In this post, we will see how to control the inputs using the onChange event, and in the other post, we will discuss how to use the onSubmit event in react.

Let’s use the same component.js and control the inputs.

To effectively control input fields in React, we use the useState hook. Here's an example:

in the Component.js

import React, { useState } from "react";
import { Form, Button } from "react-bootstrap";
import { toast } from "react-toastify";

function Component() {
  const [input, setInput] = useState({
    email: "",
    password: ""
  });


  function handleChange(event) {
    const value = event.target.value;
    const name = event.target.name;

    setInput({
      ...input,
      [name]: value
    });
  }


  function handleSubmit() {
    // Other code
    toast.success("Sent with success");
  }

  return (
    <form onSubmit={handleSubmit}>
      <Form.Group controlId="email">
        <Form.Label className="email">Email</Form.Label>
        <Form.Control className="try" placeholder="Enter email" name="email" onChange={handleChange} />
      </Form.Group>

      <Form.Group controlId="password">
        <Form.Label className="password">Password</Form.Label>
        <Form.Control className="try" placeholder="Enter password" name="password" onChange={handleChange} />
      </Form.Group>

      <Button type="submit">Send</Button>
    </form>
  );
}

Here, we create a second Form.group for the password field. We create a state called input using the useState hook that we imported from React.
we next seated the initial value of the input to be an object with the keys email and password and set them to empty strings.

We then created the callback function name handleChange to control and passed it to both inputs using the onChange event.
Inside handleChange, we created two constants, the value and the name, which track the input's value and name, respectively, while we start typing in.
Finally, we use the setState function: setInput, pass in the state, and associate the name and value using the spread operator.

Other React Hooks and Libraries Used
In addition to the above technologies, I also employed the following React hooks and libraries:

useHistory() hook for navigating users to other pages.
React Router (Switch, Route, BrowserRouter) for implementing the navigation bar.
For the navigation bar itself, I used React-Bootstrap components.
Here's an example of how to create a navigation bar using React-Bootstrap:

// Navbar.js
import React from "react";
import Container from "react-bootstrap/Container";
import Nav from "react-bootstrap/Nav";
import Navbar from "react-bootstrap/Navbar";

function Navbar() {
  // Other code
  return (
    <Navbar bg="choosefrombootstrap">
      <Container>
        <Navbar.Brand>Your brand</Navbar.Brand>
        <Nav>
          <Nav.Link href="/">Home</Nav.Link>
          <Nav.Link href="/contact">Contact</Nav.Link>
          <Nav.Link href="/about">About</Nav.Link>
        </Nav>
      </Container>
    </Navbar>
  );
}

Ensure that the defined routes in your navigation bar correspond to the routes defined in your App.js file, as illustrated below:

// App.js
import React from "react";
import { ToastContainer } from "react-toastify";
import { Switch, Route } from "react-router-dom";
import 'react-toastify/dist/ReactToastify.css';

function App() {
  // Other code
  return (
    <div>
      <ToastContainer />
      <NavigationBar />
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route exact path="/about">
          <About />
        </Route>
        <Route exact path="/contact">
          <Contact />
        </Route>
      </Switch>
    </div>
  );
}

Lastly, wrap your entire app with BrowserRouter in the index.js file:

// index.js
import 'bootstrap/dist/css/bootstrap.css';
import React from "react";
import { createRoot } from "react-dom";
import { BrowserRouter } from "react-router-dom";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Conclusion
This marks the end of the first post of my learning in React. And there are some other parts, like how I used onSubmit and also how I authenticated the users. I will cover these points in the future.
As I built only the front end of the Dream Job App, I'm actively learning how to work in the back end because I would like to bring this app alive to make it useful.
So, if anyone is interested in helping to build the back end or make a suggestion, the project is on Github.
Your input and collaboration are greatly appreciated as I continue to learn and grow in the world of web development.

Thank you.

Building an Online Store: My Journey as a Web Developer

kande drivano — Mon, 17 Jul 2023 11:45:22 +0000

Introduction

As a web development student at Flatiron School, I recently completed my Phase 1 project, a single-page online store website because I'm learning Front End. This project aimed to provide visitors with the ability to select products, place orders, and subscribe to our email list. Adhering to the project requirements, the orders and subscribers lists were all displayed on the same page, resulting in a seamless user experience.

Inspiration and Creation

The idea for this web page came to me while brainstorming project concepts. I was inspired to develop a fully functional web page from scratch. It was a thrilling challenge, and I wanted to create an online store that combined both front-end design and back-end functionality.

Technologies Utilized

To bring my vision to life, I employed a combination of technologies, including:

HTML: Laying the foundation for the web page's content.
CSS: Styling the page and enhancing its visual appeal.
JavaScript: Adding interactivity and functionality.
Bootstrap and Font Awesome: Utilizing these libraries for modern designs and icons, respectively.

Overcoming Challenges

Throughout the development process, I faced a few challenges that tested my problem-solving skills:

1. Implementing a Local Database

Initially, I lacked a database to store data. To overcome this, I sought guidance from my instructor, and together, we set up a local database using a db.json file. We created three components to store products, orders, and subscribers:

{
  "Products": [
    { "product#1" },
    { "product#2" }
  ],
  "Orders": [
    { "order#1" },
    { "order#2" }
  ],
  "Subscribers": [
    { "subscriber#1" },
    { "subscriber#2" }
  ]
}

To start the server, we ran json-server --watch db.json in the project directory.

2. Styling and Layout

Rendering the products into the designated div posed another challenge. I researched on Google and discovered that changing the display property in CSS resolved the issue:

div {
  display: inline-block;
  /* Other properties */
}

3. Create the input and the label

Additionally, Another difficult part was to create the label and the inputs and make them display properly.

I experimented with two methods to create labels and inputs and ensure a clean display:

Method 1:

Created the input elements inside the label elements.

<div class="labelAndInput">
<label for="street">Street <br><input type="text" id="street" name="street" required placeholder="Street" autocomplete="address-level1"></label>
<label for="city">City <br><input type="text" id="city" name="city" required placeholder="City"></label>
</div>

With that method, I did not make any Css styling, and everything was displayed as needed.

Method 2:

The other way is to create a div element for every label and its input as follows:

<div class="labelAndInput">
<div class="credit-card-number pay">
  <label for="creditCard">Credit card number</label><br>
  <input type="number" id="creditCard">
</div>
<br><div class="expiration-date pay">
 <label for="expiration">Expiration</label><br>
 <input type="text" id="expiration">
</div>
</div>

For Method 2, I applied custom CSS styles to achieve the desired layout.

Future Plans

Moving forward, I intend to expand this project by implementing the back-end and creating multiple pages instead of a single page. I aim to deploy the project online, allowing users to interact with real products. If you're interested in contributing or providing feedback, feel free to fork the project on GitHub.
Github

Conclusion

This marks the completion of my very first project in my journey to become a web developer. I'm excited about the possibilities that lie ahead and the growth I will experience throughout this immersive learning experience. Feedback from the community and fellow developers is greatly appreciated, especially as I embrace the role of a beginner in this vast and ever-evolving field.

Thank you for reading!