A pixel-perfect frontend implementation of the PartyWitty React Assessment, built using React.js, Vite, and Tailwind CSS based on the provided Figma design.
This project focuses on accurate UI implementation, reusable components, navigation flow, and clean frontend architecture.
🚀 Live Website: View Project
📂 GitHub Repository: View Code
The application recreates the PartyWitty user journey where a user:
- Explores profiles on the feed
- Makes a first move by sending an invite
- Selects an event/package
- Chooses drinks
- Reviews order summary
- Completes profile verification
- Uploads vibe photos
The project follows the exact flow provided in the design assessment.
- React.js
- Vite
- Tailwind CSS
- React Router DOM
- Responsive layout techniques (desktop-first)
- Reusable components
- Custom gradients
- Figma design implementation
- SVG & image asset management
- Implemented UI based on provided Figma design
- Accurate spacing, typography, colors, and layout
Implemented complete user journey using React Router.
- Sidebar
- Feed Cards
- Buttons
- Verification Modals
- Drink Cards
- Info Panels
- Reusable Layout Sections
- Tailwind utility-first styling
- Clean gradients and shadows
- Smooth hover effects
Custom verification journey with popup interfaces.
User lands on the main feed page.
Action:
Click "Go Tonight"
⬇
A modal opens allowing the user to make their move.
Action:
Click "Make Your Move"
⬇
User explores available party/event options.
Action:
Click any event card/image
⬇
User selects drinks and additional interactions.
Action:
Click "Make The Move Now"
⬇
Displays selected item summary and pricing.
Action:
Click "Make The Move Now"
⬇
User verification prompt appears.
Action:
Click "Verify & Send Invite"
⬇
Face scanning UI screen.
Action:
Click capture/photo button
⬇
Verification completion screen.
Action:
Click "Go To Dashboard"
⬇
User uploads vibe/profile photos.
Main dashboard where users explore profiles.
Popup shown after clicking Go Tonight.
Explore available event options.
Select drinks and interaction options.
Review selected plan and pricing.
Identity verification prompt.
Face scan interface.
Successful verification state.
Upload vibe/profile photos.
src/
│── assets/
│ ├── icons/
│ ├── images/
│ ├── logos/
│
│── components/
│ ├── AboutMe.jsx
│ ├── BillDetails.jsx
│ ├── BottomCTA.jsx
│ ├── DrinkCard.jsx
│ ├── DrinkGrid.jsx
│ ├── EventCard.jsx
│ ├── EventGrid.jsx
│ ├── EventInfoCard.jsx
│ ├── FeedSidebar.jsx
│ ├── FirstMovePanel.jsx
│ ├── GestureCard.jsx
│ ├── GestureGrid.jsx
│ ├── MoveNowButton.jsx
│ ├── OrderCard.jsx
│ ├── OrderHeader.jsx
│ ├── ProfileCard.jsx
│ ├── SearchBar.jsx
│ ├── SelectedProfileCard.jsx
│ ├── Sidebar.jsx
│ ├── TermsCheckbox.jsx
│ ├── TicketSection.jsx
│ └── TopHeader.jsx
│
│── data/
│ └── events.js
│
│── pages/
│ ├── BuyDrinks.jsx
│ ├── EventListing.jsx
│ ├── FaceVerification.jsx
│ ├── FeedBids.jsx
│ ├── GoTonight.jsx
│ ├── OrderSummary.jsx
│ ├── ShowVibe.jsx
│ ├── VerificationIntro.jsx
│ └── VerificationSuccess.jsx
│
│── routes/
│── styles/
│
│── App.jsx
│── main.jsx
│── index.cssClone the repository:
git clone <https://github.com/Dhanyaja/partywitty>Navigate to project folder:
cd partywittyInstall dependencies:
npm installStart development server:
npm run devThe project will run on:
http://localhost:5173- This implementation is desktop-only, based on the assessment requirements and provided design.
- Navigation flow has been fully implemented.
- Focus was placed on clean UI implementation, component reusability, and design accuracy.
✅ Design accuracy as per Figma
✅ Reusable React components
✅ Navigation flow implementation
✅ Clean project structure
✅ Maintainable code organization
✅ UI consistency
Dhanyaja Chakram
Frontend Developer | React.js Enthusiast