WishBoard

Video Demo: Soon!

Description: Manage your resolutions and wishes in a simple, easy to use web application.

Project Files

• app.py: Main logic and rendering for handling data, accounts, and sharing.
• accounts.py: Includes @loginRequired helper.
• data.db: Database that includes users, resolutions, and share requests.
• requirements.txt: List of Python package dependencies used.
• .gitignore: Specifies what not to publish to GitHub

• templates/:

  • layout.html: Extendable template with header, imports, and metadata.
  • board.html: Homepage that lists user's resolutions, and provides management options for them.
  • create.html: "Create" page for adding a new resolution.
  • login.html: Login page for users to access their accounts.
  • onboard.html: Customization page for new users and existing users alike.
  • register.html: Page for new users to create accounts.
  • sharing.html: Allows users to view their sent/received resolution sharing requests.

• static/:

  • icons/: Includes different versions of the WishBoard app icon.
  • js/:
    • loginUtils.js: Script to allow toggling showing the password in login/register pages.
    • resolution.js: Logic for showing/hiding resolution edit/delete modals.
    • shareResolution.js: Logic for showing/hiding resolution sharing/stop sharing modals.
  • manifest.json: Declares app properties to be used when installing the app to the home screen.
  • global.css: Main styling that applies globally, and imports the other styles.
  • colors.css: Defines color variables in both light and dark mode.
  • fonts.css: Defines where custom fonts are used (headers, paragraphs, etc.)
  • button.css: Styling for buttons and their variants.
  • utils.css: Includes classes for generally customizing elements (fullHeight, etc.)
  • board.css: Includes styling for lists in the home page and sharing page.

Overview

WishBoard is an app for tracking users’ resolutions and aspirations. It allows them to add resolutions to their list, edit their title/description, and track their different states, whether it be Aspiring, Doing, or Completed. It also allows users to share individual resolutions with other users to collaboratively track aspirations with others. WishBoard has a clean, easy-to-use interface with minimal clutter. It is a web app, so it can run on virtually any smart device, and it also supports PWA (Progressive Web App) behaviors so it can be installed to the user’s Home Screen/Dock. It does not, however, support an offline mode.

When designing WishBoard, I wanted it to be very easy to use, as it's an app that should be able to be used by the masses. The page navigation layout is very simple, being a simple tab strip at the top of all pages. Almost all the actions and navigation do not require accessing via a dropdown or other form of showing hidden content, as that would be confusing for some. All empty states have descriptive reasons why they are empty, as well as the actions that users should do to fill them. Most actions open a modal that provides context and allows for a simpler experience when doing them on individual resolutions. Finally, on onboarding, the user simply has to provide a nickname and their favorite color, which enhances the feeling of personalization.

For implementation, I decided to use Flask, HTML, CSS, and some JavaScript. I used the technologies we learned in CS50 in order to be able to focus more on the project itself rather than having to familiarize myself with a new toolset. I did not, however, use the Codespace for writing the code, so as to gain more experience doing configuration and setting up my own environment for Python. I used JetBrains PyCharm, a great IDE for Python and web development, to write the app in its entirety. For storing data, I’m using a SQLite database that’s stored under data.db for simplicity's sake, as well as to make migrating data between hosts relatively trivial.

In the backend, all the app routes are in one (relatively) large file. This is due to the fact that all routes require accessing the database, and it is preferable to keep DB calls in a single file (for educational purposes). Out of personal preference, the code is styled using camelCase for variables and function names. Routes use dash-case, as that’s typical for URIs. In JavaScript, I used the same style as that of Python, and, similarly to Python as well, I did not include semicolons in JavaScript. Overall, the code style between the two languages is quite standardized for consistency’s sake. My CSS and HTML formatting are standard for the two languages. The database file and its tables are created, if needed, on app launch.

When choosing between full app reloads and JavaScript-based loading, I opted to use a hybrid approach. User data is fetched using full reloads and server-side rendering. JavaScript, however, is used to fetch some utility data. The list of resolution statuses is located on the server, so JavaScript fetches it on the client to populate selectors for the user to edit/create resolution states. JavaScript also fetches the number of share requests the user has, in order to show it as an indicator on the tab strip. Finally, JavaScript is used for creating and populating modals for editing resolutions, sharing them, and more. This allows for more fluid and snappy interactions, while keeping the amount of JavaScript lower.

To make the design feel complete, I ensured that the app would look good on all screen sizes, and that the UI design felt both modern but also appropriate for the type of app that this is. Hence, the header font is playful, rather than professional or bland. As aforementioned, I also made the empty states descriptive and containing directions on how to fill them. I use icons generously, as they enhance the visuals and help discern actions. To make the app feel more personal, I added randomized greetings that appear on the home page for the user, including “hello”, “hi”, “hey”, and more.

Installation

How to install Python and dependencies.

macOS:

# install python 3.10 (macOS with Homebrew)
brew install python@3.10

# create venv
python3.10 -m venv venv

# activate it
source venv/bin/activate

# install requirements
pip install -r requirements.txt

Linux (Ubuntu/Debian):

# install python 3.10
sudo apt update
sudo apt install python3.10 python3.10-venv python3.10-distutils

# create venv
python3.10 -m venv venv

# activate it
source venv/bin/activate

# install requirements
pip install -r requirements.txt

Windows (PowerShell):

# allow running scripts
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

# install python 3.10
winget install Python.Python.3.10

# create venv
python -m venv venv

# activate it
.\venv\Scripts\Activate.ps1

# install requirements
pip install -r requirements.txt