[{"data":1,"prerenderedAt":5},["ShallowReactive",2],{"readme:a35hie\u002FWishBoard":3},{"html":4},"\u003Ch1>WishBoard\u003C\u002Fh1>\n\u003Ch4>Video Demo: Soon!\u003C\u002Fh4>\n\u003Ch4>Description: Manage your resolutions and wishes in a simple, easy to use web application.\u003C\u002Fh4>\n\u003Ch2>Project Files\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Ccode>app.py\u003C\u002Fcode>: Main logic and rendering for handling data, accounts, and sharing.\u003C\u002Fli>\n\u003Cli>\u003Ccode>accounts.py\u003C\u002Fcode>: Includes \u003Ccode>@loginRequired\u003C\u002Fcode> helper.\u003C\u002Fli>\n\u003Cli>\u003Ccode>data.db\u003C\u002Fcode>: Database that includes users, resolutions, and share requests.\u003C\u002Fli>\n\u003Cli>\u003Ccode>requirements.txt\u003C\u002Fcode>: List of Python package dependencies used.\u003C\u002Fli>\n\u003Cli>\u003Ccode>.gitignore\u003C\u002Fcode>: Specifies what not to publish to GitHub\u003C\u002Fli>\n\u003Cli>\u003Ch4>\u003Ccode>templates\u002F\u003C\u002Fcode>:\u003C\u002Fh4>\n\u003Cul>\n\u003Cli>\u003Ccode>layout.html\u003C\u002Fcode>: Extendable template with header, imports, and metadata.\u003C\u002Fli>\n\u003Cli>\u003Ccode>board.html\u003C\u002Fcode>: Homepage that lists user's resolutions, and provides management options for them.\u003C\u002Fli>\n\u003Cli>\u003Ccode>create.html\u003C\u002Fcode>: \"Create\" page for adding a new resolution.\u003C\u002Fli>\n\u003Cli>\u003Ccode>login.html\u003C\u002Fcode>: Login page for users to access their accounts.\u003C\u002Fli>\n\u003Cli>\u003Ccode>onboard.html\u003C\u002Fcode>: Customization page for new users and existing users alike.\u003C\u002Fli>\n\u003Cli>\u003Ccode>register.html\u003C\u002Fcode>: Page for new users to create accounts.\u003C\u002Fli>\n\u003Cli>\u003Ccode>sharing.html\u003C\u002Fcode>: Allows users to view their sent\u002Freceived resolution sharing requests.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fli>\n\u003Cli>\u003Ch4>\u003Ccode>static\u002F\u003C\u002Fcode>:\u003C\u002Fh4>\n\u003Cul>\n\u003Cli>\u003Ccode>icons\u002F\u003C\u002Fcode>: Includes different versions of the WishBoard app icon.\u003C\u002Fli>\n\u003Cli>\u003Ccode>js\u002F\u003C\u002Fcode>:\u003Cul>\n\u003Cli>\u003Ccode>loginUtils.js\u003C\u002Fcode>: Script to allow toggling showing the password in login\u002Fregister pages.\u003C\u002Fli>\n\u003Cli>\u003Ccode>resolution.js\u003C\u002Fcode>: Logic for showing\u002Fhiding resolution edit\u002Fdelete modals.\u003C\u002Fli>\n\u003Cli>\u003Ccode>shareResolution.js\u003C\u002Fcode>: Logic for showing\u002Fhiding resolution sharing\u002Fstop sharing modals.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fli>\n\u003Cli>\u003Ccode>manifest.json\u003C\u002Fcode>: Declares app properties to be used when installing the app to the home screen.\u003C\u002Fli>\n\u003Cli>\u003Ccode>global.css\u003C\u002Fcode>: Main styling that applies globally, and imports the other styles.\u003C\u002Fli>\n\u003Cli>\u003Ccode>colors.css\u003C\u002Fcode>: Defines color variables in both light and dark mode.\u003C\u002Fli>\n\u003Cli>\u003Ccode>fonts.css\u003C\u002Fcode>: Defines where custom fonts are used (headers, paragraphs, etc.)\u003C\u002Fli>\n\u003Cli>\u003Ccode>button.css\u003C\u002Fcode>: Styling for buttons and their variants.\u003C\u002Fli>\n\u003Cli>\u003Ccode>utils.css\u003C\u002Fcode>: Includes classes for generally customizing elements (fullHeight, etc.)\u003C\u002Fli>\n\u003Cli>\u003Ccode>board.css\u003C\u002Fcode>: Includes styling for lists in the home page and sharing page.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Overview\u003C\u002Fh2>\n\u003Cp>WishBoard is an app for tracking users’ resolutions and aspirations.\nIt allows them to add resolutions to their list, edit their title\u002Fdescription, and track their different states, whether it be Aspiring, Doing, or Completed.\nIt also allows users to share individual resolutions with other users to collaboratively track aspirations with others.\nWishBoard has a clean, easy-to-use interface with minimal clutter.\nIt 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\u002FDock.\nIt does not, however, support an offline mode.\u003C\u002Fp>\n\u003Cp>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.\nThe page navigation layout is very simple, being a simple tab strip at the top of all pages.\nAlmost 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.\nAll empty states have descriptive reasons why they are empty, as well as the actions that users should do to fill them.\nMost actions open a modal that provides context and allows for a simpler experience when doing them on individual resolutions.\nFinally, on onboarding, the user simply has to provide a nickname and their favorite color, which enhances the feeling of personalization.\u003C\u002Fp>\n\u003Cp>For implementation, I decided to use Flask, HTML, CSS, and some JavaScript.\nI 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.\nI 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.\nI used JetBrains PyCharm, a great IDE for Python and web development, to write the app in its entirety.\nFor storing data, I’m using a SQLite database that’s stored under \u003Ccode>data.db\u003C\u002Fcode> for simplicity's sake, as well as to make migrating data between hosts relatively trivial.\u003C\u002Fp>\n\u003Cp>In the backend, all the app routes are in one (relatively) large file.\nThis 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).\nOut of personal preference, the code is styled using camelCase for variables and function names.\nRoutes use dash-case, as that’s typical for URIs.\nIn JavaScript, I used the same style as that of Python, and, similarly to Python as well, I did not include semicolons in JavaScript.\nOverall, the code style between the two languages is quite standardized for consistency’s sake.\nMy CSS and HTML formatting are standard for the two languages.\nThe database file and its tables are created, if needed, on app launch.\u003C\u002Fp>\n\u003Cp>When choosing between full app reloads and JavaScript-based loading, I opted to use a hybrid approach.\nUser data is fetched using full reloads and server-side rendering.\nJavaScript, however, is used to fetch some utility data.\nThe list of resolution statuses is located on the server, so JavaScript fetches it on the client to populate selectors for the user to edit\u002Fcreate resolution states.\nJavaScript also fetches the number of share requests the user has, in order to show it as an indicator on the tab strip.\nFinally, JavaScript is used for creating and populating modals for editing resolutions, sharing them, and more.\nThis allows for more fluid and snappy interactions, while keeping the amount of JavaScript lower.\u003C\u002Fp>\n\u003Cp>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.\nHence, the header font is playful, rather than professional or bland.\nAs aforementioned, I also made the empty states descriptive and containing directions on how to fill them.\nI use icons generously, as they enhance the visuals and help discern actions.\nTo 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.\u003C\u002Fp>\n\u003Ch2>Installation\u003C\u002Fh2>\n\u003Cp>How to install Python and dependencies.\u003C\u002Fp>\n\u003Ch4>macOS:\u003C\u002Fh4>\n\u003Cpre>\u003Ccode class=\"language-sh\"># install python 3.10 (macOS with Homebrew)\nbrew install python@3.10\n\n# create venv\npython3.10 -m venv venv\n\n# activate it\nsource venv\u002Fbin\u002Factivate\n\n# install requirements\npip install -r requirements.txt\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch4>Linux (Ubuntu\u002FDebian):\u003C\u002Fh4>\n\u003Cpre>\u003Ccode class=\"language-sh\"># install python 3.10\nsudo apt update\nsudo apt install python3.10 python3.10-venv python3.10-distutils\n\n# create venv\npython3.10 -m venv venv\n\n# activate it\nsource venv\u002Fbin\u002Factivate\n\n# install requirements\npip install -r requirements.txt\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch4>Windows (PowerShell):\u003C\u002Fh4>\n\u003Cpre>\u003Ccode class=\"language-powershell\"># allow running scripts\nSet-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser\n\n# install python 3.10\nwinget install Python.Python.3.10\n\n# create venv\npython -m venv venv\n\n# activate it\n.\\venv\\Scripts\\Activate.ps1\n\n# install requirements\npip install -r requirements.txt\n\u003C\u002Fcode>\u003C\u002Fpre>\n",1787323194183]