Table of contents

01 02 03
Introduction Ideation Phase Business Plan
Phase

04 05 06
Development Testing Phase Deployment Phase
Phase
 01
Introduction
Introduction
Vision
At Inplace, our vision is to become the leading platform for
apartment rentals, known for its reliability, user-centric
design, and innovative solutions.

• We aim to redefine the rental experience by making it

more accessible, efficient, and enjoyable for everyone
involved.
• By leveraging advanced technology and a deep
understanding of our users' needs, we aspire to set new
standards in the apartment rental industry.
Introduction
Mission
At Inplace, our mission is to connect people with their ideal
living spaces through a user-friendly platform that caters to
both renters and property owners.

Simplifying the Ensuring Quality Fostering Community

Rental Process and Reliability and Trust
• User-friendly interface for • High standards for • Secure and supportive
easy navigation and comfort and safety in platform for the rental
transactions. listings. journey.
• Designed for all skill levels • Thoroughly vetted • Features include
to find and book properties to provide verified reviews,
apartments effortlessly. peace of mind for renters secure payments, and
and confidence for dedicated customer
owners. support.
 02
Ideation Phase
The journey of Inplace began here.
Conceptualization Market Research
Transforming ideas into Understanding market
structured concepts. dynamics, target audience,
and competitors.

Brainstorming
Sessions
Refining ideas into
actionable plans.
Conceptualization
● Identified a market gap for a streamlined, user-
friendly rental platform.

● Envisioned a solution prioritizing intuitive

navigation, comprehensive listings, secure
payments, and reliable support.

● Defined core values: quality, reliability, user-centric

design.
Market Research
Market Research
● Primary Research: Surveys and interviews to
understand user needs and pain points.

● Secondary Research: Industry reports, market

trends, and competitor analysis.

Key Findings
● Demand for Convenience: Users want ease of
use.

● Safety and Trust: Major concerns for renters and

owners.

● Competitive Landscape: Room for innovation

despite established players.
Brainstorming Sessions
Session 1: Key Features
Identified advanced search filters, user reviews, and ratings.

Session 2: User Experience Design

Mapped user journeys, identified pain points.

Session 3: Technical Requirements

Discussed technology stacks, scalability, technical needs.

Session 4: Business Model and Monetization

Explored revenue streams: commission fees, premium
listings, advertising.

Session 5: Branding and Marketing

Discussed brand identity, target audience, marketing
strategies.
 03
Business Plan
Phase
Business Model
Our business model is centered around creating
a platform that facilitates easy and secure
apartment rentals.
• Commission-Based Revenue: Percentage of each
transaction.

• Freemium Model: Basic listings free, premium listings

for a fee.

• Subscription Services: Plans for property owners with

additional tools and analytics.

Goals:
• Support growth
• Ensure profitability
• Provide value to users
Revenue Streams
Primary Revenue Streams:
• Commission Fees: Fixed percentage of each booking
transaction.

• Premium Listings: Better visibility and priority

placement.

Secondary Revenue Streams:

• Advertising: Opportunities for related businesses.

• Subscription Services: Advanced management tools and

analytics for property owners.

Potential Future Revenue Streams:

• Partnerships and Collaborations: Exclusive deals and
packages.
• Insurance Services: Options for renters and property
owners.
Competitive Analysis
Understanding the market landscape and differentiating
Inplace from key competitors:
• Airbnb: Global leader with extensive listings, but high
service fees.
• Booking.com: Strong customer service and loyalty
programs, but less user-friendly for apartment rentals.
• VRBO: User-friendly interface for vacation rentals, but
smaller market share.
• Expedia: Extensive travel services, but less competitive in
apartment rentals.
 04
Development
Phase
Development Phase

Technology Stack Planning Phase

We selected technologies that offer To ensures that the project is well-
scalability, maintainability, and structured, tasks are clearly defined,
performance and resources are effectively
allocated.

Backend Development Frontend Development

Involved setting up the core Integral part of delivering a
infrastructure, implementing key seamless user interface and user
features, and integrating them experience.
seamlessly with the frontend.
Technology Stack – UI Design
● Figma
○ A cloud-based design tool used for UI/UX design, collaboration, and prototyping.
○ It allows teams to work together in real-time, creating and sharing designs seamlessly.
○ Figma's real-time collaboration and cloud-based nature make it an ideal choice for our
distributed development team.
○ It allows us to iterate quickly on UI designs, create interactive prototypes, and maintain
design consistency across the platform.
○ Figma's extensive feature set and ease of use significantly enhance our design
workflow.
Technology Stack - Backend
Node.js Express.js Cloudinary
It is designed to build Node.js web application Cloud service that
scalable network framework that provides provides an end-to-
applications, making it a robust set of features end image and video
an ideal choice for for web and mobile management solution.
backend development. applications.

Joi jsonwebtoken Nodemailer

Powerful schema Library for generating Module for Node.js
description language and verifying JSON applications to easily
and data validator for Web Tokens (JWTs). send emails.
JavaScript.
Technology Stack – API Documentation
● Swagger
○ An open-source framework for API development and documentation. It provides tools for
designing, building, and documenting RESTful APIs.
○ Swagger’s ability to generate interactive and standardized API documentation ensures that
our backend API is well-documented and easy to use for developers.
○ The interactive documentation facilitates testing and integration, while the code
generation capabilities speed up development and ensure consistency between
the API specification and implementation.
Technology Stack - Database
● PostgreSQL
○ Advanced, open-source relational database management system (RDBMS) known for its
robustness, scalability, and compliance with SQL standards.
○ The decision to use PostgreSQL was driven by its robust feature set, scalability, and ability to
handle complex queries efficiently.
● Sequelize
○ promise-based Node.js ORM for Postgres, MySQL, MariaDB, SQLite, and Microsoft SQL
Server.
Technology Stack - Frontend
React TypeScript Redux
It allows developers to It offers static type It helps you write
create large web checking at compile applications that behave
applications that can time, which helps catch consistently, run in
update and render errors early in the different environments
efficiently in response development process. (client, server, and native),
to data changes. and are easy to test.

Vite Tailwind CSS ShadCN

Build tool that Utility-first CSS Component library that
provides a faster and framework for rapidly provides a set of pre-
leaner development building custom user designed, customizable UI
experience for modern interfaces components for React
web projects. applications.
Planning Phase
● Initial Meetings and Strategy Sessions
○ Define Project Scope
○ Set Objectives and Goals
○ Identify Key Milestones
○ Allocate Resources
○ Risk Management
● Task Management with ClickUp
○ Create Detailed Task Lists
○ Set Priorities
○ Track Progress
○ Collaborate Effectively
○ Manage Deadlines
Planning Phase
● Code Management with GitHub
○ Version Control
○ Branching and Merging
○ Pull Requests
○ Issue Tracking
○ Continuous Integration
● Development Environment with Docker
○ Environment Consistency
○ Isolation
○ Scalability
○ Portability
○ Efficiency
Backend Development
● Initial Setup and Configuration
○ Setup Backend Skeleton
○ Setup Repository
○ Setup Backend Directory Structure
○ Setup Docker and Docker Compose

● Authentication and User Management

○ User Registration
○ Account Verification by Email
○ Login
○ Logout
○ User Profile Endpoints
Backend Development
● Core Functionalities
○ Offer Endpoints
○ Filter Offers Endpoint
○ Setup a Generic Filtering Mechanism
○ Likes Feature

● Image Upload and Processing

○ Research Optimal Image Upload Methods
○ Image Upload Endpoint
○ Image Processing
Backend Development
● Integration and Enhancements
○ Setup GitHub Actions
○ Setup a Framework to Automatically Generate Swagger Docs
○ Setup Mailhog Container and REQUIRE_EMAIL_VERIFICATION Environment Variable
○ Setup Prettier and Prettier Pre-commit Hook
○ Error Handling and Logging
Frontend Development
● Frontend Directory Structure and Configuration
○ This structure ensures that the codebase is scalable and maintainable.
○ The configuration involves setting up necessary files such as vite.config.ts, ESLint, Prettier,
and others to maintain code quality and consistency.
Frontend Development
● Layout Implementation Using Shadcn
○ The layout includes the header, footer, and navigation components, which provide a
consistent structure throughout the application.
Frontend Development
● Theme (Dark/Light Modes)
○ Provide users with a dark theme option for better accessibility and user experience during
nighttime or low light conditions.
Frontend Development
● Landing Page
○ The landing page is the first interaction users have with the application, making it a crucial
element of the user experience.
Frontend Development
● Registration Implementation
○ Integrated backend APIs to handle user registration, including form validation and error
handling.
Frontend Development
● Login Implementation
○ The login process validates user credentials against the backend and provides appropriate
feedback for successful or failed login attempts.
Frontend Development
● Authorization (Private Route)
○ Implemented private routes to restrict access to certain pages for authenticated users only.
○ This ensures that only logged-in users can access sensitive parts of the application like
profile, settings, and offers.
Frontend Development
● Profile Page
○ Created a profile page where users can view and update their personal information including
their name, email, bio, and offers.
Frontend Development
● Settings Page
○ Developed a settings page where users can update their profile information and application
preferences.
○ This page includes forms for changing the user's name, email, password, and other personal
settings.
Frontend Development
● Offers Page
○ Created an offers page to display a list of available offers based on user preferences and
location.
Frontend Development
● Offer Page
○ Developed an offer page that shows detailed information about a specific offer.
Frontend Development
● Search Feature
○ Implemented a search feature that allows users to search for offers based on various criteria
like location, price, and type.
Frontend Development
● Payment Methods
○ The application should support multiple payment options to cater to different user
preferences and increase the likelihood of successful transactions.
Frontend Development
● Error Handling
○ Added error handling mechanisms to provide users with clear feedback in case of any issues,
such as failed network requests or invalid input.
Frontend Development
● Responsiveness
○ Responsiveness means that the application will adapt its layout and design to look good on a
variety of devices, including desktops, tablets, and smartphones.
Project Demo
 05
Testing Phase
Testing Phase
• Ensures software reliability, functionality, and
performance

Types of Testing

• Unit Testing

• Integration Testing

• User Acceptance Testing

(UAT)
Unit Testing
• Tests individual components (functions, methods, classes)
• Early bug detection and code quality improvement

Scope
● Functions/methods
● React components rendering
● API calls
● Form validation
● Utility functions
Photos
● Jest
● Enzyme
Integration Testing
• Verifies interactions between units/components
• Ensures seamless component integration

Scope Steps Tools

• Frontend component interactions • Identify integration points • Jest
• API calls and data retrieval User • Develop test cases • React Testing Library
• authentication/authoriztion • Execute tests
• Form submissions • Analyze results
• Page/component navigation • Fix issues
User Acceptance Testing (UAT)
• Performed by end-users to validate software meets requirements
• Focuses on functionality, usability, and user experience

• Overall functionality
• Usability and performance
Scope •
•
Error handling and validation
Device/browser compatibility

• Plan UAT
• Develop test cases
• Prepare test environment

Steps •
•
Execute UAT
Analyze feedback
• Fix issues Obtain
• sign-off

• TestRail, JIRA (Test management)

Tools • Bugzilla, GitHub Issues (Bug tracking)
 06
Deployment
Phase
Deployment Phase
• Final step in software development lifecycle

• Moves application from development to

production environment

Deployment Phase includes

• Deployment Strategy

• Launch

• Post-Launch Monitoring
Deployment Strategy

Planning the deployment (CI/CD)

• Choosing the right hosting environment • Version control (Git)
• Defining the deployment architecture • Automated testing
• Preparing the infrastructure • Build automation
• Backup and recovery plan • Deployment automation
• Security measures

Blue-Green Deployment Canary Deployment

• Blue environment: current live environment • Gradual rollout to a subset of users
• Green environment: new version for testing • Monitoring performance and feedback
• Switching environments to minimize downtime • Gradual increase of user base
Launch

Final preparations Communication plan

• Smoke testing • Internal communication
• Data migration • User communication
• Documentation • Incident management
• Training and support

Deployment execution Rollback plan

• Deploy the application • Rollback procedure
• Real-time monitoring • Testing rollback
• Validation
Post-Launch Monitoring

Monitoring tools Key metrics to monitor

• Application Performance Monitoring (APM) • Response times
• Log management • Error rates
• Real User Monitoring (RUM) • Resource
• utilization Uptime

Incident management Continuous improvement

• Incident detection • User feedback
• Incident response • Performance optimization
• Root cause analysis • Regular updates