PopX React App

A pixel-perfect React implementation of the PopX mobile app design, rendered as a centered mobile-app interface on the web. Built for the Educase frontend assignment.

Screens

Route	Screen	Description
/	Landing	Welcome screen with Create Account / Login actions
/login	Login	Email + password sign-in (Login enables once both fields are set)
/signup	Signup	Account creation form with validation and Agency radio selection
/profile	Account Settings	Profile view with avatar, camera overlay, and details

Tech Stack

• React 18 + Vite
• React Router DOM v6 for navigation
• Tailwind CSS v4 for styling
• "Rubik" font from Google Fonts

Project Structure

src/
├── components/
│   ├── MobileFrame.jsx   # Centers the mobile UI on the page
│   ├── InputField.jsx    # Reusable floating-label input
│   └── Button.jsx        # Reusable button (primary / secondary / disabled)
├── pages/
│   ├── LandingPage.jsx
│   ├── LoginPage.jsx
│   ├── SignupPage.jsx
│   └── ProfilePage.jsx
├── App.jsx               # Routes
├── main.jsx              # Entry + BrowserRouter
└── index.css            # Tailwind theme + fonts

Getting Started

# Install dependencies
npm install

# Start the dev server (http://localhost:5173)
npm run dev

# Production build
npm run build

# Preview the production build
npm run preview

Deployment

The project is configured for Vercel. The included vercel.json rewrites all routes to index.html so client-side routing works on refresh and deep links.

Live Demo

https://educase-frontend-assignment-murex.vercel.app/