SwipeMate is a property searching application that allows users to easily find rental properties by swiping through available options. Like a property by swiping right, or skip it by swiping left. A simple, intuitive interface for finding your perfect home.
- Swipe Interface: Intuitive swipe gestures to like or skip properties
- Favorites Collection: Keep track of properties you like
- Profile Settings: Customize your property preferences
- Responsive Design: Works on desktop and mobile devices
- Next.js: React framework for server-rendered applications
- React Hooks: useState, useEffect, useRef for state management and effects
- CSS: Custom CSS with CSS-in-JS styling using styled-jsx
- CSS Animations: Custom keyframe animations for swipe effects
- Node.js 14.6.0 or newer
- npm or yarn
- Clone the repository:
git clone <repository-url>
cd swipemate- Install dependencies:
npm install
# or
yarn install- Run the development server:
npm run dev
# or
yarn dev- Open http://localhost:3000 with your browser to see the application.
swipemate/
├── components/ # Reusable React components
│ ├── Navbar.js # Navigation bar component
│ └── PropertyCard.js # Property card with swipe functionality
├── pages/ # Next.js pages
│ ├── _app.js # Custom App component
│ ├── favorites.js # Saved properties page
│ ├── home.js # Main swiping interface
│ ├── index.js # Landing page
│ ├── login.js # Authentication page
│ └── profile.js # User profile settings
├── public/ # Static assets
│ └── ...
├── styles/ # Global styles
│ └── globals.css # Global CSS styles
├── package.json # Project dependencies and scripts
└── README.md # Project documentation
- Visit the landing page to get started
- Navigate to the Home page to start browsing properties
- Swipe right on properties you like, left on ones you want to skip
- Check your Favorites page to see properties you've liked
- Use the Profile page to update your preferences
Sample demo account:
- Email: demo@swipemate.com
- Password: demo123
This project is licensed under the MIT License.