/Tutorial3

Created with CodeSandbox

Primary LanguageJavaScript

Profile Registration and Profile Page

This project is a simple interactive site built with React and styled using Tailwind CSS. It consists of two main pages: a Profile Registration page and a Profile page.

Overview

The Profile Registration page allows users to register by filling out a form with the following fields:

  • First Name: Accepts only letters.
  • Last Name: Accepts only letters.
  • Email: Requires a valid email format.
  • Password: Must be at least 8 characters long, accepting alpha-numeric and special characters
  • Confirm Password: Must match the password field.
  • Proper front-end validations are implemented using JavaScript to ensure all fields meet the specified criteria. Upon successful validation, users are redirected to the Profile page, which displays their basic profile details such as First Name, Last Name, and Email.

Features

React: Utilized for building the user interface.

Tailwind CSS: Provides sleek and modern styling.

Front-End Validation: Ensures user input meets the required criteria.

Routing: Implemented using React Router for navigation between pages.

Deployment

The project is deployed on Vercel and can be accessed at the following link:

https://tutorial3-eight.vercel.app

GitHub Repository

The source code for this project is available on GitHub:

https://github.com/KaziNizamul/Tutorial3

GitLab Repository

The source code for this project is available on GitLab:

https://git.cs.dal.ca/nkazi/csci_5709_b00961418/-/tree/main/Tutorials/Tutorial3

Getting Started

To run this project locally, follow these steps:

  1. Clone the repository:
git clone https://github.com/KaziNizamul/Tutorial3.git
  1. Navigate to the project directory:
cd Tutorial3
  1. Install dependencies:
npm install
  1. Start the development server:
npm start

Usage

  • Navigate to the Profile Registration page.
  • Fill out the registration form ensuring all fields meet the validation criteria.
  • Click the "Register" button.
  • Upon successful validation, you will be redirected to the Profile page displaying your profile details.