Client Handoff Plan

Handoff Plan:

Our client will receive access to the following:

  • Gmail – class deliverables, design drafts, final documentation
  • Supabase – database platform and current admin side of the application
  • GitHub – application code
  • Vercel – deployment platform
  • Deployed volunteer and admin applications

How to Use Final Products

Volunteers can use the volunteer app, which is currently deployed at: https://mysmile.vercel.app/

Admins can use the admin portal, which is currently deployed at: https://mysmile-admin.vercel.app/

Setting up Locally

This is mainly for development purposes (i.e. you, or a technical team of yours, wants to add/edit/delete features). If you don’t plan to code, you will NOT need to complete these items. However, we have created a Github account for the wakesmiles.dev@gmail.com account. This account will be needed to access Github, where the code is stored. Once logged into Github, collaborators can be added to modify the existing codebase. Please contact the admin, Sommer Wisher, for the login information. 

To view and edit the code, you will first need a development environment. We recommend installing Visual Studio Code (VSCode), which is one of the most popular platforms, if not the most popular for software projects. The following instructions will be provided for VSCode. Clone the Repository into Local development platform (for us, VSCode)

  1. Navigate to the GitHub link for the wakesmilesapp. Click on the green “Code” button and copy the HTTPS repo URL.
  2. Open VSCode. Use keyboard shortcut Ctrl + Shift + P (Windows) or Command + Shift + P (Mac) to open the Command Palette bar at the top.
  3. Type “Git: Clone” into the Command Palette bar to pull up the option, then paste the URL into the bar.

We recommend installing the following VSCode extensions for a better development experience:

  • In the left menu bar of VSCode, click on the Extensions icon (looks like a mini-tetris board of 4 blocks, with the top-right one detached from the other three).
  • Search up and install/update the following extensions:
Extension NameAuthorVersion
GitHub Pull Requests and IssuesGitHubV0.50.0 or higher
GitLens – Git superchargedGitKrakenV12.2.2 or higher
Git GraphmhutchieV1.30.0 or higher
Prettier – Code FormatterPrettierV9.9.0 or higher
ES7 + React/Redux/React-Native snippetsdsznajder
Tailwind CSS IntelliSenseTailwind LabsV0.9.1 or higher
  1. Once Tailwind CSS IntelliSense is installed, go to the plugin’s settings
    1. Search “includeLanguages”
    2. In the “Tailwind CSS: Include Languages” table that appears, add plaintext (item) and html (value)
  2. Update VSCode Settings
    1. Navigate File > Preferences > Settings
    2. Search “files.associations”
      1. In the “Files: Associations” table that appears, add *.css (item) and tailwindcss (value)
    3. Search “editor.quickSuggestions”
      1. In the “Editor: Quick Suggestions” table that appears, make sure that the strings item has on as its value
  3. Set Up / Run Code
    1. In the terminal, navigate into the root folder of the directory with the cd command
      (ex: cd wakesmilesapp)
    2. Run npm install
    3. To run code in the browser, run the command npm run dev in the terminal
      1. To quit in the terminal, press  Ctrl + C (Windows) or Command + C (Mac)

Technical Descriptions

Both the Wake Smiles Volunteer App and the Wake Smiles Admin Portal were developed with the React.js framework, which is the most popular framework for front-end (user-facing) interfaces. Because it is very well established, it has great documentation and compatibility with other platforms. To store the volunteer data, we used Supabase, which offers 500MB storage and 1GB of file storage. Essentially, React was used to build the UI while Supabase was used to manage data that the UI interacts with. Github was used to store and manage code. 

Here is a brief summary some of the technology used for these apps:

  • React is a JavaScript library for building user interfaces. In this project, it is integrated with several other frontend libraries, such as Tailwind CSS (used to change appearance of some buttons and UI components) and Material React Table (used to generate the tables).
  • Supabase is an open source Firebase alternative. It hosts data through the cloud, so Wake Smiles won’t need extra hardware for storage. We’re currently operating on the free tier during development, but upon launch we’ll need to upgrade to the Pro tier. The price of this is $25 per month, which was confirmed by Sommer Wisher during application development.
    • You will need to log into Supabase with the WakeSmiles GitHub account. This will let you view user profiles, documents, set up shifts, delete shifts, check shift enrollment, and more. We will create videos that will show you exactly how to do each of these items. 
  • Node.js is a runtime script built for JavaScript’s engine created to build scalable web applications. It allows us to manage libraries and run our code to test. In simple terms, it allows us to see what our code develops. 
  • VSCode is a code editor that lets us edit, manage, and update our code in a clean and simple manner. Many different code editors exist, and each has their perks. If you’re familiar with other code editors, feel free to use them. Just know that our initial directions are written for VSCode users.
  • Git is an open-source library that lets us do version control on our code and share our code with each other. GitHub is a web-based, code hosting platform that enables users to collectively edit and manage code together.
  • Vercel is a front-end platform for deploying React applications and has good compatibility with Supabase. By the time that hand-off occurs, we will be able to deploy our application via Vercel. Post-deployment, the MySmile app and the admin portal will be accessible to users through a weblink.