Git Product home page Git Product logo

capstone's Introduction

Hi, I'm Ryan! ๐Ÿ‘‹

About Me

๐ŸŒ I'm a full-stack web developer with an education in web and mobile application development. Having honed my skills through a combination of education and real-world experience, I graduated from Vancouver Island University in 2023, where I excelled academically and professionally. Since graduating, I've worked primarily as a freelancer, developing software solutions that address complex and dynamic business needs. Committed to growth and innovation within a team environment, I am eagerly looking for a full-time position where I can contribute to meaningful projects and collaborate with like-minded professionals.

๐Ÿš€ I specialize in creating dynamic solutions for business operations and logistics management, task automation, customer relationship enhancements, AI integration and educational tools. My projects emphasize functional interfaces, streamlined user experiences, and robust backend architectures.

๐Ÿ” Currently, I am seeking a full-time position where I can bring my innovative approach to a collaborative team, working on impactful projects.

๐Ÿ“ฌ Reach out to me at: [email protected] | LinkedIn Profile

Languages & Tools:

A list of some of the technologies I reach for and use regularly

TypeScript JavaScript Vue.js Nuxt.js Svelte Node.js Express Tailwind CSS Prisma Supabase OpenAI API Vitest Jest Git GitHub npm pnpm yarn PostgreSQL

Additional Technologies:

I have practical experience with a variety of other technologies, which I am capable of using effectively in projects and am actively enhancing my skills in:

React Next.js Astro AWS GCP Python Docker JWT OAuth Firebase MongoDB Puppeteer Cypress Mocha IoT Microcontrollers

Featured Projects

CarEvo Logistics Web Application

Client

Nuxt.js Vue.js TypeScript TailwindCSS Prisma Supabase

The Carevo Auto Solutions Web Application optimizes the logistics and management of used vehicles for Carevo, a premier online used car dealership in Eastern Canada. This comprehensive tool enhances operational efficiency by facilitating vehicle handling across multiple lots, tracking services, and providing timely updates for both logistics and sales teams. Seamlessly integrating vendor portal features, real-time vehicle tracking, request management, and QR code functionality, this application ensures smooth operations and enhanced customer experiences. Built with Nuxt 3, Vue 3, TypeScript, and TailwindCSS, this project exemplifies my expertise in creating scalable and user-friendly web solutions tailored to specific industry needs.

VIU Career Outlooks Web Application

Live Repo

Data Collection

JavaScript Node.js Express Puppeteer

Proof of Concept

TypeScript Vue.js Nuxt.js

Final Project

TypeScript Svelte Node.js Prisma Tailwind CSS Vite Fuse.js node-cache

The VIU Career Outlooks Web Application represents a pivotal collaboration between myself and Vancouver Island University, conceived during my 2022 summer internship as part of the ITAS Web and Mobile Development Diploma program. Aimed at aiding prospective students in making informed decisions regarding their educational and professional paths, this innovative tool seamlessly connects VIU programs and credentials with real-world employment opportunities. By integrating data scraping techniques and database management with Prisma, I ensured the accuracy and relevance of employment outlooks presented to users. Currently live on VIU's website, the application provides detailed insights into career pathways, job prospects, and industry trends across British Columbia. As I continue to evolve this project, I'm enhancing its functionality with features such as user authentication and personalized price sheets, while transitioning to modern technologies like Nuxt, TypeScript, and Tailwind CSS for improved performance and usability.

Granny Go Go Trip Tracker (Capstone Project)

Client Repo

Vue.js Nuxt.js TypeScript Tailwind CSS Prisma Supabase Google Maps API OpenAI API Zod Vitest Tailwind Forms Tailwind Typography Nuxt Icon Chalk eslint DaisyUI Nanoid Consola Superjson

The Granny Go Go Trip Tracker project offers a comprehensive solution for modernizing trip scheduling and management within the medical transportation sector. Developed with a focus on enhancing driver efficiency and passenger communication, this intuitive web application simplifies trip planning and execution. Leveraging a tech stack comprised of TypeScript, Vue 3, Nuxt 3, and Tailwind CSS, I designed a robust frontend interface that provides drivers with essential trip details at a glance. The integration of OpenAI's Chat Completion API with GPT-3.5-Turbo streamlines schedule generation, allowing drivers to create optimized driving routes from email dispatches effortlessly. Additionally, the application features AI-powered conflict detection and route optimization functionalities, ensuring smooth and timely transportation experiences for passengers. By prioritizing usability and functionality, the Granny Go Go Trip Tracker project demonstrates my proficiency in developing innovative solutions that address real-world logistical challenges within the medical transportation industry.

Additional Projects

MossAway Victoria, CMS Website

Client Live Repo

Astro Svelte TailwindCSS

As a part of my ITAS268 Final Project, I created the Victoria MossAway Portfolio using Astro, a modern frontend framework. Departing from traditional CMS platforms like Drupal or WordPress, I crafted a custom CMS solution tailored to my needs. Leveraging AI technology, I generated unique moss monster images and optimized text to enhance SEO and engage visitors effectively. Despite its short-lived duration due to the sale of MossAway, this portfolio site proved highly effective, ranking organically on Google and competently representing my work without conflicting with the SEO of the original MossAway site.

Password Generator

Live Repo

Vue.js TypeScript TailwindCSS

This basic Password Generator is a simple yet effective tool for generating secure passwords quickly and easily. Built in just a couple of hours, this lightweight application allows users to customize their passwords by choosing whether to include special characters, uppercase and/or lowercase letters, and numbers. With a click, users can save their generated password to the clipboard for convenience. Leveraging Vue.js for frontend functionality and TypeScript for robust type-checking, the RogaDev Password Generator demonstrates my proficiency in crafting responsive and visually appealing interfaces. Despite its simplicity, this project underscores my commitment to delivering effective solutions that meet user needs in a straightforward manner.

Live Repo

HTML CSS JavaScript

Initially developed during my first year of school, the Window Cleaning Project Evaluation Tool originated from a need within my previous business, which specialized in exterior cleaning services. Faced with the challenge of generating accurate window cleaning quotes efficiently, I identified a gap in available tools and decided to create a solution myself. Leveraging vanilla HTML, CSS, and JavaScript, I crafted a mobile-friendly application that prioritized simplicity, speed, and effectiveness. This initial version proved highly successful in streamlining the quotation process. Currently, I'm actively enhancing the tool for a future version. This new iteration incorporates advanced features such as user authentication, personalized price sheets with save functionality, and a complete rewrite using modern technologies including Nuxt, TypeScript, and Tailwind CSS. Through this ongoing development, I aim to further improve the tool's functionality and usability, catering to the evolving needs of window cleaning professionals.

Experience

  • Freelance Web Developer
    • Freelancing post-graduation, developing custom web solutions for various clients including CarEvo and educational tools for VIU.
  • Web Developer, VIU Web Department
    • Developed key projects like the VIU Career Outlooks web app, enhancing the student interface for career planning.

Education

  • Diploma in Web and Mobile Application Development
    • Vancouver Island University, 2023, Top of my class

Let's Connect!

Feel free to follow me on GitHub to stay updated on my projects.

Thank you for checking out my profile!

capstone's People

Contributors

dependabot[bot] avatar rogadev avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

capstone's Issues

Information about the service and trip request form

Scenario: Visitors view information about the service and click on the call-to-action button to request a trip

Given a visitor is on the website
When they want to learn about the service
Then they should be able to view information about the service
And they should be able to see a call-to-action button to request a trip
And the call-to-action button should be clickable
And the button should redirect the visitor to the trip request form

To-do Tasks

  • Add information about the service to the website
  • Create a call-to-action button on the website
  • Make sure the button redirects the visitor to the trip request form

User authentication and authorization

Scenario: Only authorized users can log in and access the dashboard page

Given a visitor is on the login page
When they try to log in with the Google provider
Then they should only be able to log in if they are an existing user
And they should be redirected to the dashboard page if they are the correct user
And they should not be able to log in if they are not the correct user
And they should not be able to create a new user account

To-do Tasks

  • Enable only the Google provider for OAuth login in Supabase settings
  • Turn off the ability to create new users in Supabase settings
  • Add code to check if the logging in user is the correct user and redirect them to the dashboard page if they are authorized
  • Add code to prevent logging in and account creation for unauthorized users

Trip request form requirements and confirmation time

Scenario: Visitors want to know the requirements for submitting a trip request form

Given a visitor is on the trip request form page
When they want to learn about the requirements
Then they should be able to see that trip requests need to be booked more than 36 hours in advance
And they should be able to see that it may take up to 12 hours to confirm the trip request

Scenario: Visitors want to know that their form was submitted successfully and that they will be contacted

Given a visitor has submitted a trip request form
When they want to know if the form was submitted successfully
Then they should be able to see a confirmation message that the form was submitted
And they should be informed that someone will contact them shortly

To-do Tasks

  • Add trip request form requirements to the website
  • Add confirmation message to the website after a form is submitted
  • Make sure that the confirmation message includes information about someone contacting the visitor shortly

Commit trips to the database and schedule them

Scenario: Users can commit trips to the database on a form and schedule the trips

Given an authenticated user is on the "Schedule Trips" page
When they enter the details of a trip in a form
And they make changes to any of the fields of information
Then they should be able to save the changes
And the trip should be committed to the database
And the trip should become visible on the

To-do Tasks

  • Add a form for entering the details of a trip
  • Add code to enable the "save changes" button once changes are made to any of the fields of information
  • Add code to commit the trip to the database
  • Add code to display the trip on the page to schedule the trips after it has been committed to the database

End-to-End - User Acceptance Test Plan

Test Plan

For each test case, we should document the test steps, expected results, and actual results. We should also record any issues or discrepancies and work with the development team to resolve them before retesting. Once all test cases pass, the app can be considered ready for release.

Landing Page

  • Verify the page displays the service description, operation, and fees
  • Ensure call-to-action buttons for requesting a trip and driver login are present and functional

Trip Request Form

  • Test filling out and submitting the form with all required information
  • Check validation rules for email, phone number, and date fields
  • Verify the autocomplete feature for common locations
  • Test the earliest trip request time constraint (36 hours)

Driver Login

  • Test successful login with valid credentials
  • Verify login fails with invalid credentials and provides an appropriate error message

Driver Dashboard

  • Check if the upcoming trips list is displayed correctly
  • Test the drag-and-drop functionality for adjusting trips within the schedule
  • Verify completed trips are displayed, along with their billing and payment statuses
  • Ensure the billing list displays sent invoices and allows marking them as paid or sending reminders
  • Check if the payments summary correctly calculates monthly driver payments and allows marking them as paid
  • Test navigation and functionalities on the daily driving page
  • Verify the flat fee management page allows viewing, adding, and adjusting preset trip costs

Trip Approval and Confirmation

  • Test approving a requested trip and adjusting pickup times
  • Verify the confirmation email is sent to the appropriate client or agent

Billing and Payment Management

  • Test creating billable and payable data after trip completion
  • Verify the system applies net7 or net30 payment terms correctly

Cross-functional Testing

  • Check if the app works smoothly across different devices and browsers
  • Test the app's performance under high traffic or user load

Accessibility Testing

  • Verify the app is accessible for users with disabilities (e.g., screen reader compatibility, keyboard navigation)

Security Testing

  • Test the app for potential security vulnerabilities (e.g., data breaches, unauthorized access)

Add Error Pages

App needs proper, custom error pages. Right now we're displaying the default Nuxt error page, even in production.

Navbar Tooltip Is Not Firing

When hovering over the navbar links (especially when in smaller icon-only screen sizes) the tooltip dropdown isn't working.

Root Route

  • Enhance the '/' page for logged in admin users.

  • Redirect driver users to the '/app/' route.

Create page to display unconfirmed trips and implement trip confirmation process

As a driver, I want to see a list of unconfirmed trips so that I can confirm them and update the database accordingly. To achieve successful completion, the following tasks need to be completed:

  • Create a page or a section within an existing page that displays a list of unconfirmed trips.
  • For each trip in the list, display the following information: trip ID, pickup location, pickup time, drop-off location, and drop-off time (if available).
  • Implement a "Confirm" button next to each trip in the list.
  • When the "Confirm" button is clicked, update the database for "Trips" by setting the "confirmed" property of the corresponding trip ID to true.
  • Create two stops in the Stops database: one for the pickup location and time, and one for the drop-off location and time.
  • If the drop-off time (called appointmentTime in the db) is null or an empty string, fetch the drive time from an API.

User Story: Subscribe to SaaS Product

As a company owner, I want to sign up for a subscription to this service.

  • Guest can navigate to site.
  • Guest can create a user account.
  • User can use social auth to create account and/or log in, OR...
  • User can confirm email.
  • Signed in user can create company account.
  • Company account requires cc subscription. (Stripe)
  • Upon successful company account creation, (Subscription Successful) user can log into company account.

Lucia & Prisma Overhaul

Replacing Supabase auth with Lucia. Keeping Supabase for the DB hosting, however, I'm bringing in Prisma as the ORM and removing the Supabase isomorphic client.

Dashboard Location Refactoring

The / route should effectively be our dashboard.

Must complete issue #63 before implementing the following.

  • Extract the dashboard into a component.
  • Dynamically load the dashboard component on the homepage.
  • Update the "dashboard" page to become the primary dispatching UI.

Confirm Requests page

Scenario: Users can confirm requests on the "Confirm Requests" page

Given an authenticated user is on the "Confirm Requests" page
When they view the submitted requests
Then they should be able to look over the request details
And they should be able to contact the client and confirm the trip
And they should be able to approve or reject the trip

To-do Tasks

  • Create a "Confirm Requests" page
  • Display submitted requests on the page
  • Add code to allow users to contact the client and confirm the trip
  • Add code to allow users to approve or reject the trip

ChatGPT conversations sent as new thread each time

Currently, every time we ask ChatGPT for more JSON, we are feeding in the original seed instructions along with out prompt data. This is costing a great deal more $ as the model is factoring in all of the system message tokens every time we make a request to the API.

User Story: Driver Requests Access

As a new driver, I want to be able to "sign up" or "apply" to be a driver for the company.

  • User can navigate to '/app/register' or similar url
  • User can fill out and submit form to request access as a driver user
  • Admin can accept/decline an application
  • Pending applicants can fill out onboarding information
  • Accepted, onboarded driver users can log into the app and see their '/app/drive' dashboard

User Story: Trip Assignment

As an admin user, I want to be able to assign trips to my team members.

  • Admin can click-drag-drop or otherwise assign a list of trip tasks to a driver/vehicle/route.

User Story: Trips CRUD

As an admin user, I want to be able to view, create, update, and delete trips to be assigned to routes/drivers.

Authenticated user navbar

Scenario: Authenticated users can view a different navbar for navigating the back end of the website

Given an authenticated user is on the website
When they are logged in
Then they should see a different navbar than the public navbar
And the authenticated user navbar should have links to different pages to navigate the back end of the website, such as the "Confirm Requests" page

To-do Tasks

  • Create a new navbar for authenticated users
  • Add links to different pages in the authenticated user navbar

Implement 'Drive' tab to display confirmed and not completed/canceled stops for today

As a driver, once I log in, I want to be able to navigate to my "drive" tab and see the list of stops for today's date that are confirmed and not completed or canceled. To achieve successful completion, the following tasks need to be completed:

  • Create a "drive" tab or section within an existing page that displays the list of stops for today's date.
  • Display the following information for each stop in the list: stop ID, pickup location, pickup time, drop-off location, and drop-off time (if available).
  • Only display stops that are confirmed (confirmed = true) and not completed or canceled (closed = false).
  • Implement a "Complete" button next to each stop in the list.
  • When the "Complete" button is clicked, update the database for "Stops" by setting the "closed" property of the corresponding stop ID to true.

Schedule approved trips page

Scenario: Users can schedule approved trips on a separate page

Given an authenticated user is on the "Schedule Trips" page
When they view the approved trips
Then they should be able to schedule the trip

To-do Tasks

  • Create a "Schedule Trips" page
  • Display approved trips on the page
  • Add code to allow users to schedule the trip

Failed Login Handling

When users fail to log into the auth dashboard, there needs to be a clear message stating that their login attempt failed and/or that the organization does not accept new users, and that they can only be invited.

Database Design

  • Driver Details
  • Clients
  • Passengers
  • Trips
  • Assignment
  • Summary
  • Billing

And more...

User Story: Individual User (Free Tier) Account

As an individual user, I want to be able to access an individual account that is free.

  • Individual accounts cannot (rough draft - finished list TBD) :

    • Invite other users as employees
    • Send quotes?
    • Customer and/or property limit?
  • User can log in

  • User can verify email address if not using social auth.

  • Once validated, user can create individual account.

  • User can access individual account.

  • User can access and edit account settings.

Enter email snippets for formatting

Scenario: Users can enter email snippets that get sent off to ChatGPT for formatting

Given an authenticated user is on the "Enter Email Snippets" page
When they enter an email snippet
Then it should be sent off to ChatGPT via their API for formatting
And a formatted block of JSON should be received
And the formatted block of JSON should be validated before trying to use it to populate a list of input fields

To-do Tasks

  • Create an "Enter Email Snippets" page
  • Add code to send off the email snippet to ChatGPT via their API
  • Add code to receive the formatted block of JSON
  • Add code to validate the formatted block of JSON before using it to populate input fields

User Story: Vehicle CRUD

As an admin, I want to be able to see a list of all the vehicles I have added, view one at a time, edit one at a time, and delete a vehicle from the list.

  • View a list of all vehicles
  • View one vehicle at a time (NOTE: will be modifying this functionality into a modal in the future.
  • Create a new vehicle.
  • Delete a vehicle from the list.

FIX: Preview & Production DB Connection Issues

When attempting to log in to the live preview, the db connection doesn't seem to be working as intended. This roadblocks us from test driving in preview, which will also ultimately also affect pushing to production.

User Story: Client CRUD

As an admin, I want to be able to create, view, update, and delete my clients from the app.

  • View all clients.
  • View one client in full detail.
  • Create a client.
  • Update a client's details.
  • Delete a client.

User Story: Owner Invites Employees

As a company owner who has subscribed, I want to invite my employees to use the app.

  • Owner has access to the company account settings.
  • Owner can add email address(es) to a form.
  • Form evaluates all email address(es) for validity.
  • Submission sends email to recipient(s).
  • Owner can only invite up to x number of employees, depending on tier of subscription.
  • Number of employee invite validation works for both previously and newly invited user(s).

Admin Login

As an admin, I want to be able to log into my dashboard using social auth (Google only).

Create Public Guest Route for Viewing Quotes

Customer quotes will need to be viewable from an unprotected route within the app. We will need to have rate limiting on this route to protect bots from spam attacking to guess unique URL parameters.

Ideas/Examples:

  • ezeval.app/company-name/quote/e5286b50-9bb5-4c34-9ed0-6743fca3d39c (preferred)
  • ezeval.app/quote/e5286b50-9bb5-4c34-9ed0-6743fca3d39c
  • company-name.ezeval.app/quote/e5286b50-9bb5-4c34-9ed0-6743fca3d39c (multi-tenant requirement)

  • Company account owner or manager or individual account owner can send quote (link) to customer.
  • Customer can click link and view quote.
  • Customer can add/remove extras offered in quote.
  • Customer can accept/decline quote.
  • Action of accepting or declining quote prompts action item creation for owner/manager to book job.

Complete 276 Tasks

  • Implement automated testing.
  • Adapt user stories to use Gherkin format.
  • Add acceptance criteria to user stories.
  • Submit an E2E, User Acceptance Test Plan.

Stretch Feature: Print Evaluation Layout

Considered a stretch feature to be tackled if there is time, only because this is an edge-case to support use/functionality that is outside the scope of actually getting value out of the app.

  • Owner, manager, or evaluator can click "print" button from an evaluation layout, either as a backup, or in advance of traveling to an evaluation that is off-grid/outside of reliable cell reception.
  • Printed layout should be a 1:1 representation of all the details to collect. Perhaps a tally capturing area below each element would be of use. Multi-pages printed if needed.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.