Skip to content

Commit

Permalink
update README.md, attempt css fix for footer on large screens, index.…
Browse files Browse the repository at this point in the history 
…html formatted
  • Loading branch information
@Robrowno
Robrowno committed Jul 17, 2023
1 parent 76ead11 commit e3fc291
Show file tree
Hide file tree
Showing 6 changed files with 183 additions and 137 deletions.
80 changes: 73 additions & 7 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,19 @@
<h1 align="center"><strong>🌞🚵 SummerTrails 🏄🏖️</strong>
</h1>

<h4 align="center">A Summer-Traveller's App!</h2>

<p align="center">
<img height="300px" width="300px" src="./static/assets/images/globe.png">
</p>
<p align="center">"Snap your world, pin your path, share your journey - we're redefining exploring!"</p>

## Deployment
#### _(please note, your team must also include the deployed links in the usual submission in Hackapp)_

The project is deployed and can be accessed by [clicking here!](https://summertrails-heroku-dd7388a15196.herokuapp.com/).

If you'd like to see the original repository, that can be found by following [this link](https://github.com/Robrowno/SummerTrails)

---
&nbsp;

## Criteria
Expand All @@ -18,7 +25,7 @@ In this section, we will briefly discuss how our team addressed the applicable c
- ✨ Clear use of Github Projects or other agile tool
- ✨ Presentation Quality - Present as if you are pitching it to client

---

&nbsp;

## Intro
Expand All @@ -28,7 +35,7 @@ SummerTrails is a location-service app for users to share photos and pin them to
Users can share where they have been over the summer and the many sights they have seen with other like-minded users.


---

&nbsp;

## Goal
Expand Down Expand Up @@ -65,6 +72,10 @@ We immediately knew we wanted to use the Mapbox API, and A first wireframe draft

**Day 2:** On day two, we refined our scope and realised we needed to streamline our focus on getting the frontend right before looking to different features. We went back to the drawing board and came up with an idea of having the map take up the entire screen space - globe front and centre!

Wireframes were redrafted as a result and so we developed a new plan that looked something like this:

![New Wireframe](./static/assets/readme-images/updated-wireframe.png)

With some hard-coded data we even mapped out how pinned users would appear on the map when they upload an image from their lcoation:

![Mobile Render (Day 2)](./static/assets/readme-images/day2-progress-mobile.png)
Expand All @@ -77,11 +88,33 @@ With some hard-coded data we even mapped out how pinned users would appear on th

Converted project to Django 4.2.2

We experienced some teething issues when installing Django, where we were using the incorrect file steructure for using Django 4.2 - once that was resolved we could run the `python3 manage.py runserver` and `python3 manage.py migrate` commands.
We experienced some teething issues when installing Django, where we were using the incorrect file structure for using Django 4.2 - once that was resolved we could run the `python3 manage.py runserver` and `python3 manage.py migrate` commands.

We also changed the html template structure to suit Django, and began setting up a Django REST API. Some functionality we needed was started/completed - namely most of the authentication.

We also successully made our first migrations and started work on other pages that would be required for the application. We paired the application up with an ElephantSQL PostgreSQL RBDMS and successfully made our first deployment to Heroku.



**Day 4**

Big progress - we made big strides on the backend thanks to Niclas's great work in this area, and we also succesfully implemented login/signup/logout functionality as well as the creation and editing of a User Profile section.

We spent a lot of time then implementing cloudinary and fixing other small bugs which would allow us to work towards polishing the work we'd put into this so far and make another final push for the 5th and final day.



**Day 5**

Some great strides again - We fixed some more bugs, implemented more styling updates/changes and bug fixes and began the final touches required for the hackathon project submission.

A geolocation API was being explored as well as what we had implemented so far.

The README.md had to finished, all project details added to the C.I Hackathon app and a 3-minute-max video for presentation in the afternoon.


Nearing the end of the submission deadline, we had a project that now looked like this:
![Project Screenshot](./static/assets/readme-images/current-look.png)

---

Expand All @@ -96,6 +129,9 @@ The following technology has been used for this application:
- Programming Languages: **Javascript**, **Python v3.9.6**
- Frameworks: **Django v4.2.2**, **Django REST Framework**
- Agile/Project-mapping: **Github Projects**, **Github Issues**
- Cloud Delivery Networks: **Cloudinary**
- RDBMS: **PostgreSQL**
- Database Hosting Service: **ElephantSQL**
- Wireframes: **Balsamiq**
- IDE: **VS Code**, **CodeAnywhere**
- Version Control: **Git**
Expand All @@ -108,8 +144,28 @@ The following technology has been used for this application:
- MacOS/Unix
- Windows
- iOS

- It has been tested on the following mobile screens:
- iPhone X
- iPhone 12 Pro
- Samsung Galaxy S8+
- Pixel 5

---

&nbsp;

## Future Implementations/Ideas

- **Travel Diary:** Implement some sort of chronological tracker for users to map out their travels .
- **Comment & Like:** User ability to comment and like on other's uploads and view comments and likes on their own posts.
- **Social Media integration:** Upload to other socials or share their other social accounts on their profile.
- **Advanced Search Filters:** Search based on profile interests, location and more!
- **Location-based Recommendations from the app:** Recommendations based on your active location.
- **Weather forecast based on location:** A weather forecast page which can use another API to retrieve current and forecasted weather predictions.
- **Achievement Badges:** (Post 100 photos, 200 photos, 500 photos, 1000 photos), (Visit 2 new countries, 5 new countries, 10 new countries), (Interact with: 2 posts, 5 posts, 10 posts, 20 posts, 50 posts) - collect badges for all of these!
- **Photo Album creation:** Compile your images and sort them in to albums to reminice about your travels over time.
- **Auto-deleting of pins after 'x' hours:** We will need to implement a means of clearing pins on the map that have been there longer than a specified period of time. This will ensure content is new and put less strain on the DB - **Perhaps 24 or 48hrs.**


&nbsp;

Expand All @@ -121,6 +177,14 @@ The following technology has been used for this application:

- We had some issues in installing requirements on different machines locally, especially between those of use using VS Code and CodeAnywhere. It seemed the solution a lot of the time was to start a new virtual environment and delete and re-install the packages using `pip3 install -r requirements.txt` and then `pip3 freeze > requirements.txt`

- We struggled to implement cloudinary to begin with and once we had done so, we noticed that uploaded photos were not converted to the cloudinary urls in the database.
Niclas found the solution for this, which was to set use_url=True in this segment of the serializers.py PhotoImageSerializer class: `image = serializers.ImageField(use_url=True)`

- We found you'd get a 404 error when logged out and clicked on the photo upload icon in the mobile nav - this has now been rectified to redirect to the sign up form as you need to be logged in to make posts.


**!NOTE:** If you spot any bugs on the site that we might not be aware of, please get in touch with one of us on Linkedin to inform us and we'll address it as soon as we can!



-----
Expand Down Expand Up @@ -154,4 +218,6 @@ We would like to give credit to the following individuals, organizations, and re

-----

![Summer of Code Banner](https://res.cloudinary.com/djdefbnij/image/upload/v1688114955/Summer_2_owummy.png)
![Summer of Code Banner](https://res.cloudinary.com/djdefbnij/image/upload/v1688114955/Summer_2_owummy.png)

-----
213 changes: 90 additions & 123 deletions home/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,133 +2,100 @@

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>SummerTrails</title>
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1.0,user-scalable=no"
/>

<!-- Main css file-->
<link rel="stylesheet" href="{% static 'css/style.css' %}" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
<!-- Bootstrap icons -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"
/>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/dd3b9a0c61.js" crossorigin="anonymous"></script>
<!-- Mapbox -->
<link
href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css"
rel="stylesheet"
/>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
</head>
<head>
<meta charset="utf-8" />
<title>SummerTrails</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1.0,user-scalable=no" />

<body>
<nav class="navbar fixed-top foreground-bg">
<div class="container-fluid">
<a class="navbar-brand navbar-title accent-text-color" href="{% url 'home' %}">SummerTrails</a>
<button
class="navbar-toggler accent-bg"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasNavbar"
aria-controls="offcanvasNavbar"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
class="offcanvas offcanvas-end"
tabindex="-1"
id="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel"
>
<div class="offcanvas-header foreground-bg">
<h5 class="offcanvas-title h1 accent-text-color" id="offcanvasNavbarLabel">
SummerTrails Menu
</h5>
<button
type="button"
class="btn-close accent-bg"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<div class="offcanvas-body foreground-bg">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a
class="nav-link active"
aria-current="page"
href="{% url 'home' %}"
>Home</a
>
</li>
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link text-light" href="{% url 'logout' %}">Logout</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="{% url 'profile' %}">Profile</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link text-light" href="{% url 'signup' %}">Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="{% url 'login' %}">Login</a>
</li>
{% endif %}
<li class="nav-item">
<a class="nav-link text-light" href="{% url 'team' %}">Our Team</a>
</li>
</ul>
</div>
<!-- Main css file-->
<link rel="stylesheet" href="{% static 'css/style.css' %}" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
<!-- Bootstrap icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" />
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/dd3b9a0c61.js" crossorigin="anonymous"></script>
<!-- Mapbox -->
<link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
</head>

<body>
<nav class="navbar fixed-top foreground-bg">
<div class="container-fluid">
<a class="navbar-brand navbar-title accent-text-color" href="{% url 'home' %}">SummerTrails</a>
<button class="navbar-toggler accent-bg" type="button" data-bs-toggle="offcanvas"
data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header foreground-bg">
<h5 class="offcanvas-title h1 accent-text-color" id="offcanvasNavbarLabel">
SummerTrails Menu
</h5>
<button type="button" class="btn-close accent-bg" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body foreground-bg">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="{% url 'home' %}">Home</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link text-light" href="{% url 'logout' %}">Logout</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="{% url 'profile' %}">Profile</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link text-light" href="{% url 'signup' %}">Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="{% url 'login' %}">Login</a>
</li>
{% endif %}
<li class="nav-item">
<a class="nav-link text-light" href="{% url 'team' %}">Our Team</a>
</li>
</ul>
</div>
</div>
</nav>

<!-- Mobile view navigation -->
<nav class="navbar fixed-bottom navbar-light foreground-bg">
<div class="container-fluid px-5 d-lg-none">
<a href="{% url 'home' %}" class="btn btn-floating accent-bg">
<i class="bi bi-house-door-fill main-text-color"></i>
</a>
<a href="{% url 'upload_image' %}" class="btn btn-floating accent-bg">
<i class="bi bi-camera-fill main-text-color"></i>
</a>
{% if user.is_authenticated %}
<a href="{% url 'profile' %}" class="btn btn-floating accent-bg">
<i class="bi bi-person-fill main-text-color"></i>
{{ user.username }}
</a>
</div>
</nav>

<!-- Mobile view navigation -->
<nav class="navbar fixed-bottom navbar-light foreground-bg">
<div class="container-fluid px-5 d-lg-none">
<a href="{% url 'home' %}" class="btn btn-floating accent-bg">
<i class="bi bi-house-door-fill main-text-color"></i>
</a>
<a href="{% url 'upload_image' %}" class="btn btn-floating accent-bg">
<i class="bi bi-camera-fill main-text-color"></i>
</a>
{% if user.is_authenticated %}
<a href="{% url 'profile' %}" class="btn btn-floating accent-bg">
<i class="bi bi-person-fill main-text-color"></i>
{{ user.username }}
</a>
{% else %}
<a href="{% url 'login' %}" class="btn btn-floating main-text-color accent-bg">
<i class="bi bi-person-fill-add main-text-color"></i>
Login
</a>
<a href="{% url 'login' %}" class="btn btn-floating main-text-color accent-bg">
<i class="bi bi-person-fill-add main-text-color"></i>
Login
</a>
{% endif %}
</div>
</nav>
</div>
</nav>

{% block content %}{% endblock content %}
<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script src="{% static 'js/index.js' %}"></script>
</body>

{% block content %}{% endblock content %}
<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<script src="{% static 'js/index.js' %}"></script>
</body>
</html>
</html>
Binary file added static/assets/images/globe.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/assets/readme-images/current-look.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/assets/readme-images/updated-wireframe.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit e3fc291

Please sign in to comment.