Street Seeker is an app that will help users to find ideal plans, events, places to go around the city, this time as an preview of the full project I have in mind I did BARCELONA EDITION! Showing the most relevant places of the city and letting the user book or reserve through the app.
This project has been quite challenging; I’ve had to restart from scratch three times due to various errors. Despite the difficulties, it has been a valuable learning experience, deepening my understanding of programming. While it’s a work in progress that will continue to evolve, for the moment I need to present it as it is for my shcool CODE INSTITUTE at this stage. Hope you enjoy it as much as I do.
It is a fullstack app site that allows users to check on diferent random places, create an account and comment and review their plans.
Link to live site - https://streetseeker-e20ed2f178d7.herokuapp.com/
Design and create a site that allows users to search for and book random places, demonstrating an increasing understanding of the libraries and frameworks available to developers.
Main objectives were:
The goal was to make the site easily accessible and intuitively navigated for the users. To achieve this, Django and Bootstrap were used to create and style the front end. The design ensures that users can seamlessly search for places, view details, and make bookings.
Django’s powerful backend framework, the site allows users to create profiles, book reservations, view and manage their bookings, and comment on their experiences. This functionality provides a dynamic and interactive user experience, ensuring that users can easily engage with the content.
For data storage, ElephantSQL was used to host the PostgreSQL database. This setup ensures reliable and scalable data management, allowing the application to handle user data, bookings, and comments efficiently.
The color scheme for the "Street Seeker" app is inspired by natural tones, reflecting the adventurous and exploratory nature of the app. Subtle, neutral colors are used predominantly, with vibrant accents for actionable elements like buttons and links to ensure they stand out for ease of navigation and interaction.
The primary font used across the site is Verdana, chosen for its readability and clean look. For the main logo text on the navbar, Tangerine is used to add a touch of elegance and distinctiveness. (Subject that could be changed in the future).
The logo and favicon are designed to capture the essence of exploration and discovery, featuring an icon that represents a compass or map marker, aligning with the theme of finding and booking unique places.
The database plan for the "Street Seeker" app is straightforward, capturing essential information about users, places, reservations, and comments. It outlines the type of data stored and indicates whether a field is a Primary or Foreign key where applicable.
This project was designed using Agile methodology, utilising the Project Board and Issues sections in GitHub
Throughout the development of this project, each section, function, and model was rigorously tested to ensure proper functionality and styling. Issues identified during testing were promptly corrected before proceeding to the next stage.
Issue Description | Testing Phase | Device/Platform | Resolution |
---|---|---|---|
Styling issue with navigation bar | Incremental | All | Adjusted CSS for consistency |
Login functionality not working | User Testing | iOS, Android | Fixed authentication logic |
Comment deletion not reflecting | User Testing | Mobile, Tablet | Updated comment deletion flow |
Images not displaying properly | Incremental | All | Fixed image URLs and Cloudinary |
ADMIN | TEST | OUTCOME | PASS/FAIL |
---|---|---|---|
Create Place | Place successfully created and displayed | Pass | |
Edit Place | Error thrown when editing place details (*) | FAIL | |
Edit Place (after fix) | Place details updated successfully | Pass | |
Delete User Comments | Comment deleted successfully | Pass | |
Delete Place | Place deleted successfully | Pass | |
Create 4 Test Places to check Pagination | Next/Previous Page appears at the bottom of the screen | Pass |
TEST | OUTCOME | PASS/FAIL |
---|---|---|
Create Account | Account created successfully | Pass |
Error Check - Error page when signing up with email address | Unable to replicate the error (*) | Closed |
Login | Login successful | Pass |
Logout | Logout successful | Pass |
Read Full Place Details | PlaceDetail page loaded successfully | Pass |
Add Comment under Place | Comment added successfully | Pass |
Delete Comment | Comment deleted successfully | Pass |
Create User Account to Check Access to Restricted Pages | Page displayed correct error message, with no access to restricted content | Pass |
Towards the end of the project, a problem emerged with the database connection on Heroku. The app was unable to communicate with the PostgreSQL database hosted on Heroku, leading to errors in data retrieval and storage. To address this issue, I:
Updated the database configuration in the Django settings to match the Heroku PostgreSQL database credentials.
Verified the database connection using Heroku’s CLI tools and checked for any configuration discrepancies.
Re-deployed the application to Heroku after making the necessary adjustments to ensure stable connectivity.
HTML testing was completed using W3 Validator
CSS testing was completed using W3 Validator
Python pep8 validation was done via Code Institute's Python Linter
The only errors recieved here were where some lines of text exceeded the limit of 79 characters
The source code for this website was managed and version-controlled using GitHub. Here’s a summary of the deployment process:
To ensure that all changes are properly tracked and updated in your GitHub repository, follow these steps:
Stage Changes:
Open your terminal within your IDE.
Run the command: git add . to stage all modified files for commit.
Commit Changes:
Next, create a commit with a descriptive message using: git commit -m "commit message".
This command captures a snapshot of your changes and adds it to your local Git history.
Push Changes:
Finally, push your commits to the remote repository on GitHub by running: git push.
This updates your GitHub repository with the latest code changes, making them available online.
These steps ensure that your codebase remains synchronized with the GitHub repository, providing a reliable version control system for your project.
To deploy your project to Heroku, follow these steps:
Create a New App:
Navigate to the Heroku Dashboard.
Click on New and select Create New App from the dropdown menu.
Configure Your App:
On the subsequent page, enter your desired App name and select a Region.
Click Create app to proceed with the setup.
Set Configuration Variables:
Go to the Settings tab of your app and click Reveal Config Vars.
Add the following configuration variables:
Additional credentials required for this app:
Cloudinary URL
PostgreSQL Database URL
Add Buildpacks:
Still in the Settings tab, click Add buildpack.
First, select Python as the buildpack.
Then, add Node.js as the second buildpack.
This process sets up your Heroku environment with the necessary configurations and buildpacks, enabling your application to deploy and run smoothly.
To deploy your app on Heroku, follow these steps:
Connect to GitHub:
Navigate to the Deploy tab in your Heroku app dashboard.
Click on GitHub under Deployment method and select Connect to GitHub.
Link Your Repository:
Enter the name of your GitHub repository in the search field and click Search.
Select the correct repository from the search results and click Connect to link it to your Heroku app.
Choose Deployment Method:
You can choose between Manual or Automatic deployment:
Manual Deployment: Deploy your app by clicking Deploy Branch whenever you push changes to GitHub.
Automatic Deployment: Automatically deploy your app whenever you push changes to the selected branch on GitHub.
Deploy and Launch:
Once the deployment method is selected, Heroku will build and deploy your app.
After the build process completes, click the Open app button, which appears below the build information window, to view your live app.
Alternatively, you can find another Open app button in the top right corner of the page.
These steps ensure that your app is connected to GitHub and can be deployed and accessed via Heroku.
This project is built upon the foundational framework provided by Code Institute's "I Think Therefore I Blog" walkthrough module. The initial blog template served as a base, which was extensively customized using Bootstrap and custom CSS to meet the specific requirements of this application.
To TripAdvisor for being my support in the reasearch of nice places in Barcelona making easier to populate my database.
Alot of credits to CODEMY for their incredible explanations on their tutorias of django in youtube , the best of all its free and I did learn so much many concepts I did have miss before @Codemycom
Also from youtube to [@TechWithTim] one of my favorites youtubers of all, with these videos he simplified what sometimes is give to you as if it was impossible (https://www.youtube.com/watch?v=nGIg40xs9e4&t=799s)
The Readme layout was based on the example by markdaniel1982 it was an amazing read me thanks alot.
Sarah and Roo at Code Institute's tutor support for the help.
John Elder Codemy
Tech with tim [@TechWithTim] (https://www.youtube.com/@Techwithtim)