Kryzen-assignment

Technologies used

1. Frontend: React.js 2. Backend: Node.js 3. Database: MongoDB (or your preferred choice) 4. Authentication: JSON Web Tokens (JWT)

User Authentication:

Implement user authentication to ensure secure access to the application. Users should be able to: 1. Register a new account with a unique username and password. 2. Log in securely with their credentials. 3. Access specific pages only when authenticated. 2. Data Collection Form:

Create a simple form to collect the following user information

1. Name 2. Age 3. Address 4. Photo (upload functionality) 3. Data Display and Preview: After submitting the form, display the collected data as a preview to the user. The preview should include the user's details and a thumbnail of the uploaded photo. 4. logout functionality

4. PDF Download

Provide users with the option to download the collected data in PDF format. The PDF should be generated dynamically and include all the information entered in the form.

Project Setup

1.Clone the Repository 2.Go to backend folder - open terminal - npm install (to install dependencies) create .env file in backend folder and add PORT=5000 MONGODB_URI= your mongodb url SECRET_KEY= your secret key then in terminal add run command node server.js. your server will run on port 5000 and connect to mongodb.

3.Go to fronted folder - open terminal run command npm install your dependencies will get installed . then run another command npm run start your frontend will run on port 3000

User Guide

Step-1 : Open the app using the following link : https://kryzen-assignment.netlify.app/ step-2 : after opening the app you will first get the Signup Page to create a user here you need to add two credentials username and password. every user must have unique name that's why if your username is unique then and then only you will be redirect to Login Page otherwise you will get an error that User Already Exists !

this is the screenshot of Signup Page

step-3 : after successful signup you will be redirect to Login Page where you need to add the same credentials which added while Signup. if your credentials are correct then and then only you will be redirect to update that users information . otherwise you will get an error Invalid username or password

this is the screenshot of Login Page

step-4 : after successful Login you will be redirect to user profile page where if user has already filled the information like Name,Age,Image,Address then it will show the user information with logout button and Edit Profile button after clicking on Edit Profile button you will able to see one form with Name,Age,Image URL,Address after adding the information you can view Preview of that information and also you can Export to pdf .

this is the screenshot of page to update information of user

step-5: after adding the information you will see the information below the update form with the button export to pdf if you want to export to pdf you can click on that button. and youcan see the information inside the pdf for preview. you can also download that pdf. and if you want to close the preview at the right side there is a X button to close preview.

these are the screenshots of the page for pdf preview and download

!! Thank You !!