Nasir Anisa
Web, App & AI Developer building scalable solutions
New to Contra
Nasir is ready for their next project!
🏨 Hotel Booking Web Application
A full-stack hotel reservation system that enables users to discover, book, and manage hotel rooms with real-time availability tracking and secure authentication.
🎯 What It Does
For Guests:
🔍 Search hotels by location, dates, and guest count
🛏️ View available rooms with real-time pricing
📅 Make instant bookings with date selection
👤 Create accounts to manage reservations
📧 Receive booking confirmations
⭐ Leave reviews and ratings
For Admins:
🏨 Manage hotel listings and room types
📊 Track bookings and occupancy rates
✅ Confirm/cancel reservations
💰 Set dynamic pricing and discounts
🛠️ Technical Architecture
Frontend (React + Tailwind CSS)
Responsive, mobile-first design
Real-time search filters
Interactive calendar for date picking
State management with React Context/Redux
Form validation with React Hook Form
Axios for API communication
Backend (Node.js + Express)
RESTful API architecture
JWT-based authentication
Password encryption with bcrypt
Input validation with Joi/express-validator
Error handling middleware
Rate limiting for security
Database (MongoDB)
User schema with roles (guest/admin)
Hotel schema with location, amenities, images
Room schema with types, pricing, availability
Booking schema with dates, status, payment
Review schema for user feedback
Aggregation pipelines for complex queries
✨ Key Features
User Authentication - Sign up, login, JWT tokens, protected routes
Hotel Search - Filter by city, price range, star rating, amenities
Real-time Availability - Check room availability for specific dates
Booking System - Reserve rooms, view booking history, cancel bookings
Payment Integration - Stripe/PayPal for secure transactions
Admin Dashboard - Manage hotels, view analytics, confirm bookings
Review System - Rate and review hotels after stay
Wishlist - Save favorite hotels for later
📊 Database Schema Example
0
4
Welcome Back - Authentication Login Page
A fully functional login interface designed for dashboard applications. Users can securely sign in with their credentials or test instantly using the provided demo account (demo@example.com (mailto:demo@example.com) / demo123). Features include real-time form validation, loading states, error handling, and responsive design that works on all devices.
Key Features:
🔐 Secure email/password authentication
🎨 Modern gradient UI with smooth animations
📱 Fully responsive layout
⚡ Instant demo account access
🛡️ Input validation & error handling
Tech Stack: HTML5, CSS3, Vanilla JavaScript, Local Storage API
0
6
ShopReact - Modern E-Commerce Platform
Project Overview
ShopReact is a fully functional, production-ready e-commerce web application built with Next.js 14, TypeScript, and modern React patterns. It demonstrates real-world functionality including product browsing, shopping cart management, category filtering, and persistent state management.
Technical Stack
Framework: Next.js 14 (App Router)
Language: TypeScript (strict mode)
Styling: Tailwind CSS + Shadcn UI
State Management: Context API + useReducer
API: FakeStore API (REST)
Data Persistence: localStorage
Icons: Lucide React
Key Features
Product Management
Dynamic product listing from external API
Real-time category filtering (Electronics, Jewelry, Men's/Women's Clothing)
Individual product detail pages with full descriptions
Responsive product grid (mobile/tablet/desktop)
Shopping Cart System
Global cart state using Context API + useReducer
Add/remove items with quantity controls
Real-time cart badge updates across the app
Persistent cart data using localStorage (survives page refresh)
Slide-out cart drawer with smooth animations
Automatic price calculations (subtotal and total)
Technical Achievements
Custom hooks (useCart, useProducts) for state encapsulation
Type-safe reducer actions and context
No prop drilling - components access global state directly
SSR hydration error handling
Local storage synchronization with React state
What This Project Demonstrates
State Management
Implemented global state without external libraries (Redux/Zustand)
Used useReducer for complex cart state transitions
Created reusable custom hooks for state access
React/Next.js Best Practices
Proper client/server component separation
Hydration error handling
Optimized images with Next.js Image component
Dynamic imports for performance
TypeScript Proficiency
Full type safety across the application
Custom interfaces for API responses
Type-safe reducer actions
API Integration
Async/await patterns for data fetching
Error handling with user-friendly messages
Loading state management with skeleton components
Category-based filtering
Live Demo & Repository
GitHub: [Your GitHub Link]
Live Demo: [Vercel/Netlify Link]
How to Run Locally
0
11
ShopReact - Modern E-Commerce Platform
Project Overview
ShopReact is a fully functional, production-ready e-commerce web application built with Next.js 14, TypeScript, and modern React patterns. It demonstrates real-world functionality including product browsing, shopping cart management, category filtering, and persistent state management.
Technical Stack
Framework: Next.js 14 (App Router)
Language: TypeScript (strict mode)
Styling: Tailwind CSS + Shadcn UI
State Management: Context API + useReducer
API: FakeStore API (REST)
Data Persistence: localStorage
Icons: Lucide React
Key Features
Product Management
Dynamic product listing from external API
Real-time category filtering (Electronics, Jewelry, Men's/Women's Clothing)
Individual product detail pages with full descriptions
Responsive product grid (mobile/tablet/desktop)
Shopping Cart System
Global cart state using Context API + useReducer
Add/remove items with quantity controls
Real-time cart badge updates across the app
Persistent cart data using localStorage (survives page refresh)
Slide-out cart drawer with smooth animations
Automatic price calculations (subtotal and total)
Technical Achievements
Custom hooks (useCart, useProducts) for state encapsulation
Type-safe reducer actions and context
No prop drilling - components access global state directly
SSR hydration error handling
Local storage synchronization with React state
What This Project Demonstrates
State Management
Implemented global state without external libraries (Redux/Zustand)
Used useReducer for complex cart state transitions
Created reusable custom hooks for state access
React/Next.js Best Practices
Proper client/server component separation
Hydration error handling
Optimized images with Next.js Image component
Dynamic imports for performance
TypeScript Proficiency
Full type safety across the application
Custom interfaces for API responses
Type-safe reducer actions
API Integration
Async/await patterns for data fetching
Error handling with user-friendly messages
Loading state management with skeleton components
Category-based filtering
Live Demo & Repository
GitHub: [Your GitHub Link]
Live Demo: [Vercel/Netlify Link]
How to Run Locally
0
15