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

• Min Jung

• Christy Xiong
• Chia Yuan Wu
• Tam Dinh

About the Project

Video Demo

Github

sheCodes has Friday Coding Sessions and wants to share the problem solving videos in one place where other people can also share their solutions. Also, because sheCodes co-president, Min, doesn’t like sharing Google Drive Folders. Thus, sheLearns is a web application that allows sheCodes members to view and upload their own coding practice videos.

Roles/Responsibilities:
Lead and Members all got a chance to work on the front-end, back-end, and database.

Tools

• Database Management System - PostgreSQL
• SQL Client Software Application - DBeaver
• Framework - Express
• JavaScript Library - ReactJS
• Server - Node.js
• API Platform - Postman

Challenges

• Difficulty with creating PostgreSQL tables and didn’t know some psql keywords.
• Difficulty with flex grids on the front-end; sometimes, the content inside a box would spill out and had to figure out how to properly use flexbox
• Figuring out why the one post works and the other post returns not found.
• Didn’t fully understand Express so didn’t pass different parameters.
• Debugging why the postgresql couldn’t recognize the column name
• Postgresql default to lower case. Uppercase parameters would be recognized as lowercase: By changing the column names to lowercase, it was solved.
• Uploading videos
• Since Video unstructured data, meaning they don’t have a fixed and organized data structure (doesn’t use rows and columns) it can not be stored into PostgreSQL
• Debugging and making sure everyone has all the applications needed installed
• Working with Windows and MacOs

What Was Learned

• Learned how to create sql tables and have a better understanding of sql syntax
• Takeaway: Plan to practice and study sql more for future projects that require a database
• Learned how to use flexbox and improved css skills
• Learned how to use REST APIs to POST, data processing and error handling
• Learned the interaction between server and client
• Got to practice REST APIs more
• Learned to connect databases to the server-side

Given More Time...

• Create and separate between production and development code
- Add more features:
• Allow users to upload videos from their local drive (e.g. MP3/4 files)
• Allow user to upload images and word documents
• Add stronger authentication when login
• Add like and save button
• Show user upload history
• Add chat box

Team Introduction

• Hasti Abbasi

• Angie Kim
• Hamin Lee
• Katelyn Mijares
• Armin Erika Polanco
• Emily Panfilo

About the Project

Video Demo

Replit Link

Hackstreet Girls is a website that encrypts and decrypts text from user input through the implementation of a Caesar Cipher and Vigenere Cipher.

Roles/Responsibilities:

Lead:

Hasti: assisted and managed team, worked on web development for website

Members:

Angie: Back-end (Cipher Decryption)

Hamin: Design

Katelyn: Back-end (Cipher Encryption)

Erika: Web Dev & Design

Emily: Design

Tools

• HTML/CSS
• JavaScript
• Figma
• picsArt
• Photoshop

Challenges

• Determining how to incorporate back-end/front-end
• Learning how to write encryption/decryption code from scratch
• Finding a meeting time where we are all available

What Was Learned

• Learning Javascript
• Learning how to use Figma

Given More Time...

• Image Encryption and more ciphers

Team Introduction

• Mia Felipe

• Anna Hock
• Moller Myint
• Hadya Rohin
• Zoey Nguyen

About the Project

Video Demo

Wireframe video Demo

GitHub Link

Mixtify is a playlist generator application that utilizes the Spotify API.

Roles/Responsibilities:

Lead:

Mia: heald meetings, designated tasks, assigned pages, found tutorial videos and helped with debugging, Welcome page, Grid Genre page

Members:

Anna: Spotify API integration, connected all pages, debugging

Moller: Loading page and created assets

Hadya: drea assets and assisted with Spotify API integration

Zoey: Generate Playlist page, debugging, Grid Page assistance

Tools

• Figma
• Adobe Illustartor
• Xcode
• Swift

Challenges

• Getting and using the Spotify API
• Using Xcode as an IDE
• Corss platform development
• Learning Swift from the beginning

What Was Learned

• How to utilize XCode and Swift, as well as its general functions
• How to create an actual application
• GitHub/Gitbash
• Read documentation before implementing

Given More Time...

• Redone in SwiftUI to integrate Spotify
• Cleaned up the look and feel of the app to be more uniform

Team Introduction

• Erika Ledesma

• Natasya Hadiwijaya
• Cynthia Nguyen
• Maddie Isaacs
• Aiah Valera
• Rane Dy

About the Project

Video Demo

Figma Link

CARMEN redesigned BroncoDirect and CPP Planner and created a wireframe and prototype to mimic the website if they had actually implemented it into a real site. Their aim was to make it easier on the eyes by reorganizing features and redesigning the interface.

Roles/Responsibilities:

Lead:

Erika: desktop prototype, website layout, CPP Planner re-design, advisor meeting page

Members:

Natasya: desktop prototype, mobile layout, navigation bar, progress wheel, Billy chat, accessibility

Cynthia: desktop prototype, pagination, CPP Planner re-design

Maddie: desktop prototype, fonts, CPP Planner re-design, class search

Aiah: mobile, icons prototype, mobile layout, profile and appointment pages

Rane: mobile layout, color theory, class schedule/research re-design

Tools

• Figma
• Zoom
• Google Docs
• Discord

Challenges

• Experience with Figma:
With the team having varying experiences with Figma, it was difficult to accomplish designs exactly how we pictured it at times.
• Scheduling conflicts:
It was difficult to find times that’d work for everyone, and when we did it was very limited.
• Virtual meetings
With the majority of our work being done virtually/individually, sometimes there would be miscommunication on what we intend to do.

What Was Learned

• Experience before vs. after:
A lot of us had little experience with Figma before, but are now much more familiar with design features and making components interactive
• Main Accomplishments
Different approach of utilizing the existing system to be one type of all-in-one interface, while minimizing the user’s frustration and maximize UX from using the website

Given More Time...

• We would love to meet up again and develop the prototypes as an actual application!
• Related Topics of Interest:
Explore backend development, would be interested in seeing how that works with the frontend especially with Figma prototypes

Cover image by Rawpixel.com on Freepik

Team Introduction

• Katie Pham

• Taylor Knobloch
• Kenia Velasco
• Ariana Villagrana
• Julia Chaidez

About the Project

Video Demo

Github Link

Figma Link

Jukeboxd is an app that is designed to bring music into the world of social discovery by having a recommendation/rating system that is inspired by Letterboxd. To share music is also to share opinions and thoughts. A world with music is a world filled with happiness.

Roles/Responsibilities:

Lead:

Katie: Assisted and managed team, designer and programmer

Members:

Taylor: Designer

Kenia: Designer

Ariana: Programmer

Julia: Programmer

Tools

• Kotlin
• Dart
• Spotify API

Challenges

• Could only focus the front-end of the application
• Stuck to original design as much as possible
• Used placeholders for spots that would require backend info (ie. account sign in page)

What Was Learned

• Learned how to work as a team after getting us all on the same page in terms of developing a mobile app
• How to use version control as a team for future purposes

Given More Time...

• Our project is still a work in progress, and we plan to continue development through winter and next summer if necessary

Team Introduction

• Shavleen Signh

• Keerthi Sreeram

• Annika Ruggles
• Aurea Jolly
• Kenzie Lam
• Ana Venegas

About the Project

Video Demo

Github Link

An image classification application that distinguishes whether the skin in the uploaded image contains melanoma or not.

Roles/Responsibilities:

Leads:

Shavleen:

Sending out announcements

Reserving study rooms for meetings

Creating discord events

Keeping us on track

Finding learning activities for the team

Backend- experimenting with backend servers to connect to a web app for image classification

Keerthi:

Sending out announcements, updating work tracker

Establishing connections in tools such as colab, github, figma etc.

Finding resources/tutorials to learn from.

Developed the Flask app

Deployed our classification model into the app

Members:

Annika: Data formatting & model research

Aurea: Data collecting & UI/UX design

Kenzie: experimenting with backend servers to connect to a web app for image classification and git hub maintenance

Ana: Data collecting & UI/UX design

Tools

• VScode
• Google Co-lab: Python
• React: HTML/CSS,JavaScript
• Git/Github
• Figma
• Flask
• Training data: The International Skin Imaging Collaboration
• KanbanFlow

Challenges

• Learning how to connect github to work alongside each other
• Trying to find the best backend for connecting the co-lab to react as an API
• Reformatting data correctly
• Finding the best way to deploy our AI Model as a web application

What Was Learned

• Effectively communicating as a team to get tasks done
• Automating data downloads
• Image classification by creating neural networks models using Keras of tensorflow
• Learning how to use web development tools
• Experimenting with different kinds of backend servers that connect to react
• Utilized online platforms to access high-quality instructional content on the basics of AI
• Ultimately learning that we need to use flask as a server to serve Python models

Given More Time...

• Include more clear images for image classification
• Make a multi-classification model identifying different skin diseases
• Establish a legit connection between the app and the backend and display results
• Add a login page to the app

Team Introduction

• Youstina Gerges

• Ngoc Chau Nguyen (Chau Nguyen)
• Sarah Abdeen
• Mandy Ly
• Denise Thuong
• Paige Moore

About the Project

Video Demo

Github Link

This website promotes students’ success and achievements in a web portfolio.

Roles/Responsibilities:

Lead:

Youstina:

Creating/Assigning roles

Creating Timeline

Managing Meetings

Staying in touch

Giving Instructions

Giving Tutorials

Providing Resources

Managing GitHub

Members:

Web Designer: Mandy & Paige:

Structured HTML Files:

Created shapes

Font and Background color

Positioned Elements

Header and Footer

Resized Elements

Designed the Website

UI/UX Designer: Chau & Denise:

Image Carousel

Parallax

Sticky header/footer

Created Linkages

Linked HTML pages together

Socials,Github,Emails,Phones

Linked project examples

Web Image Manager: Sarah

Added Images for:

Image Carousel

Parallax

Social Icons

Profile Picture

Resume/CV

GIFs

Tools

• Figma
• W3schools
• GitHub/Git
• VSCode
• Pinterest
• GIPHY
• HTML/CSS
• JavaScript
• Discord
• Zoom

Challenges

• Git commands like git clone and git push
• Merging from/to Main branch
• Finding a good amount of images
• Resizing images, shapes, and other elements
• Communication between group members
• Figuring out what other group members have completed

What Was Learned

• HTML/CSS and JavaScript
• Learning how to use VSCode
• How to push through Git Bash Terminal

Given More Time...

• Using it to customize it for our own benefits!

Cover image by storyset on Freepik

Team Introduction

• Alison Fung

• Lesly Ibarra

• Andrea Alcaraz
• Athalia Zhou
• Arriana Flores
• Valeria Uruza
• Liessy Ramirez

About the Project

Discord bot video Demo

Games video Demo

Discord Bot GitHub Link

Games GitHub Link

Intro To Coding team spent the first half of SLP learning Python basics on Codeacademy, where they learned topics such as functions, lists, loops, dictionaries, etc. The second half of SLP was spent doing small projects to put Python skills to use!

Roles/Responsibilities:

Leads:

Alison: Discord Bot project lead

Lesly: Games project lead

Members:

Andrea: Snake game

Athalia: Connect 4 & Menu for Games

Arriana: Hangman game

Valeria: getting input from user for Discord Bot

Liessy: sending reminder DM for Discord Bot

Tools

• Python
• Visual Studio Code
• Git & GitHub
• Discord Bot: discord.py library, Discord
• Games: Pygame Library, Tkinter library (interface)

Challenges

• Leads: Solving technical problems with installing Python, setting up Git/Github etc. for team members
Members:
• First time working with coding and how to work in VSCode/the terminal
• First time navigating Git/Github
• Limited time/time-management

What Was Learned

• Everyone learned: Python basics!
• Experience level: Most team members still feel like beginners but have gotten good experience with a new language!
• Valeria: How to use Python to create a Discord bot
• Arriana: How to develop a game from scratch with Python
• Andrea: How to push code to Github and make a game in Python
• Liessy: Difference between a function and a variable, how to use datetime library
• Athalia: How to use Github, VS Code, and Pygame

Given More Time...

• Create a custom game
• Add personal features to current games, including sound and music
• Add input validation to the Discord bot, to ensure the user enters a valid number
• Add a command to the Discord bot to view current scheduled reminders