This is my Task for Levitation ReactJS Frontend Development Internship.
. Project Hosted Demo Link · Project Video Demo Link . Report Issues · Suggest/Request Feature
👉Video Demo
👉 ## For login, use following credentials:
Email: levitation@levitation.in
Password: levitation
This project aims to create a comprehensive web application that combines user authentication, form submission, file uploads, and geolocation capture. By implementing a multi-step form with a progress indicator, we ensure a seamless user experience while collecting necessary information. With the integration of APIs and client-side validations, the application maintains data integrity and provides accurate feedback to the users. The goal is to deliver an intuitive and efficient solution that meets the requirements of a modern web application.
Welcome to my project that aims to create a comprehensive web application with multiple features. The primary focus of this project is to develop a multi-step form with a progress indicator, integrating various functionalities such as user login, forgot password functionality, file uploads, geolocation capture, and API integration. Through this application, users will be able to navigate through different steps, provide their information, and experience a seamless and intuitive form submission process.
Project Objectives:
Create a login page with email field validation and integrate an API for authentication.
Develop a forgot password page to allow users to reset their passwords conveniently.
Design a multi-step form with a progress indicator for a seamless user experience.
Implement client-side validation for form fields to ensure data integrity.
Integrate an API to handle form submissions and provide appropriate responses.
Enable file uploads, including both single-file upload and multi-file upload functionality.
Automatically capture geolocation during a specific step and display the status accordingly.
Enhance the application's visual appeal and user experience through well-designed interfaces.
👩💻 ** Page 1: Login Page with Email Field Validation and API Integration**
1.1 Create a login page form.
1.2 Add an email field to the form and apply email validation to ensure the correct email format is entered.
1.3 Integrate an API for handling the login functionality.
1.4 Handle the API response for successful login and display an appropriate success message.
1.5 Handle the API response for failed login and display an appropriate error message.
1.6 If the login is successful, redirect the user to the form page.
👩💻 Page 2: Forgot Password Page (No API Integration)
2.1 Create a forgot password page form.
2.2 Add an email field to the form for users to enter their registered email address.
2.3 Implement client-side validation to ensure the email is entered and in the correct format.
2.4 Provide a way for users to submit the form.
2.5 On form submission, validate the email and display a success message indicating that the password reset instructions will be sent to the email address provided, which will be OTP.
2.6 Option to enter 6 digit OTP appears
2.7 Verification of OTP.
👩💻 Page 3: Multi-Step Form with Progress Indicator, API Integration, and Geolocation
3.1 Create a multi-step form with progress indicator structure.
3.2 Divide the form into five steps: Basic Details, Address, File Upload, Multi File Upload, and Status.
3.2.1 Step 1: Basic Details
(i) Add fields for user's name, email, and phone number.
(ii) Implement client-side validation for each field.
(iii) Display error messages if any field is invalid or incomplete.
3.2.2 Step 2: Address
(i) Add fields for address details, including address lines, city, state, pincode, and country.
(ii) Include a dropdown for the country code, with the Indian flag as the default.
(iii) Implement client-side validation for each field.
(iv) Display error messages if any field is invalid or incomplete.
3.2.3 Step 3: File Upload
(i) Add a file upload field that accepts PNG and PDF file types.
(ii) Limit the upload to a single file.
(iii) Display error messages if the file type or upload limit is not met.
3.2.4 Step 4: Multi File Upload
(i) Add a file upload field that accepts PNG and PDF file types.
(ii) Limit the upload to a maximum of five files.
(iii) Display error messages if the file types or upload limit are not met.
(iv) Implement geolocation capture during this step, displaying the capture process and updating the status upon successful capture of coordinates.
3.2.5 Step 5: Status
(i) Display a relevant message indicating the successful submission of the form or any errors encountered during the process.
(ii) Integrate an API to handle form submission and provide appropriate responses based on the API response.
These steps outline the process for creating the three pages as described.
● ReactJS
● ViteJS
● Tailwind CSS
● Typescript
● CSS
● Redux
-
Clone the repo https://github.com/PriyankaKumari-2002/Levitation-Frontend-Task
-
Download the following packages of ReactJS to run the Project first and then run the command npm start in terminal of VS Code .
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"autoprefixer": "^10.4.14",
"axios": "^1.4.0",
"postcss": "^8.4.24",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-phone-input-2": "^2.15.1",
"react-router-dom": "^6.14.1",
"react-scripts": "5.0.1",
"react-select": "^5.7.3",
"redux": "^4.2.1",
"tailwindcss": "^3.3.2",
"web-vitals": "^2.1.4"
Use : Email: levitation@levitation.in
Password: levitation
Email: levitation@levitation.in
Password: levitation
|
Priyanka Kumari
|
Made with ❤️ by Priyanka Kumari
Thank you ! Levitation Team for such a wonderful task ❤️