QualifierDevTask Assignment

A responsive React.js web application built as part of the Qualifier Dev Task Assignment. The project demonstrates a simple user onboarding flow including account creation, login, home page, and user profile, built using modern React practices and styled with Tailwind CSS.

---

🚀 Live Demo

You can run the project locally by following the installation steps below.

---

📌 Features

• Create Account page
• Login page
• Home page
• Profile page
• Bottom pagination navigation
• Responsive UI
• Component-based architecture
• Clean and modular folder structure

---

🛠 Tech Stack

• React.js
• JavaScript (ES6+)
• Tailwind CSS
• HTML5
• CSS3
• Node.js
• npm

---

📁 Project Structure

QualifierDevTask-assignment
│
├── public
│   ├── index.html
│   ├── favicon.ico
│   ├── logo192.png
│   ├── manifest.json
│   └── robots.txt
│
├── src
│   ├── components
│   │   ├── BottomPagination.js
│   │   ├── CreateAccount.js
│   │   ├── Home.js
│   │   ├── Login.js
│   │   └── Profile.js
│   │
│   ├── App.js
│   ├── index.js
│   └── index.css
│
├── package.json
├── package-lock.json
├── tailwind.config.js
├── postcss.config.js
└── README.md

---

⚙️ Installation & Setup

Follow these steps to run the project locally.

1️⃣ Clone the repository

git clone https://github.com/saisudheer-18/QualifierDevTask-assignment.git

2️⃣ Navigate into the project folder

cd QualifierDevTask-assignment

3️⃣ Install dependencies

npm install

4️⃣ Run the development server

npm start

The application will start at:

http://localhost:3000

---

📸 Application Screenshots

Home Page

Login Page

Create Account Page

Profile Page

---

✨ Components Overview

BottomPagination

Handles navigation between pages.

CreateAccount

Allows users to register by entering basic information.

Login

Allows existing users to log into the application.

Home

Landing page shown after login.

Profile

Displays user information and account details.

---

📦 Dependencies

Main dependencies used in this project:

• react
• react-dom
• react-scripts
• tailwindcss
• postcss

Install them using:

npm install

---

📌 Notes

• The project uses functional components
• Styling is implemented using Tailwind CSS
• The application follows modular component architecture
• node_modules is excluded using .gitignore

---

👨‍💻 Author

KANCHARLAPALLI SAI SUDHEER

GitHub https://github.com/saisudheer-18

---

📄 License

This project is created for learning and assignment purposes only.