PG Life Web Application
Description
PG Life is a Full-Stack Web Application developed during my Internshalla Full Stack Web Development Internship Training. Guided by my mentors, I created this web application based on my understanding and knowledge, customizing it to include functionalities designed to enhance the user experience.
The entire web app is fully responsive and operational on any device. It is hosted on GitHub, and you can access the project repository here: GitHub Repository.
To run the web app locally, follow the installation instructions mentioned in the file named INSTALL.md.
Tech Stack
1.HTML
2.CSS
3.Bootstrap 5
4.JavaScript
5.AJAX
6.PHP
7.MySQL
Features
Home Page:
1.A search bar for users to enter a city name (case-insensitive), displaying available PGs in that city (if they exist in the database).
2.Circular sections representing main cities; clicking these displays a list of PGs in the selected city.
PG List Page:
1.Displays all PGs and their main features in the selected city as attractive cards.
2.A filter bar allows sorting of PGs by rent and rating (ascending/descending).
3.Users can see how many others have marked each PG as interested.
4.Logged-in users can mark PGs as interested directly from the list by clicking the heart icon, which toggles its style and updates the count dynamically.
PG Details Page:
1.Displays complete details of a PG when the "View" button on a PG card is clicked.
2.Features a beautiful carousel of images at the top.
3.Includes all details like amenities, testimonials, and the PG's address.
4.Users can see the number of interested users and can mark the PG as interested.
Dashboard:
1.Accessible only to logged-in users.
2.Displays account details and a section for interested properties, showing cards for PGs marked as interested.
3.Users can remove PGs from their interested list dynamically by clicking the heart icon.
Navbar:
1.Displays the brand name.
2.Shows options to sign up and log in if the user is not logged in; otherwise, it shows the dashboard and logout options with the user's first name.
Breadcrumb:
Visually indicates the user's location in the web app with hyperlinks for easy navigation.
Footer:
Displays links to PGs in popular cities and includes copyright information.
User Access:
The entire web application can browse without logging in, attracting new users. Certain features like the dashboard and marking properties as interested are exclusive to logged-in users.
Error Handling:
Custom codes and UI elements effectively handle exceptions, allowing users to understand any faults.