whether-sweater-script.md

• Introduce your team and your project

  • Hi, my name is Davis Weimer. I graduated from the BE Program in Nov 2023. This project is an extension of a Rails API completed during my time at Turing. The primary goal was to learn about aspects of web development and SOA I didn’t have time to approach while at Turing. Whether Sweater embodies many principles of SOA through its modular design, integration of external services, secure management of credentials, and a focus on user-centric features like secure authentication and comprehensive weather forecasting with a road trip creation feature.

• Why did you create this product, what makes it interesting (you are telling a story here)

  • To accompany the original backend application I built a React + Vite application to consume the original API endpoints. There were three web development concepts I wanted to learn more about:
    • Firstly, exploring comprehensive UI/UX design principles. My goal was to not only achieve aesthetic appeal but also to ensure intuitive navigation and interaction patterns that cater to the end-user's needs and preferences while maintaining full mobile responsiveness. This involved crash coursing Figma to understand layouts and utilizing their new Dev Mode to provide boiler-plate Tailwind CSS.
    • Secondly, the integration of JWT-based User Authentication flow was a key area of focus. I spent a good while refactoring the Rails API to establish a secure and efficient mechanism for user registration, login, and session management. By implementing JWT, I wanted to understand better how to handle tokens, manage session states, protect endpoints through sessioning, and implement best security practices to protect against common vulnerabilities.
    • And lastly, the project was an opportunity to gain hands-on experience with CI/CD. By automating the build, test, and deployment processes with Fly.io and GitHub Actions for the Rails API, I learned a lot about accelerating the delivery of updates and new features without accidentally compromising the production deployment.

• Demo your project

  • Video Script:
    • As a User I can choose to Register or Log In. Let's Register a new User. As you can see, the Registration form is validated through various useEffect hooks testing REGEX expressions against the inputs until a valid input passes and is set to a valid input state for submission. The form also provides real-time feedback using icons and tooltips. Upon successful completion and submission of the Registration form, the User is prompted to log in. Once a user reaches the Dashboard, several useEffects fire off fetch requests carrying the user's Bearer token persisted but an AuthContext that displays the forecast from the Weather API and photo from the Unsplash API of the selected location. You can opt to change your location, which will be stored in localStorage and will persist after the browser is closed. After you’ve selected a location of your preference, you can create a Road Trip that will display your Origin, Destination, Travel Time, and forecast at the Destination. Once you’ve wrapped things up, logout to clear your session and get ready for your road trip. Don’t forget to pack a SWEATER.

• Add an architecture diagram rather than logo list of tech stack

  User Registration:

  1. A request with User Credentials is sent on form submission to Rails API
  2. Devise verifies sent User params and, upon success, creates a User
  3. Rails sends a response including information in the body

  User Login:

  1. A request with User Credentials is sent on form submission to Rails API
  2. Devise verifies sent User params and, upon success, creates session & updates User JWT
  3. Rails sends a response including information in the body and the JWT in the Header
  4. AuthContext is set, and an Auth object is saved to sessionStorage
  5. RequireAuth authenticates AuthContext through a custom useAuth hook and renders the Outlet containing Dashboard

  Dashboard Mount:

  1. After JWT Authorization is successful, two fetches are sent to Rails API for weather and photo data. These requests carry the authorized User JWT in the Header.
  2. Rails receives the request and runs a before action to authenticate the User, allowing access to protected endpoints.
  3. Upon authentication, Rails sends a response carrying the requested information in the body.
  4. This same process is carried out when a User creates a Road Trip as well.

  Extensions:

  Now that the foundation for User Auth has been established in the app, I am excited to continue adding and extending some features.

  1. I would like to add a Redis Caching Layer to help improve performance and remove repetitive calls like travel time, location, and photo retrieval.
  2. Also, adding Road Trips to Users, allowing for the ability to save, delete, and view previous road trips, would be fantastic.
  3. As for new features, I think Travel Advice based on Forecast, as well as a customizable dashboard, would be SICK.

  That’s all for me. Thank you for your time, and I hope you enjoyed my presentation. Till next time!