Semester-Long Projects (SLP) is a great program to enrich coding skills in a group setting. Participants are formed into groups of similar interests. Each group is led by a mentor to build a unique coding project. SLP includes workshops like git, inclusive design, and other topics to aid the project's completion. At the end of the semester, the groups come together for sheCode's SLP Demo Day to showcase their project!

We congratulate every member and team lead on finishing SLP of 2022!

Thank you for your 10 weeks of teamwork and dedication! You have accomplished these past 10 weeks and should be proud of all the work you have done. We hope that SLP has encouraged you to explore more about Computer Science and inspires you to continue pursuing projects outside of class. We hope you had fun and learned a lot! sheCodes and sheBoard are so proud of you and we can’t wait to see where you will go from here.
-Laura Siu (she/her) sheCodes Internal Vice President 2022-2023

Judges for SLP 2022

• Daisy Tang

• Markus Eger

• Mohammad Husain

• Lan Yang

• Yu Sun

We would like to thank you judges for being a SLP Demo Day Judge! We appreciate you sharing your expertise and guidance with our members. On behalf of sheCodes, we sincerely thank you for taking the time to help create a meaningful experience for our SLP participants.

Team Introduction

• Athalia Zhou

• Damian Varela
• Annabel Wen
• Hiyab Gebreegziabher
• Hyewon Kang
• Areesha Imtiaz

About the Project

Video Demo

Github

sheCodes Discord Bot to have more control over it and can make it more consistent! Bot features included welcome message, a tic tac toe game, an economy game, anime GIFs, wanted posters, and a Tetris game!

Roles/Responsibilities:

Lead

• Athalia: Welcome message

Members

• Damian: Tic tac toe game
• Annabel: Economy game
• Hiyab: Anime GIFs
• Hyewon: Wanted posters
• Areesha: Tetris game

Tools

• Python
• Discord
• VS Code
• Git/Github

Challenges

• Using Python
• Compatibility issues with MacOS
• Discord Token Security

What Was Learned

• Gained experience working with Python and Discord Bots
• Gained insight into working with Discord as a platform

Given More Time...

• Expand features on the bot
• Increase the speed of the Tetris game
• Grow economy game’s features
• Looking for a hosting platform
• Combining files
• Possible art contest

Team Introduction

• Kenia Velasco

• Aiah Valera
• Sarah Abdeen
• Ally Nguyen
• Michelle Paino
• Zelda Perez
• Amanda Huang

About the Project

Video Demo Desktop App

Video Demo Mobile App

Figma Desktop App

Figma Mobile App

An application that allows users to share mindful letters with others! Letters2U aims to create a less overwhelming experience that prioritizes written content between users.

Roles/Responsibilities:

Lead:

Kenia (Mobile App Team)

Members:

Mobile App Team: Michelle, Sarah, Ally

Desktop App Team: Aiah, Zelda, Amanda

Tools

• Figma
• Discord
• Zoom
• Google Docs
• Procreate

Challenges

• Consistency through both projects
• Nailing down specific design choices and clarity on why we were making them
• Keeping accessibility in mind for future implementations

What Was Learned

• UI/UX Frameworks
• Working in a Team
• Figma Prototyping

Given More Time...

• Polish up certain features and more research on UI/UX
• Code a low-fidelity with functionality

Team Introduction

• Erika Ledesma

• Mohraiel Matta

• Amber Ellis
• Katie Pham
• Justin Ha
• Louisa (Janet) Auwlia
• Melody Duong
• Scott Lee
• Denise Thuong
• Sarah To

About the Project

Video Demo

GitHub Link

Moodz combines music and journaling to create a meaningful way of reflecting on emotions over time.

Roles/Responsibilities:

Lead:

• Erika: Worked with Spotify API to grab preview URL and used an HTML audio tag to play the preview; Refactored song search bar; Animated icon when audio is played and paused
• Mo: Code Review, Project Management, Styling, Displaying preview audio for entries, Creating entry modal

Members:

• Melody: Spotify authentication; logout/delete entry functions, logout pop-up
• Scott: Initial backend project setup; JWT authentication; Optimized song search bar; Backend API endpoints for entries; Confirmation dialog when deleting entries; Spotify API authentication
• Katie: Design styling; Project Management; Styling; Authentication Page, Entry Formatting
• Janet: Logo design; Display artist in the preview; Refactored search results; Navigation Bar; About Us Page
• Sarah: Calendar; Editing profile; Background image; Spotify user access token swapping for API calls
• Denise: Post button functionality and for post entries to show up on frontend
• Amber: Post API endpoint for user authentication; Created a custom font and reformatted entries; Post button functionality
• Justin: Set up frontend and backend architecture, Set up OAuth flow using JWT tokens for frontend and backend communication, Used MongoDB aggregation pipelines to build personalized social media feed and search results for adding other users as friends, Used Docker to deploy app to a service such as Heroku

Tools

• Frontend: Vue.js, Figma, Canva
• Backend: ASP.NET (C#), MongoDB
• Agile Development: GitHub, Azure DevOps, Discord

Challenges

• Running our backend API on Mac
• Understanding the tech stack flow with Spotify API

What Was Learned

• Agile Development
• Azure DevOps
• First time using Spotify web API for most of us

Given More Time...

• Notification functionality to include friend requests
• Ability to add or reject requests from navbar notif button
• Deployment
• We already deployed our full stack project but we haven’t deployed our Spotify dev app so it only allows our members on the Spotify dev app to login
• Personalization
• Uploading their own wallpaper to make it their safe space journal!
• Uploading images in an entry to enhance the user’s experience with the app :D/li>
• Editing an entry

Team Introduction

• Hasti Abbasi

• Isabelle Guevara

• Kripa Sigdel
• Sonia Pandey
• Vanisa Suadprathon
• Amelie Carillo
• Arriana Flores
• Lacey Nguyen

About the Project

Video Demo

Github Link

Computer vision algorithm to detect lane line markings on the roads

Roles/Responsibilities:

Lead:

Hasti: Backend Dev, Image Combination

Isabelle: Hough Transform Coordination

Members:

Kripa: Region of Interest Function, Figma Prototype

Sonia: Image/Video Preprocessing, Gaussian Blur, Figma Prototype

Vanisa: Greyscale Conversion, Edge Detection

Amelie: Greyscale Conversion, Edge Detection

Arriana: Figma Prototype

Lacey: Backend Dev

Tools

• Python
• Figma
• VS Code
• Github

Challenges

• Difficulty coordinating the Figma interface with the Python/OpenCV backend due to lack of time and experience with integration
• Insufficient time to test the program on various/ambiguous road conditions, such as faded markings, nighttime lighting, or construction zones
• Managing contributions from multiple team members while ensuring consistent code quality and sticking to a unified version
• Adapting to Python, OpenCV, GitHub, and Figma, which were new to some team members, led to slower progress initially
• Balancing project work with other academic and club responsibilities limited the depth of implementation and testing
• Ensuring everyone was comfortable with GitHub (e.g., pull requests and branch management) required additional effort

What Was Learned

• Project planning and time management
• Learned technologies and methods of communication to complete the project
  • Python
  • OpenCV library
  • Figma
  • GitHub functions and best practices
    • Coding as a team
    • Collaborative efforts

Given More Time...

• Integrated Frontend and Backend: Connect the Figma interface with the backend to create a functional web or mobile app
• User Experience Enhancements: Add smoother transitions / clear instructions / better design for a more intuitive interface
• Expanded Testing: Test on diverse datasets, including rural roads, urban intersections, and challenging conditions like rain or low lighting
• Improved Algorithm: Enhance lane detection to handle ambiguous scenarios such as faded markings and construction zones
• Performance Optimization: Reduce processing time for videos and improve efficiency for larger files
• Real-World Applications: Explore live camera feed processing for potential real-time lane detection use cases

Cover image by Rawpixel.com on Freepik

Team Introduction

• Medha Swarnachandrabalaji

• Josephine Villar
• Valeria Urzua
• Sara Downing
• Ashley Mapes
• Mandy Ly

About the Project

Video Demo

Github Link

Analyze a user’s password based on criteria and give them a report of the strength of their password and/or a better password if their password isn’t strong

Roles/Responsibilities:

Lead:

• Medha: project management, putting code together, code that checks if password is common and tells user if it is

Members:

• Josie: code to see if the password has any special characters
• Valeria: code to see if the password has 12+ characters and at least one capital letter
• Sara: code to see if password has at least one lowercase letter and at least one number
• Ashley: code to make a strong password and encrypt the inputted password
• Mandy: code to ask the users questions about their password and check if the user uses two or more of the same characters in a row, flask implementation, putting the code together

Tools

• Python
• VS Code
• Github
• Git
• Github Desktop
• Flask/Jinja

Challenges

• Learning Python with no experience beforehand
• Downloading Git on MacOS
• Handling edge cases
• Learning about new libraries
• Working through bugs

What Was Learned

• Learned Python and other tools within the project (e.g. GitHub/Git)
• Learned how to analyze and identify password weaknesses
• Gained insight into creating user-friendly password analysis
• Enhance understanding of cybersecurity fundamentals, such as password strength metrics and user data security

Given More Time...

• Add more layers of security to the encryption and decryption using a public key encryption instead of symmetric
• Add a scoring system of the user’s password (ex. weak, moderate, strong)
• Given feedback as users type in the password
• Add code to support multiple human languages so larger audience could use the tool

Team Introduction

• Julia Chaidez

• Michelle Solares

• Roshan Karimi
• Mayela Ancheta
• Katelyn Mijares
• Melissa Gio

About the Project

Video Demo

Github Link

The website is to showcase art pieces. It lets users explore and learn about different artworks, art movements, and artists. The goal is to make art exciting and accessible, not to sell or advertise art but to provide a beautiful and educational experience for visitors.

Roles/Responsibilities:

Leads:

Julia:

Project coordination, decision-making, and overall direction

Members:

Javascript and Interactivity: Michelle and Melissa

• Responsible for coding interactive features and user interactions

Styling and Layout: Roshan and Mayela

• Focused on visual design, ensuring user interface is aesthetically pleasing and functional

Accessibility and Testing: Katelyn

• Ensured the site was accessible and tested for usability

Tools

• Figma
• HTML/CSS/JavaScript
• Github
• Jest

Challenges

• Translating Figma designs to responsive code
• Balancing aesthetics with functionality

What Was Learned

• Gained hands-on experience with JavaScript to enhance user interactivity
• Seeing the static Figma designs come alive as functional, interactive web pages
• Feel more confident to translate designs into responsive, interactive web pages
• Working with teammates improved problem-solving, communication, and technical skills

Given More Time...

• Search/Sort
• Like Button
• Sign Up

Team Introduction

• Alison Ching

• Caitlyn Hue
• Heather Trombley
• Sarah Acosta
• Cynthia Nguyen
• Elsa Zheng
• Meredith Toledo

About the Project

Video Demo

Github Link

Capture and share memories through time capsules! The app allows you to customize with photos, videos, text, etc, notifications when capsules are ready to open, and allows you to share and collaborate with friends.

Roles/Responsibilities:

Lead:

Backend: Alison

Prototyping, App Functions, Basic Screens

Members:

Frontend: Caitlyn, Heather, Sarah

Caitlyn: App Prototype, Wireframe, Slides

Heather: App Prototype, Wireframe, Concepts and theme

Sarah: App Prototype, Wireframe, Icons

Backend: Cynthia, Elsa, Meredith

Cynthia: Wireframing, Implementing app UI

Elsa: Prototyping, App Functions, More Screens

Meredith: Prototyping, Wireframing, Verifying functionality

Tools

• Figma
• XCode
• Swift UI
• Github
• Discord
• Google Docs

Challenges

• Machine Issues
  • Many members did not own a MacBook to run Swift UI and Xcode and had a difficult time using a virtual machine.
• Time Constraints
  • Due to scheduling conflicts and countless features we wanted to add, we did not have enough time to collaborate and implement everything in mind.
• Experience with Firebase
  • Most of the team did not have experience with Firebase, making it a learning process to use and difficult to connect the database to the app.

What Was Learned

• Gained more experience in the frontend and backend aspects of app development, including working with Xcode and Swift UI
• Interested in pursuing Cloud storage for pictures and videos

Given More Time...

• Perfect project and implement Firebase

Cover image by storyset on Freepik

Team Introduction

• Alison Fung

• Lesly Ibarra

• Caoilainn Johnsson (CJ)
• Janice Lachan
• Marianne Goce
• Tina Arezoomanians
• Elijah Harnanto
• Sayumi Amarasinghe
• Sarah Huynh

About the Project

Cybersecurity Video Demo

UI/UX Video Demo

Cybersecurity GitHub Link

UI/UX GitHub Link

Split into two mini-teams with focused topics depending on member’s interests: Cybersecurity & UI/UX! Cybersecurity: Personalized Password Manager UI/UX: Virtual post-it board for users to keep track of important due dates and events

Roles/Responsibilities:

Leads:

Alison (UI/UX Team)

Lesly (Cybersecurity Team)

Members:

Cybersecurity Team: CJ, Janice, Marianne

UI/UX Team

• Design Team: Sarah, Elijah
• Coding Team: Tina, Sayumi

Tools

• Cybersecurity
  • Python
  • Vs Code
  • Wireshark
  • Github
  • Code Academy
• UI/UX
  • Figma
  • Github
  • Discord
  • HTML/CSS/JavaScript

Challenges

• Cybersecurity
  • Limited time to add more features
• UI/UX
  • Design Team: Toolbar, Overlay-prototyping; Learning and navigating Figma
  • Coding Team: Creating an overlay and implementing its functionality to add, save, and edit post-its (referencing tutorials, event handlers); Formatting post-it layout across the page using Flexbox

What Was Learned

• Cybersecurity
  • Learned how to successfully create own Personal Password Manager
  • Basics of Python, RSA key encryption, and WireShark before applying to the project
• UI/UX
  • User-friendly/interactive design
  • Learning design in Figma
  • Cross-communication between design and programming teams & how to split up tasks
  • Website programming and enjoying working in a group

Given More Time...

• Cybersecurity
  • Future implementation of more features within each personal password manager
• UI/UX
  • Calendar view with reminder due dates
  • Store a user’s post-its in cookies or implement some sort of login method so that they could return to their previous post-its