Skip to content
/ designland Public
generated from Code-Institute-Org/gitpod-full-template

Project 4 for Code Institute Full Stack Developer course. Find and share great web design resources.

designland.herokuapp.com
0 stars 1 fork Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

davidindub/designland

BranchesTags

Repository files navigation

designland

Designland logo Designland shown on a iPhone, MacBook and iPad

Table of Contents

Introduction

The project is an online directory of useful design resources for web developers and designers.

Users can register to submit resources to the directory, and upvote and bookmark resources they find useful.

The project was built keeping the Agile management principles in mind, and I utilised many of GitHub's features such as Issue and Projects to implement Scrum methodology.

Kanban Board for project

Closed Issues on GitHub for the project

I used GitHub issues for the product backlog containing the user stories. Issues were also used for bug reports so I could keep track of tricky bugs over time.

CRUD functionality

  • Users can read all approved resources, and create, update and delete resources they contributed.
  • Users can create, update, read and delete their accounts/profiles.
  • Admins can create, read, update and delete all resources.
Screenshot of the product backlog

I used the tags feature in GitHub Issues for assigning story points, prioritising features based on the MoSCoW method, and categorising the user stories.

I used the Milestones feature to plan sprints and set deadlines.

I took the Agile Foundations course on LinkedIn Learning to better understand the difference between Agile and Scrum.

User Stories

User stories were prepared using GitHub Issues and assigned story points based on estimated completion time.

User Stories can been seen below under User Story Testing, and in the GitHub Issues for full details including screenshots, story points and associated sprints.

UX

As the project is a directory of design resources, I wanted to try something fun and bold with the design and was inspired by the trend for neubrutalism web design, and websites such as Gumroad and Google I/O 2022.

Typography

  • A display font called Bebas Neue was used for the logo as it fitted the neubrutalist theme of the site.

  • Baloo 2 contrasts the harsh lines of the display font with friendlier rounded letters that made it suitable for the headings and navbar.

Wireframes

Accessibility

I ensured that despite bold use of color, every element still met AAA level in the Web Content Accessibility Guidelines (WCAG).

Buttons featuring icons have appropriate aria-labels, and notification messages have aria-live tags and are read by screen readers.

I tested navigating the project with VoiceOver on macOS.

I used inline SVGs for icons in the project.

I recently watched Seren Davies' talk Death to Icon Fonts where I learned of the issues that icon fonts can cause for accessibility. I researched the best way to use inline SVG icons, including descriptions where appropriate for screen readers. By using SVGs the icons don't break if a user chooses to use a custom font such as Dyslexie.

See also:

Database Design

I used the desktop version of diagrams.net to design the models. I created a Profile model to associate extra information with users not included in the default Django user model.

After creating the Profile model I used this script in the terminal to create a profile for existing users in the database that didn't have one yet:

>>> from django.contrib.auth.models import User
>>> from directory.models import Profile
>>> users = User.objects.filter(profile=None)
>>> for user in users:
...     Profile.objects.create(user=user)

Features

Existing Features

Landing Page

A simple landing page explains the project and features a call to action button to lead the user to the main content.

Landing Page Screenshot

Navbar

The Navbar is responsive and collapses to a hamburger menu on smaller devices. On larger screen it sticks to the top when the page is scrolled.

When a user is logged in, their username is displayed in the navbar, and a dropdown menu includes:

  • My Profile (link to the user's own profile)
  • My Bookmarks (list of the resources the user has bookmarked)
  • My Submissions (list of approved resources the user has submitted)
  • Submit New Resource (form to submit a new resource)
  • Logout

When a staff member is logged in, an extra Manage dropdown option is shown which includes:

  • Unapproved Resources (submissions not yet visible on the site ready for screening)
  • User List (a list of all registered users on the site)
  • Django Admin Panel (a link to the Django Administration Panel)
Nav Bar Screenshots

Navbar as viewed by logged in admin.

Navbar as viewed by logged in admin (mobile).

Directory & Categories

The list of design resources. Directory lists all resources, while Categories lets users sort by tag.

Users can sort the list by newest, oldest or most up-voted.

The list page is also used for seeing all the resources a user has added via their profile.

Screenshot of Categories page listing all tags

Register / Login

Users can either sign up using their Google or Github account, or directly on the site.

Users signing up with GitHub or Google just need to pick a username, and don't need to create a password.

GitHub was chosen as the site is aimed at developers and designers, and Google as is has 1.8 billion active monthly users.

Users who have previously registered with GitHub or Google can easily sign in again with one click.

Register / Login Screenshots

Register a new Account

Register a new Account - pick username (after authorising Google account)

Login

Upvoting

Users can upvote the resources they like, other users will see the total number of uploads and can view the most popular resources on the site.

Most Popular page Screenshots

Resources listed by number of upvotes

Tags

Users can add tags their submissions which are used to categorise the entries. Suggested tags are show on the submission page.

Bookmarks

Users can bookmark resources they find useful in list that only they can see.

Screenshot of Bookmarks List

User Profiles

Users can display links to their Personal Website, GitHub profile and Twitter profile

A list of all the resources the user has contributed is shown on their page.

When a logged in user views their own profile, they can click a button to edit it. The user can delete their account from this page too if they choose.

User Profile Screenshots

Profile Page as a guest

Own Profile Page as a logged in user, showing Edit Profile button.

Submit Resources to Directory

Users can submit a resource to the directory by providing a Title, URL, Description, and Tags describing the resource.

A placeholder thumbnail is added to the Resource on submitting.

When a user submits a resource to the directory, they can see a preview of it which they can edit again, and a badge telling them it is awaiting approval by a staff member.

A resource with awaiting approval badge

As viewed by a staff member.

Submissions will be manually approved by staff members to prevent unwanted material being posts, and to ensure a high standard of resources in the directory.

Footer

The Footer includes:

Privacy Policy

As the project can collect data from users, I included a Privacy Policy link in the Footer which explains how data may be used. I used GDPR.eu for help writing the policy.

See: Writing a GDPR-compliant privacy notice (template included)

Notifications

Django Messages and Bootstrap's Toast elements were combined to make elegant notification messages when the user performs actions such as signing in/out and bookmarking or upvoting a resource. Staff also see notifications for things like approving/hiding/deleting resources. The notifications appear on the bottom right so as not to cover the navigation bar.

Animated screenshot showing notifications

Notifications for upvoting / removing upvote / logging out in action

Staff Only Features

The Manage dropdown menu in the nav bar appears only for logged in staff members and features additional pages.

Unapproved Resources

All unapproved resources that have been submitted by registered users. Staff members can approve, edit, or delete them.

User List

A list of all registered users of the site along with the date they joined, number of contributions, and total upvotes received.

The Manage menu also features a link to the Django admin panel should it be needed for features not yet implemented directly in the project. (such as managing tags).

Screenshot of User List

Custom Error Pages

Custom error pages were added for 403, 404, and 500 errors.

Screenshot of 500 Error Message

Favicon

The favicon for the project

  • A favicon and icon for iOS/Android home screen bookmarks is included with the project's logo.

Features Left to Implement

  • Currently the screenshot thumbnails for the site are manually uploaded to Cloudinary by an administrator, but I would love to add an API such as URL2PNG in future to automate the process, however it was difficult to find a free service for this project.

  • With Heroku ending free plans in November 2022, the project will be redeployed on a different cloud platform in future. This was only announced when nearing the final sprint and the project continued as planned for the submission deadline,.

Technologies Used

External Python Packages Used

Testing

I performed manual testing continuously as the project was being developed, and filed bug reports on GitHub as issues were discovered to keep track of bugs. I kept track of how to recreate bugs, expected behaviour, screenshots of the issue and how it was resolved to help myself in future.

I asked friends to test registering accounts / submitting resources / deleting accounts in different ways (email registration, Google registration, GitHub registration, registration with no email, etc.) to try and catch any potential issues.

Browser Compatibility

I tested the website on four different operating systems on four different types of hardware and didn't find any rendering bugs between the browsers tested.

Operating System Chrome Firefox Edge Safari
macOS 12.2 ✅ ✅ ✅ ✅
Windows 11 ✅ ✅ ✅ ✅
Android 10 ✅ ✅ ✅ ✅
iOS & iPadOS 15 ✅ ✅ ✅ ✅

Responsiveness

I tested for responsiveness on many different sized viewports from 320px wide up to Ultrawide resolutions, and using different hardware (Monitors, Laptops, Phones).

I used Polypane during development to test many different viewport sizes at once.

Screenshot of Polypane Testing

Performance Testing

Performed using Google Lighthouse in Google Chrome 105.0.5195.125 on macOS 12.5.1

Detailed Lighthouse Testing

Desktop

Page Performance Accessibility Best Practices SEO
Landing Page 96 100 92 91
Directory 90 98 100 91
Categories 86 100 100 90
Privacy Policy 99 98 100 90
User Profile Page 90 98 100 90
Resource Page 99 95 92 91

Mobile

Page Performance Accessibility Best Practices SEO
Landing Page 95 100 100 92
Directory 85 98 100 92
Categories 82 100 100 89
Privacy Policy 95 97 100 92
User Profile Page 94 98 100 92
Resource Page 94 95 100 92

Accessibility Testing

No errors were detected using the WAVE Web Accessibility Evaluation Tool.

WAVE Web Accessibility Evaluation Tool Results

User Story Testing

As a first time visitor I want to be greeted with a clear explanation of the site so that I know what it is about

Acceptance Criteria

  • If I visit the homepage I am greeted with a eye catching slogan/hero image
  • I should be able to tell the purpose of the site easily

Result: ✅ Pass

As a visitor to the site I want to read the Privacy Policy before I sign up so that I can know how my data will be used

Acceptance Criteria

  • I can click a link to be taken to the Privacy Policy
  • The policy is written in easy to understand language

Result: ✅ Pass

As a registered user I want to update my profile page so that people can find me on Twitter / GitHub

Acceptance Criteria

  • I can add Twitter/GitHub links to my profile
  • I can delete my account

Result: ✅ Pass

As a developer I want to register using my Github account so I can signup without filling in any forms

Acceptance Criteria

  • I chose to sign up with Github
  • An account is created automatically for me

Result: ✅ Pass

As I user I want to share the site on social media to help my designer friends find cool new stuff

Acceptance Criteria

  • If I share the site on Facebook/Twitter etc.
  • A thumbnail/logo and the right meta data describing the site should appear in the preview card

Result: ✅ Pass

As a user I want to see all the resources I have submitted so I can see all my submissions in once place

Acceptance Criteria

  • I should be able to see all the resources I have submitted
  • I can see the resources added by other users on the site too

Result: ✅ Pass

As a user I want to be able to see a list of tags on each resource so I know what category it belongs to

Acceptance Criteria

  • Each resource page should list tags categorising the resource

Result: ✅ Pass

As a user I can view a paginated list of resources so that I can select one to read and not have too many displayed at once

Acceptance Criteria

  • When there is many resources, they should be split onto separate paginated pages

Result: ✅ Pass

As a unregistered developer/designer I want to browse the directory so I can find useful resources for building my projects

Acceptance Criteria

  • If I visit the site I should see a list of design resources
  • I can click them to be taken to the resource

Result: ✅ Pass

As an administrator I want to manually approve or deny user submitted resources so I can moderate the directory and keep it free of spam or abusive messages

Acceptance Criteria

  • If a user posts a Resource it appears in the admin panel for approval
  • As an admin, I can approve or deny the Resource for publication

Result: ✅ Pass

As a user I want to be able to click other users names to see what other resources they have added to the directory

Acceptance Criteria

  • I can click a username to be taken to their page
  • On their page I can see all the resources they have added to the directory

Result: ✅ Pass

As a user I want to add links to my GitHub/Twitter/Portfolio website* so I can gain new followers

Acceptance Criteria

  • I can add a link to my website/GitHub/Twitter to my profile
  • It appears on my profile page

Result: ✅ Pass

As a user I can click on a thumbnail so that I can view a page with the full details of the resource

Acceptance Criteria

  • If I click a resource in the lists, I am taken to a page with full details about it

Result: ✅ Pass

As an administrator I want to be able to add, edit and remove resources so I can curate the listings

Acceptance Criteria

  • If a user submits a link, I can approve or deny
  • If I approve it, it appears publicly on the site
  • I should be able to delete previously approved resources too

Result: ✅ Pass

As a user I want to be able to see a thumbnail of the site so I can preview it before clicking

Acceptance Criteria

  • I should see thumbnails of each resource
  • When I click the thumbnail it takes me to the page of the resource

Result: ✅ Pass

As a user I want to be able to sort the resources by tag so I can find what I'm interested in

Acceptance Criteria

  • I should be able so view the listed resources tag by tag
  • When I select a tag, only resources with that tag are listed

Result: ✅ Pass

As a registered user I want to be able to add useful resources I've discovered to the site so I can share them with the community

Acceptance Criteria

  • I should be able to add resources to the site

Result: ✅ Pass

As a user I want to be able to upvote resources so I can participate and recommend resources to others

Acceptance Criteria

  • I can click a button to upvote resources
  • The number of upvotes should increase
  • Resources are listed by number of upvotes

Result: ✅ Pass

As a user I want to be able to bookmark resources so that I can view a list of my favourites in future

Acceptance Criteria

  • I can click a bookmark icon next to each resources
  • The resource should be added to my list of bookmarked resources
  • I can visit a page where I can see all my bookmarked resources

Result: ✅ Pass

As a user, I want to be able to register for an account so I can interact with the site

Acceptance Criteria

  • I should be able to browse without logging in.
  • I should be able to register for an account using Google OAuth

Result: ✅ Pass

Challenges Faced

django-taggit was the source of a few bugs encountered in development. In a future project I may just model my own tags in the database.

django-taggit bug screenshot

While Bootstrap was good for getting a responsive design up and running quickly, I found using Bootstrap classes for things like layout very frustrating when combined with Django templating. In future I would consider not using Bootstrap at all, or writing more custom classes instead of using Bootstrap layout classes that need to be changed in many places.

Code Validation

HTML Validation

Pages were validating using the W3 HTML Validator, and pages with content that varies based on guest/logged in user/admin status were validated in each state.

W3 HTML Validation
Page URL Logged In Status Result
Landing Page / Guest ✅ No errors or warnings
Landing Page / User ✅ No errors or warnings
Landing Page / Admin ✅ No errors or warnings
Directory /list/ Guest ✅ No errors or warnings
Directory /list/ User ✅ No errors or warnings
Directory /list/ Admin ✅ No errors or warnings
Categories /alltags/ Guest ✅ No errors or warnings
Categories /alltags/ User ✅ No errors or warnings
Categories /alltags/ Admin ✅ No errors or warnings
User Profile /user/admin/ Guest ✅ No errors or warnings
User Profile /user/admin/ User ✅ No errors or warnings
User Profile /user/admin/ Admin ✅ No errors or warnings
Add New Resource /add/ User ✅ No errors or warnings
Add New Resource /add/ Admin ✅ No errors or warnings
Login /accounts/login/ Guest ✅ No errors or warnings
Log Out /accounts/logout/ User ✅ No errors or warnings
Register /accounts/signup/ Guest ✅ No errors or warnings
Privacy Policy /privacy/ User ✅ No errors or warnings
User List /manage/users/ Admin ✅ No errors or warnings
Update User Profile /user/admin/update Admin ✅ No errors or warnings

CSS Validation

The custom CSS was validated using the W3C CSS Validation Service as CSS level 3 + SVG.

https://jigsaw.w3.org/css-validator/

W3C CSS Validation

✅ Pass

Python Validation

All the custom Python files pass PEP8 Validation, which I checked both in the development environment and on PEP8 online.

# noqa was used in settings.py where line breaks would have broken Django functionality.

PEP8 Online Validation - designland/settings.py

✅ Pass

PEP8 Online Validation - designland/urls.py

✅ Pass

PEP8 Online Validation - designland/settings.py

✅ Pass

PEP8 Online Validation - directory/admin.py

✅ Pass

PEP8 Online Validation - directory/forms.py

✅ Pass

PEP8 Online Validation - directory/models.py

✅ Pass

PEP8 Online Validation - directory/urls.py

✅ Pass

PEP8 Online Validation - directory/views.py

✅ Pass

JavaScript

Very little custom JavaScript was used with most of the functionality coming from Bootstrap. The two JS files I wrote were validated using JSHint.

JSHint validation screenshot

Deployment

Local Deployment

In order to make a local copy of this project, you can clone it. In your IDE Terminal, type the following command to clone my repository:

  • git clone https://github.com/davidindub/designland.git

Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.

Open in Gitpod

After cloning or opening the repository in Gitpod, you will need to:

  1. Create your own env.py files in the root level of the project:
os.environ["DATABASE_URL"] = "postgres://"
os.environ["SECRET_KEY"] = "YOUR_DJANGO_SECRET_KEY"
os.environ["CLOUDINARY_URL"] = "cloudinary://YOUR_CLOUDINARY_URL"
os.environ["HEROKU_HOSTNAME"] = "URL_OF_PROJECT_DEPLOYED_ON_HEROKU"
os.environ["DEVELOPMENT"] = "True"

**Ensure the env.py file is added to your .gitignore file so it doesn't get pushed to a public repository.

If you don't have a Cloudinary account already, you will need to Sign Up for Free to host the static files in the project.

  1. Run pip3 install -r requirements.txt to install required Python packages.

  2. Migrate the database models using: python3 manage.py migrate

  3. Create a superuser with your own credentials: python3 manage.py migrate

  4. Run the Django sever: python manage.py runserver The address of the server will appear in the terminal window. Add /admin to the address to access the Django admin panel using your superuser credentials.

Heroku Deployment

Full Instructions on deploying to Heroku

Sign up to Heroku for free if you don't already have an account.

  1. Create a new app in Heroku.

  2. In the Resources tab of your app in the Heroku dashboard, click Add-Ons and select Heroku Postgres. Select Hobby Dev - Free as your plan.

  3. When Heroku Postgres is installed, click the Settings tab in the Heroku Dashboard. Click Reveal Config Vars, and add the same variables from your env.py file here, except for DEBUG, as you don't want debug mode on the deployed project.

  4. Copy the value of DATABASE_URL from the Config Vars. In your settings.py file, comment out the default database configuration, and add a new one with the Postgres url.

DATABASES = {
    'default': dj_database_url.parse('your DATABASE_URL here'))
}

  1. Migrate the database models using: python3 manage.py migrate

  2. Create a superuser with your own credentials: python3 manage.py migrate

  3. Create a file called Procfile (no extension) containing the following:

web: gunicorn designland.wsgi

  1. Run pip3 install -r requirements.txt to install required Python packages.

  2. Add the url of your Heroku app (for example 'designland.herokuapp.com') to your env.py file in the local deployment, and to the Config Vars in your Heroku deployment.

  3. Disable collect static so that Heroku doesn't try to collect static files when you deploy by typing the following command in the terminal

heroku config:set DISABLE_COLLECTSTATIC=1
  1. Stage and commit your files to GitHub
git add . 
git commit -m "Commit message"
git push

  1. In the Heroku dashboard for your App, select Deploy. Under Deployment Method, choose GitHub and search for your repository and click Connect.

  2. Select Enable Automatic Deployments, and then Deploy Branch. Heroku will build the App from the branch you selected.

  3. Now whenever you push your commits to GitHub, Heroku will rebuild the application.

django-aullauth Setup

You need to use your own Google Cloud and GitHub Developer credentials to set up django-allauth.

The django-allauth documentation provides instructions for how to complete setup in your Google Cloud Console / GitHub settings.

Credits

Content

Media

Acknowledgements

  • Thank you to my CI Mentor Tim Nelson for his help and suggestions.
  • Thanks to my partner David for his constant support on my journey to a new career.

About

Project 4 for Code Institute Full Stack Developer course. Find and share great web design resources.

designland.herokuapp.com

Topics

bootstrap django postgresql bootstrap5

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

1 fork
Report repository

Contributors 2

  •  
  •  

Languages