Code Monkey home page Code Monkey logo

freefido's Introduction

FreeFido

Introduction


Table of Contents

Overview

UX

Strategy Plane

Site Goals

Agile Methodologies

Epics/Milestones

User Stories

User stories and features recorded and managed on GitHub Projects -> (https://github.com/....)

  • Business Owner/Site Admin
  • Visitor
  • Regular Visitor

EPIC | Site Navigation

  • As a User I can easily navigate around the site so that I can view different pages and sections on the site.
  • As a User I can click on the about page so that so that I can find out what the website is about and how to use it.

EPIC | Crud Functionality

EPIC | Administration

  • As a Site admin I can administer the site so that I can manage the sites content.
  • As a User I can reset my password so that I can change it if I have forgotten it or want to change it.

EPIC | Register / Sign in and out

Scope Plane

  • MVP/Identifying necessary features/Sprints
  • Opportunities(arising from user stories) -> Importance | Vialbility/Feasibility
  • Responsive Design
  • CRUD Functionality

Structural Plane

  • Accessibility
  • Responsiveness
  • Navigation

Skeleton Plane

Wireframes

  • Mobile/Tablets/Desktop
  • Index/Home
  • Register
  • Login
  • Profile
  • About
  • Booking
  • Contact Us/Map
Home Page

Wireframe of home page

Database Schema

  • AllAuth User Model
  • ERD Diagram
  • Custom Models
    • Profile Model
    • Booking Model

Security

Features

Features

Header & Navigation - details - details

Home Page

About Page

Registration - Email - Username (unique) - First Name - Last Name - Password - Password repeat

Login

  • It includes a small welcome back message and a link to the Registration form for users who have not yet registered for an account.

  • It uses django-allauth to provide all the settings for user authentication and includes the following fields:

    • Email
    • Password

Logout

Profile

**Relevant pages included in build........

CRUD Booking

Footer

403, 404, 500 Pages

These templates were added to this project in order to give the user the functionality to return to the website by using the links in the navigation bar or the Back to Homepage button at the bottom of the page.

  • They are triggered when a user tries to access:
    • information that is not theirs - 403,
    • information that does not exist anymore - 404,
    • something has gone wrong with the server and cannot retrieve database - 500

Admin Panel Business Owner/Django Admin Panel/Superuser

Future Features

Technologies Used

Languages Used

Libraries & Frameworks

Tools & Programs

Testing

  • TESTING.MD link -> Testing includes bugs/TDD/Python Testing etc/Validation/Linters
  • Security Features and Defensive Design -> Form validation/csrf token/error pages/User Auth

Bugs

No. Bug Solved Fix Solution Credit Commit no.
1 Tailwind CSS not loading U+2713 Tailwind config fix, use of STATICFILES_FINDERS to connect static css to settings.py https://waltercruz.github.io/django-l10n-portuguese/ref/contrib/staticfiles.html 9281779
2 Tailwind output.css displaying only partial build of 500 lines U+2713 used tailwind-cli install to complete build of output.css https://stackoverflow.com/questions/70337770/tailwindcss-output-css-file-424-lines, ref for complete build (https://github.com/VinCoD/tailwind-output-css) f9db8e7
3 Tailwind not loading U+2713 tailwind.config.js, remove curly brackets https://stackoverflow.com/questions/71070781/tailwind-css-classes-is-not-working-in-my-project f9db8e7

Deployment

Heroku deployment

Cloudinary API

Clone project

Fork Project

Credits

Django save method in models.py (https://docs.djangoproject.com/en/4.2/ref/models/instances/) Check if Tailwind is installed (https://www.w3resource.com/npm/npm-ls-and-npm-cli.php) Initial Tailwind configuration (https://tailwindcss.com/docs/installation) Advanced User Profile creation using allauth/signals (https://dev.to/thepylot/create-advanced-user-sign-up-view-in-django-step-by-step-k9m)

Code

Media

Additional reading/tutorials/books/blogs

Acknowledgements

freefido's People

Contributors

amylour avatar

Watchers

Kostas Georgiou avatar  avatar

freefido's Issues

Dev Task #1 - Install Django environment

As a developer, I can install Django and the project's supporting libraries so that I can create the Django project and app.

** Acceptance Criteria **

  1. Successful installation of Django and gunicorn.
  2. Successful installation of PostgreSQL and psycopg2
  3. Successful installation of Cloudinary

** Tasks **

  • Install Django and the supporting libraries
  • Create the requirements.txt file and add Django and installed libraries to it

User Story # 11 - Booking Confirmation Email

As a user, I can receive feedback via email when I make a booking so that I can confirm my booking and keep a copy of it in my email account.

Acceptance Criteria

  1. User receives confirmation email and booking is visible in their account.

Tasks
-[ ] Set up email confirmation for user's booking

User Story #3 - Footer

As a user, I can see the sites social media links at the bottom of the webpage so that I can visit, contact the business and follow them online.

Acceptance Criteria

  1. Footer is displayed at bottom of the webpage.
  2. Social links visible and open in a new tab.

Tasks

  • Add footer to base template
  • Add social media links
  • Add copyright and GitHub info

User Story #10 - Logout page

As a user, I can receive feedback in the form of a logout page so that I can confirm that I have been logged out successfully.

Acceptance Criteria

  1. Log out page displays when user logs out.

Tasks

  • Create log out page html template
  • Redirect user to this page when log out button is clicked

Dev Task #4 - Set up Cloudinary

As a developer, I can set up a Cloudinary account and connect it to my project so that I can upload any images to be stored.

Acceptance Criteria

  1. Successful connection between FreeFido and Cloudinary.
  2. Successful connection between Cloudinary and Heroku.
  3. Configuration of Media and Static files.

Tasks

  • Add Cloudinary API environment variable to env.py and Heroku
  • Set DISABLE_COLLECTSTATIC on Heroku (remove before deployment)
  • Add Cloudinary libraries to INSTALLED_APPS in settings.py
  • In settings.py set Cloudinary as storage for media and static files

User Story #1 - Homepage/About template

As a user, I would like to view the websites home page so that I can learn about it and the services it offers.

โ€Œ

Acceptance Criteria

  1. The site is browsable without requiring the user to login.
  2. The user can learn about the services from the home page.

Tasks

  • Create base template and extend home view template
  • Create index.html template for Home/About page with skeleton content
  • Connect urls.py

User Story # 17 - Articles feature setup

As a user, I want to be able to post articles to my profile so that I can share my experience of the dog park and being a dog owner with others.

Acceptance Criteria

  • A user must be able to create a post to be shared to the platform

Tasks

  • Create Articles app
  • Connect urls/views/templates
  • Connect user with article ownership
  • Add 'articles' to INSTALLED APPS

Dev Task #2 - Create Django Project

As a developer, I can create the Django project and app so that I can set up the database.

** Acceptance Criteria **

  1. Create the Django project FreeFido directory
  2. Create the booking app
  3. PROJ_NAME=freefido APP_NAME=booking

** Tasks **

  • Create the Django project FreeFido directory
  • Create the booking app
  • Add it to the list of INSTALLED_APPS
  • Migrate the changes to the database
  • Add 8000 port url to ALLOWED_HOSTS
  • python3 manage.py runserver to test

User Story #8 - Create a Booking feature

As a user, I can use the bookings page so that I can make a booking at the dog park.

Acceptance Criteria

  1. Booking page is accessible by user via booking link.
  2. Successful display of user bookings in profile and booking page when logged in.

Tasks

  • Confirm user is logged in using allauth
  • Set up authentication for user's bookings to be visible when logged in
  • Display active bookings to user
  • Inform user via message function that booking has been saved/date&time unavailable

Dev Task # 11 - Reset Cloudinary values

Reset Cloudinary values in env.py and Heroku config vars to anticipate the potential deployment issues with Heroku and Cloudinary.

  • A new Cloudinary account was set up specifically for this project alone.
  • Checked the local port view โœ… and manually deployed on Heroku again ๐Ÿš€

User Story # 12 - Edit User Profile

As a user, I can edit my user profile to update my personal details.

Acceptance Criteria

  1. 'Edit' button brings user to profile edit modal.
  2. User receives visual feedback that the form field areas are ready to be edited.
  3. Form fields prepopulated with users previously saved data.
  4. Database must update with user's new details.

Tasks

  • Create 'edit' button path
  • Create edit profile modal with editable form fields
  • Create 'Edit' button connections to push new data to database

User Story # 5 - Sign Up/Register Page

As a user, I can enter my email and password so that I can register an account with the website.

Acceptance Criteria

  1. Successful link to the Sign Up page.
  2. User registration successfully handled with Django allauth.
  3. User is brought to Home page.

Tasks

  • Create Sign Up page template
  • Ensure allauth installed/added to INSTALLED APPS in settings.py/email backend setup
  • Connect user registration in urls.py, create Sign Up form for user submission in allauth templates
  • Register button brings user to Home page
  • Login link in Navbar

User Story #4 - Login Page

As a user, I can use my email and password to login to my profile account so that I can use my profile to connect to the websites features

Acceptance Criteria

  1. On clicking the 'Login'(pawprint/key) icon user is brought to the login page.
  2. Option to 'Register' available if no prior account.

Tasks

  • Create Login page
  • Link Login icon to Login page
  • Create 'Register' link for new users

User Story #6 - Profile SetUp feature

As a user, I can enter my personal details so that I can create an account with FreeFido.

Acceptance Criteria

  1. Accessible and easy to use page for user to interact with.
  2. Profile form with user details saved successfully in database.
  3. User can upload a profile picture and edit their display name and bio.

Tasks

  • Create Profile SetUp page template
  • Set up user profile set up in views.py for submission to database
  • Add url path to urls.py

User Story #7 - Make a Booking page

As a user, I can view the booking home page so that I can learn about booking and see my active bookings.

Acceptance Criteria

  1. Booking information and rules made available to user.
  2. If user is logged in, create booking button is visible as are any active bookings.

Tasks

  • Create booking home page
  • Add link to navbar
  • Display active bookings for logged in user
  • Create link to create booking for logged in user

Dev Task #9 - Email authentication setup

As a developer, I can use allauth's email authentication backends so that I can validate and authorise a user's email for account creation.

Acceptance Criteria

  1. Email authentication backends added correctly to settings.py.
  2. Requirements.txt updated.

Tasks

  • Add Email authentication backends from Django allauth docs to settings.py
  • Add signup email for admin
  • Verify and confirm in Django admin panel
  • Add to requirements.txt

User Story # 13 - Delete User Profile

As a user, I can click a delete button in my user profile setup so that I can delete all personal data, photos and bookings that are connected to me on the website.

Acceptance Criteria

  1. 'Delete' button is accessible in 'Profile Setup' page, but not clickable accidentally.
  2. User is asked via modal window to confirm account deletion.

Tasks

  • Create 'delete' button
  • Create modal for deletion confirmation
  • Create deletion of user's details - ensure CASCADE is connected to the correct items

Dev Task #10 - Tailwind SetUp -> see comment re Bootstrap/Project v2

As a developer, I can add and configure Tailwind CSS in my development environment so that I can create my website's frontend.

Acceptance Criteria

  1. Successful install of Tailwind as per Tailwind docs.
  2. Successful configuration of Tailwind in base CSS and HTML files.

Tasks

  • Install Tailwind following docs
  • Configure paths to link Tailwind with base CSS and HTML files
  • Complete the Tailwind build process with the correct file paths
  • Confirm Tailwind install using 'npm ls'

User Story # 15 - Delete Booking

As a user, I can click the 'Trash' icon under my booking so that I can delete that booking from my bookings list.

Acceptance Criteria

  1. User can choose the 'Delete' button.
  2. User is prompted to confirm they would like to follow through with the delete confirm page.
  3. Confirm dele button deletes booking and returns user to booking page.

Tasks

  • Create delete button
  • Create page for deletion confirmation
  • Remove booking from users booking list view

User Story #2 - Navigation

As a user, I can find the websites navigation area so that I may easily navigate around the website.

Acceptance Criteria

  1. View header with business name.
  2. Clear links to directly access features.
  3. Navbar remains on top.

Tasks

  • Create sticky navbar
  • Connect link URLS to relevant pages

Dev Task #3 - Set up Heroku and ElephantSQL

As a developer, I can connect my project to use an external database so that my project can be deployed successfully.

** Acceptance Criteria **

  1. Successful creation of the Heroku app.
  2. Successful creation of the postgreSql database instance.
  3. The database is connected to the workspace and to Heroku.

** Tasks **

  • Create the app on Heroku
  • Create the database instance on ElephantSQL
  • Create the env.py file and add to .gitignore
  • Modify the settings to connect Django and the env.py and hook up the database
  • Protect SECRET_KEY
  • Migrate the database structure to the connected ElephantSQL database
  • Add Config Vars to Heroku

User Story # 16 - Error Pages

As a user, I can view any error pages with a 'Home' button so that I can get back to the homepage easily.

Acceptance Criteria

User can view an error page, should they encounter one, that helps them back to the homepage.

Tasks

  • Create basic 403, 404, 500 error pages
  • Create button to link back to homepage

Dev Task #5 - Deployment

As a developer, I can instruct Django to deploy the project successfully.

Acceptance Criteria

  1. Inform Django where the templates are stored.
  2. Inform Django where the project is being hosted.
  3. Successful first deployment.

Tasks

  • Set up the templates directory in settings.py
  • Add Heroku host name into ALLOWED_HOSTS in settings.py
  • Create the media, static and templates folders in the top level directory
  • Create a Procfile and add project name
  • Save, add, commit, push
  • Deploy

Dev Task # 6 -Create Database models from ERD

As a developer, I can setup my models.py file to create the structure of my database tables.

Acceptance Criteria

  1. Successfully create FreeFido ERD.
  2. Add models to models.py.
  3. Import relevant Django/Cloudinary models.

Tasks

  • Import Django/Cloudinary models
  • Add user model
  • Add dog model
  • Add booking model
  • Add photo model
  • Add feedback model

Dev Task #8 - SetUp Django allauth

As a developer, I can install and setup Django allauth so that I can authenticate user accounts.

Acceptance Criteria

  1. Successful installation of Django allauth.
  2. Successful integration of allauth specifics in settings.py and urls.py

Tasks

  • Install allauth
  • Adjust TEMPLATES in settings.py to include context_processors.request for HTTP request access
  • Apply AUTHENTICATION_BACKENDS in settings.py from Django allauth docs for user email login
  • Include four apps to INSTALLED APPS - django.contrib.sites, allauth, allauth.account, allauth.socialaccount
  • SITE_ID = 1 under AUTHENTICATION_BACKENDS - used in connection with allauth.socialaccount for logging in via social media
  • Add allauth accounts url path to project level urls.py
  • Migrate new apps

Dev Task # 13 - Restart Repo & Workspace

  • Start new repo for FreeFido_v2 due to database issue with FreeFido_v1
  • All Dev tasks re-completed except Tailwind install
  • Successful deployment to new Heroku app with new Cloudinary, Elephant SQL ๐Ÿš€

User Story # 14 - Edit Booking

As a user, I can edit my confirmed bookings so that I can choose a different day or time slot or add an extra dog.

Acceptance Criteria

  1. User can choose the 'Edit' icon button under their viewable bookings when logged in.
  2. User can choose from the available dates and times in the calendar to update their booking.
  3. Previous booking is released on the calendar when user confirms new booking.
  4. Updated booking visible in Active Bookings tabel.

Tasks

  • Create 'Edit' button
  • Create path to edit bookings page
  • Edit original booking when user confirms new booking
  • Display new booking in 'View Bookings' in Profile and Booking section

Dev Task # 14 - Django Summernote

As a developer, I can install Django Summernote so that I can edit my articles appearance.

Acceptance Criteria

  • Successful install of Django Summernote

Tasks

  • Install Dajngo-Summernote
  • Freeze requirements
  • Add to INSTALLED APPS
  • Adjust admin view in admin.py
  • Migrate changes
  • Make a test article

User Story # 18 - Site pagination

As a user, I would like to move to the next page so that I can view all of the articles.

Acceptance Criteria

  • Successful addition of Django's site pagination features

Tasks

  • Add paginate order to ArticleList Class

Dev Task #7 - Create Admin panel

As a developer, I can create a Django Admin panel to manage my users' information.

Acceptance Criteria

  1. Successful superuser creation
  2. Connection to admin panel

Tasks

  • Create superuser, email and password
  • Create admin.py

User Story # 9 - Visit Us page

As a user, I can view the 'Visit Us' page so that I can see the businesses location and details.

Acceptance Criteria

  1. 'Visit Us' icon brings user to the correct page.
  2. Google Map displays correct location coordinates.
  3. Business details clearly displayed for the user.

Tasks

  • Create Visit Us page template
  • Set up Google Map iframe

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.