Tutorial 3

Date Created: 13 February 2024
Last Modification Date: 13 February 2024
Tutorials URL: https://git.cs.dal.ca/anagpal/csci-5709-tutorials
GitLab URL: https://git.cs.dal.ca/anagpal/csci-5709-tutorials/-/tree/main/Tutorial3
Github URL: https://github.com/ashishnagpal2498/tutorial-3-profile-reg
Deployment Link: https://tut-3-profile-reg.netlify.app/

Authors

Ashish Nagpal

Getting Started

To start with the project, I created a new sample react application using npx create-react-app . command. Following this I created my required components Profile and ProfileRegistration and used CSS to beautify the pages. Moreover I have installed react-router-dom to navigate between pages.

Prerequisites

React - Web framework
Npm - Dependency Management
Node - Javascript Runtime environment

Installing

Clone the project repository
Go into the project directory and install the required dependency using npm install command.
Once the dependencies are installed, start the development server by npm start command.
Server will be running on port - 3000 http://localhost:3000.

Deployment

The deployment is made through Netlify.

Sources Used

Code

1. ProfileRegistration.js

Lines 50 - 53

      if (!/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/.test(formData.password)) {
        newErrors.password = "Password should be alpha-numeric, at least 8 characters long and have atleast 1 special character ";
      }

The code above was created by adapting the code in stackoverflow as shown below:

"^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$"

The code was used to have an understanding on regex.
I used the code because I wanted to have a check on password that it should be 8 characters long with 1 special character and a number
I used the regex expression in if statement to check the password along with .test inbuilt javascript method.

2. ProfileRegistration.js

Lines 72 - 78

navigate("/profile", {
          state: {
            firstName: formData.firstName,
            lastName: formData.lastName,
            email: formData.email,
          },
        });

The code above was created by adapting the code in dev.to as shown below:

{
  key: 'ac3df4', // not with HashHistory!
  pathname: '/somewhere',
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}

The code was used by studying about different options to pass information between pages in React.
I used the code because I wanted to display the information of user in the profile page which is submitted by user on Profile Registration page. Since there is no backend yet, thus the information must be pass through navigation or stored on browser locally.
I used the navigate method to pass the firstName lastName and email of the user to profile page.

Acknowledgments

I am grateful to the coding community for all of their hardwork in materials related to frontend development. The content provided served as a foundation for understanding and learning it's functionality and logic.

ashishnagpal2498/tutorial-3-profile-reg