of2

OLD FASHION

Old Fashion is a community-driven web platform where users can discover, share, and engage with a variety of drinking games. Designed for a social audience, the site allows registered users to upload their own game ideas, comment on others, and like their favorites. Each user has a personalized profile showcasing their bio, favorite drink, and uploaded games. Whether you’re looking for a fun game for your next party or want to share your own creation, Old Fashion is your go-to spot for all things party games — with a stylish, pub-inspired design.

GitHub commit activity GitHub last commit GitHub repo size

screenshot

source: amiresponsive

UX

For the Old fashion design I had to consider the USER’S needs:

Colour Scheme

The color scheme for Old Fashion is inspired by the warm, inviting atmosphere of a classic pub or cocktail lounge. We went with deep, smoky tones paired with subtle golds and warm neutrals to evoke a sense of nostalgia and laid-back social energy — much like the drink it’s named after. These colors help create a cozy, stylish environment that encourages users to explore, contribute, and connect. The overall goal was to balance readability with aesthetic, while giving the site a unique personality that feels both fun and mature.

Typography

For Old Fashion, we chose a typeface that blends modern clarity with vintage charm to complement the site’s theme. The primary font is clean and easy to read on all screen sizes, ensuring accessibility without sacrificing style.

User Stories

You can track progress, issues, and tasks on the public GitHub Project Board:
👉 View the Project Board

Wireframes & Mockups

The initial design of Old Fashion focused on simplicity and clarity, ensuring that users can quickly find games, interact with them, and manage their profiles.

Design Reasoning

Requirements Traceability Table

This table links the functional requirements (FR) to the UX features/wireframes that fulfill them.

Requirement (FR) Wireframe / UX Element Implemented In
FR1 – Users can view all games Home Page wireframe (grid) HomePage.js
FR2 – Users can view game details Game Details wireframe (title, desc, rules) GameDetailsPage.js
FR3 – Users can like/unlike games Game Details wireframe (like button) GameDetailsPage.js
FR4 – Users can comment on games Game Details wireframe (comment form + list) GameDetailsPage.js
FR5 – Users can edit/delete their comments Game Details wireframe (edit/delete buttons) GameDetailsPage.js
FR6 – Users can register/login Auth wireframes (sign up / login forms) SignUpPage.js, LoginPage.js
FR7 – Users can update profile info Profile wireframe (form for updating details) UserProfilePage.js
FR8 – Users can change password Profile wireframe (change password form) UserProfilePage.js
FR9 – Users can delete their account Profile wireframe (delete account button) UserProfilePage.js
FR10 – Only owners can CRUD games Games wireframe (delete button only visible to creator) GamesPage.js

Features

Existing Features

screenshot

screenshot

screenshot screenshot

screenshot screenshot

screenshot

screenshot screenshot screenshot

screenshot

Future Features

Reusable React Components

To ensure modularity and maintainability, Old Fashion makes use of reusable React components across the site:

These components are imported and reused in multiple pages, supporting a DRY (Don’t Repeat Yourself) codebase and improving scalability.

Tools & Technologies Used

Database Design

screenshot

Agile Development Process

GitHub Projects

GitHub Projects served as an Agile tool for this project. It isn’t a specialized tool, but with the right tags and project creation/issue assignments, it can be made to work.

Through it, user stories, issues, and milestone tasks were planned, then tracked on a weekly basis using the basic Kanban board.

screenshot

GitHub Issues

GitHub Issues served as an another Agile tool. There, I used my own User Story Template to manage user stories.

It also helped with milestone iterations on a weekly basis.

Testing

[!NOTE]
For all testing, please refer to the TESTING.md file.

Deployment

The live deployed application can be found deployed on Heroku.

Heroku Deployment

This project uses Heroku, a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.

Deployment steps are as follows, after account setup:

[!IMPORTANT]
This is a sample only; you would replace the values with your own if cloning/forking my repository.

Key Value
CLOUDINARY_URL user’s own value
DATABASE_URL user’s own value
DISABLE_COLLECTSTATIC 1 (this is temporary, and can be removed for the final deployment)
SECRET_KEY user’s own value

Heroku needs three additional files in order to deploy properly.

You can install this project’s requirements (where applicable) using:

If you have your own packages that have been installed, then the requirements file needs updated using:

The Procfile can be created with the following command:

The runtime.txt file needs to know which Python version you’re using:

  1. type: python3 --version in the terminal.
  2. in the runtime.txt file, add your Python version:
    • python-3.9.18

For Heroku deployment, follow these steps to connect your own GitHub repository to the newly created app:

Either:

Or:

The project should now be connected and deployed to Heroku!

Local Deployment

This project can be cloned or forked in order to make a local copy on your own system.

For either method, you will need to install any applicable packages found within the requirements.txt file.

You will need to create a new file called env.py at the root-level, and include the same environment variables listed above from the Heroku deployment steps.

[!IMPORTANT]
This is a sample only; you would replace the values with your own if cloning/forking my repository.

Sample env.py file:

import os

os.environ.setdefault("CLOUDINARY_URL", "user's own value")
os.environ.setdefault("DATABASE_URL", "user's own value")
os.environ.setdefault("SECRET_KEY", "user's own value")

# local environment only (do not include these in production/deployment!)
os.environ.setdefault("DEBUG", "True")

Once the project is cloned or forked, in order to run it locally, you’ll need to follow these steps:

Cloning

You can clone the repository by following these steps:

  1. Go to the GitHub repository
  2. Locate the Code button above the list of files and click it
  3. Select if you prefer to clone using HTTPS, SSH, or GitHub CLI and click the copy button to copy the URL to your clipboard
  4. Open Git Bash or Terminal
  5. Change the current working directory to the one where you want the cloned directory
  6. In your IDE Terminal, type the following command to clone my repository:
    • git clone https://github.com/Stocks84/of2.git
  7. Press Enter to create your local clone.

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

Open in Gitpod

Please note that in order to directly open the project in Gitpod, you need to have the browser extension installed. A tutorial on how to do that can be found here.

Forking

By forking the GitHub Repository, we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original owner’s repository. You can fork this repository by using the following steps:

  1. Log in to GitHub and locate the GitHub Repository
  2. At the top of the Repository (not top of page) just above the “Settings” Button on the menu, locate the “Fork” Button.
  3. Once clicked, you should now have a copy of the original repository in your own GitHub account!

Credits

Content

Source Location Notes
W3Schools entire site responsive HTML/CSS/JS navbar
W3Schools contact page interactive pop-up (modal)
W3Schools entire site how to use CSS :root variables
Flexbox Froggy entire site modern responsive layouts
Grid Garden entire site modern responsive layouts
strftime CRUD functionality helpful tool to format date/time from string
WhiteNoise entire site hosting static files on Heroku temporarily

Media

Source Location Type Notes
TinyPNG entire site image tool for image compression

Acknowledgements