The Collab Lab

For some time, I hesitated to share my coding journey because it felt as disorienting as swimming in the ocean without the moon (analogy credit: Carrie Parker). It began in January 2024, and two months later, I joined a bootcamp before I felt fully prepared. To keep up, I immersed myself in coding every day from 7 a.m. to 11 p.m., sometimes well into the early morning. Eventually, I burned out. I got sick and had to step away, just three weeks before graduation. It was a tough moment, but one that taught me to listen to my body for the first time. I left with the same debt as a graduate, but no certification—and an incomplete React project that took me a month to finish, compared to the one week it would have taken in bootcamp. I struggled with implementing Cloudinary image uploads in my embedded schema, blocked by a mismatch of parameters and arguments. When I finally figured it out, I felt like a magician. Writing about this experience in The Collab Lab application was both therapeutic and vulnerable—I initially doubted I might be accepted. But they saw potential in me that I hadn’t yet recognized, and I’ll carry that experience in my heart ?? Collab Lab was an incredible experience that allowed me to grow so much as a developer. Then came my technical mock interview toward the end of the program, and at first, I felt a bit intimidated. I even tried to rationalize with my Collab mentors that, since I hadn’t spent much time on Leetcode problems yet, this might not be the right moment for me to participate. But I remembered Shaundai Person’s advice from a YouTube video: ‘do it while afraid.’ So, I decided to go for it. It started with a GitHub exam that challenged me to complete a React app, allowing users to search for public-domain artwork from the Art Institute of Chicago (AIC) by finishing components and integrating the AIC search API. With some help from Stack Overflow, where I learned about encodeURIComponent, I made solid progress and genuinely enjoyed the process (most fun exam ever!)—rendering some cool artwork along the way and even having fun documenting and discussing my code. Yesterday, the CollabShop (https://lnkd.in/e8x3qgmB) team presented our demo, and I’m moved beyond words as I write this. We did it! I’m so grateful for everyone who has walked alongside me on this challenging, messy, yet incredibly rewarding journey. Along the way, I’ve learned, grown, and formed connections with others that I will carry in my heart for the rest of my journey. #LatinaInTech #WomenInTech #TechJourney #LatinaCoders #TheCollabLab #DiversityInTech #WomenOfColorInTech #CodingJourney

?? Happy to share my recent experience with The Collab Lab! ?? Over the past few weeks, I had the opportunity to work on CollabShop, a web application built using React.js for the frontend, Firebase for the backend and database management, and Tailwind CSS for styling. Watching this app come to life was truly rewarding, and I am proud of what we accomplished as a team. Today, we finished our final demo of the app, and it was amazing to see how all our hard work came together. Here's what we achieved: ?? Pair Programming: As a team, we embraced pair programming to ensure everyone was involved. We dynamically switched roles between driver and navigator, ensuring balance in coding responsibilities, better code coverage, and efficient problem-solving. ?? Detailed Documentation: We also prioritized detailed documentation on GitHub with clear pull requests and user stories with precise descriptions, acceptance criteria, and technical explanations. This helped us streamline code reviews, maintain a clear project roadmap, and keep us aligned on goals. ??Agile Methodology: We followed an Agile methodology, emphasizing iterative development and continuous improvement. This allowed us to adapt to changing requirements and deliver value incrementally. We worked on a two-week sprint and conducted regular retrospectives to reflect on our process, identify areas for improvement, and implement changes. ?? Collaboration & Support: Collaboration was key to our success. We supported one another throughout the process, discussed improvements, and learned new techniques from each other, making us all better developers. I learned how to talk through our code and thought processes when implementing features within this project. ? Web Accessibility: Accessibility was a key focus. We adhered to WCAG standards by implementing semantic HTML, alt attributes, ARIA roles, and keyboard navigation support to ensure an inclusive user experience for everyone. One of the biggest takeaways has been learning to swallow our pride and admit when we are stuck early on. This only makes us more effective developers, as nobody knows everything! Being able to embrace this mindset has helped me to grow, learn and adapt. I want to give a special shoutout to my fellow developers: Doribel T., Nicholas Rocco, and Stacy D. for your hard work and amazing teamwork. ?? This experience truly helped me grow as a developer and collaborator! A huge thank you to our incredible mentors for guiding us along the way: EJ Mason, Megan Sullivan, and Jenny Takahara ?? Your support made a world of difference! Check out the live app here: https://lnkd.in/gFqsknjP Explore the code on GitHub: https://lnkd.in/gPZ-Mc6z A huge thank you to The Collab Lab and a special shoutout to Andrew Hedges and Stacie Taylor for creating this amazing platform!

Exploring Firebase Backend Concepts Through Paired Programming The Collab Lab, #77 Week 5: September 8 – September 14, 2024 I had an amazing experience diving into backend development with Firebase while paired programming at The Collab Lab. Our issue was “As an item, I want my estimated next purchase date to be computed at the time my purchase is recorded in the database so the app can learn how often I buy different items”. My programming partner and I worked together to solve a tricky problem—converting Firestore database Timestamps into JavaScript Dates and calculating estimated next purchase dates for our app. Through paired programming, we were able to brainstorm solutions, divide tasks effectively, and learn from each other! This time my programming partner drove. We re-read the GitHub issue and talked it over. With that Live Share VS Code extension, we wrote pseudo code for what we needed to do and code comments on how the previous functions will affect the code we’re about to write. We tackled complex concepts like manipulating dates in JavaScript, using Firebase to store data, and ensuring our app could predict future purchase dates of items based on user behavior. We agreed to use as many variables as possible to avoid confusion. We created a getDaysBetweenDates function and exported it from utils/dates.js and used it in api/firebase.js. Since this func takes two JavaScript dates and returns the number of days that have passed between those dates as a whole number, we were able to call this throughout the file! For example: - We declared the previousEstimate const for the calculateEstimate function, and that’s using the getDaysBetweenDates func to get the dates between the lastUpdatedDate and the item.dateNextPurchased. Both data types had to be changed to date data types. - We created the daysSinceLastPurchased const that uses the date the item was purchased and lastUpdatedDate const as arguments for the getDaysBetweenDates func. It was a true collaborative effort, and I feel like we solved the problem effectively by leveraging each other's analytical skills, reading documentation, and talking it out. This experience not only reinforced my understanding of backend concepts, but also reinforced the power of teamwork and communicating effectively in software development! I’m incredibly grateful to The Collab Lab for fostering such a positive environment! I’m excited to continue learning and growing, and for our team to continue to build something impactful together! #collaboration #pairprogramming #teamwork #communication #backenddevelopment #softwaredevelopment #learningbydoing #buildinpublic #codingcollaboration #problemsolving #brainstorming #growthmindset #techtips #techskills #learningtogether #codecollaboration #teambuilding #growththroughlearning #techcollaboration #technicalskills #codingtips #techinsights #learningmindset #buildingtogether #teamcollaboration #collaborativedevelopment #learningbycoding

Can't believe we are halfway through The Collab Lab ! The team Ross Clettenberg , Brianna B. , Falak Z., and I have been working hard on our "Smart Shopping List" Application! With a tight economy, going shopping can be a stress inducing experience. Our "Smart Shopping List App" takes the guess work out of knowing the important items to buy based on a users' shopping history. To enhance the user experience, last week Falak Z. and I collaborated on preventing the user from adding duplicate or empty shopping list items. Ross Clettenberg and Brianna B. updated our API's to calculate a users' next purchase date based on their shopping history in our Firebase database. Falak Z. and I had to take into fact that users tend make punctuation errors and add unusual characters when entering text, which our application was reading as a new shopping list item. This would cause mass clutter and destroy the logic of our app. As always, multiple options existed. For Falak and I, using our good old friend "regex" was the most dynamic option to normalize and validate the user inputted text . To reduce application complexity, we expanded on a previously created validateItemName utility function that had been already preventing users from adding new empty items. Going forward, Falak Z. and I discussed expanding the addition of items to include a separate field to enter item count. It was a fun week, and I really enjoyed playing around with the logic and continuing to learn all the ways TypeScript is so powerful! Our pull requests for your viewing pleasure :) https://lnkd.in/eTBgDYTH https://lnkd.in/eDetkGgF

Week 4 of The Collab Lab is in the books! Our user story this week was "As a user, I want to mark an item on my shopping list as purchased so the app can learn how often I buy different items". We changed our list item to a check box, and create an update Item function to update the #firebase doc. Then we had one extra little functionality that gave us a bit of a pause. We needed the items to uncheck themselves after 24 hours has passed so that the item can be marked as purchased again. In our case the checkbox needs to "turn back on" since it is disabled for the 24 hours. It was a fun problem, and we tried a few things. We tried a setTimeout option and a good ole fashion useState/useEffect option, but it had some cognitive load that we were trying to see if there were other ways to handle. A mentor suggested a tagged union for the state of the check box. Allowing us to have a local state and a source of truth state with the database. It was a new concept of #Typescript for us, but we wanted to try. In the end we were able to change our approach and honestly clean up the code to get a function that allows the user to mark an item as purchase, update the proper information in the database and after 24 hours has passed the item becomes able to be marked for purchase again. I learned a lot and it was really cool to collaborate with my partner and see the team and the mentors bounce ideas around to get to a joint conclusion that we are all proud of! Can't wait for this next week! #software engineer #softwaredeveloper #thecollablab #react #collabie

Week 3 of The Collab Lab completed ? This week the team did amazing on both our issues and communication on code reviews and async! We really worked with each other on the issues to bring forth code we could all be proud of and add the ability to share the lists with existing users and filtering the lists! We did that all of these amazing changes after moving our entire codebase to #Typescript! In addition to working on these issues I noticed that a new user could come to our app and essentially navigate the app while logged out. They weren't seeing data but they were able to see the app. It felt like the app was going against the expected norm of how an app with a login and authenticated usage works. So I wanted to try my hand at adding a #Github Issue for our project, and see what kind of solution I could come up with. With the idea initially being that the user information being User or null would be utilized to show and hide the nav bar component. After think about how the app would function and what we want with type handling the code changes ended up: - Making sure the navigation bar is hidden if a user is not logged in (doing a UI perspective of communication of what is and isn't possible). - Redirecting a user to the homepage if they are not logged in back to the home page even if they try to manually navigate to the pages (which automatically takes the user to the homepage on signout). - Created the "page not found" and redirect to homepage functionality if they attempt to navigate to a route that doesn't exist. - Created our protected route component that handles the null type of our user type to ensure that only authenticated users can use the route and will handle the redirection of the page. - Utilizes React Router's Outlet component and useOutletContext to pass the user information and remove the need for prop drilling in nested protected routes across the code base. Below are the links to both the issue proposal & the merged PR: ISSUE: https://lnkd.in/e3MTKc2J PR: https://lnkd.in/e8FaE3us #softwareengineer #softwaredeveloper #thecollablab #reactrouter #react #collabie

It's been three weeks since I joined The Collab Lab, and I wanted to share some of the exciting experiences I've had so far: Pair Programming ?? Pair programming is a software development technique where two programmers collaborate on a single task. Each week, I pair up with one of my teammates, and we take turns as the "driver" and "navigator." This setup not only enhances code quality but also boosts productivity and knowledge sharing. Plus, pair programming is a lot of fun! Sprints ??♀? I really enjoy sprints because they help me focus deeply on a specific problem. At the same time, I find it important to maintain a broader perspective, and taking breaks refreshes my thought process. I appreciate the structure of sprints, particularly the strict deadlines, which are crucial for discipline and timely delivery. Code Reviews ?? This has been my favorite part! I’m eager to learn and improve, so receiving feedback on the quality of my code is invaluable. Code reviews are paramount, and I’m grateful for every piece of advice our mentors provide. From ensuring sustainable responses to maintaining type consistency, considering edge cases, writing descriptive commit messages, and thoroughly reading documentation, every detail helps me grow as a developer. Thank you to our mentors ?? for guiding me through these nuances! Retrospectives (Retros) ?? I recently participated in my first retro, where I reflected on my work, acknowledging both my successes and areas for improvement. I found the retro to be crucial for our team's growth, as honest feedback in a safe space like The Collab Lab helps us all improve. In conclusion, a huge shout-out to my peers and mentors—here’s to continuous learning and growth, to infinity and beyond! ??

I’m excited to share that I’ve been working on an innovative “smart” shopping list app with The Collab Lab for the past month as part of team TCL-79! ??? This project is especially significant as it marks The Collab Lab’s final cohort, making this experience all the more meaningful. The journey has been fantastic so far. Our team operates in pairs and rotates weekly, which brings fresh perspectives and enriches our collaborative efforts. It’s been incredibly rewarding to learn from different teammates and see how these varied viewpoints drive our innovation. On the technical side, I’m deepening my expertise with React and Firebase, honing my communication and problem-solving skills. Each week presents new challenges and opportunities for growth, which has been both exciting and enriching. Looking ahead, I’m particularly enthusiastic about a planned feature where the app will intelligently track purchasing patterns and prioritize items you’re likely to need soon. This feature will transform the shopping list from a simple list into a smart tool that adapts to your buying habits, enhancing your shopping efficiency. Overall, this project is providing me with invaluable experience in team collaboration and effective communication. It’s also been a great opportunity to engage in demos and showcase our progress. I’m thrilled to be part of this final cohort and am eager to see where this journey will take us! ??

Embracing TypeScript in a Struggle Snuggle The Collab Lab, #77 Week 3: August 25 – August 31, 2024 This week at The Collab Lab, our team took a big step forward: we voted to start using TypeScript in our project! Here’s why we made this decision and how it’s already making an impact: 1.?????Becoming More Hirable: All of us agreed that TypeScript is increasingly in demand in the tech industry. There are a lot of jobs in Oklahoma that want you to know both TypeScript and .NET in the same job description! By adding TypeScript to our project, we're not just making our codebase stronger; we’re also boosting our own marketability as individual developers. 2.?????Learning Together: Adopting a new language or framework can be daunting but doing it as a team makes a huge difference. We held an extra “Intro to TypeScript” Office Hours meeting this week, diving into TypeScript variable naming conventions, data types, and versioning. We also talked about TypeScript tutorials and tips. I don’t want to get caught up in tutorial video hell, so I was thankful for that. The best part? We got to see real examples of refactored project code in TypeScript! 3.?????Building Confidence: Learning TypeScript in a supportive environment with low stakes like The Collab Lab allows us to experiment, make mistakes, and grow together. One of our mentors graciously did the work of refactoring our project into TypeScript already, helping me ease into using it by asking questions and researching lines of code. ?The positivity and encouragement from our team mentors has been incredible! 4.?????Collaborative Decision-Making: Our decision to use TypeScript wasn’t top-down; it was made collaboratively in our weekly sync meeting on Sunday, with everyone’s input! This approach fosters ownership and commitment to our shared goals. 5.?????Future-Proofing Our Skills: In tech, you can’t afford to stop learning. As a team, we decided that there’s no better time than now to learn something new. And why not learn it together? Since adopting TypeScript, I've already experienced some exciting progress! This week, I have been perusing through the fundamentals on https://lnkd.in/g3JUwc6n. My programming partner and I were able to successfully pair program and solve this week’s issue (As a user, I want to be able to invite others to an existing shopping list)! Additionally, I was able to refactor our form and its logic into its own component, which improves reusability. I'm excited to continue this journey, explore TypeScript's features, and become more versatile as a developer! #TypeScript #WebDevelopment #Collaboration #DeveloperLife #ContinuousLearning #CareerGrowth #Teamwork #Mentorship #CodeCommunity #FutureProof #TechSkills #FrontendDevelopment #SoftwareEngineering #Innovation #Refactoring #CodeQuality #PairProgramming #TechCareer #ProgrammingLife #TechCommunity #SelfTaughtDeveloper #CodeWithConfidence #TechIndustry #BuildInPublic #TechLearning

I’m incredibly grateful to be part of The Collab Lab’s final cohorts. I’m especially touched by the dedication of our mentors (Megan Sullivan, Jenny Takahara and EJ Mason) who take on the monumental task of breaking down complex problems so that we can collaboratively explore them step by step ?? Last night’s workshop, designed by our mentors, was truly special. They provided us with source code, and we used VSCode Live Share to create tests and fix bugs. I learned so much from observing how they approached writing these tests. Since the session was spontaneous, there were a few bumps along the way—something I remind myself is totally normal. It was also awesome to see their professional “Googling” skills in action to get unstuck. It was fun to watch them pair-program while discussing the "whats" and "whys" behind each test. They verbalized their thought process, shared pieces of wisdom, and invited us (the mentees) to provide observations and ask questions. For our React Web UI testing, we used the jest-dom library to test the DOM. Jest matchers allowed us to write precise expectations for our unit tests, and we imported the screen object for querying. The biggest takeaways for me were: ?? Tests should mirror how a user interacts with the DOM. ?? Follow the "Given, When, Then" structure for testing. ?? JSDOM does not play well with CSS nesting. Before joining the workshop, I listened to a Plum Village App podcast episode that discussed the stories we tell ourselves and how we seek evidence to support these narratives. I did my best to approach the workshop mindfully rather than focusing on the “shoulds” stories that can cloud my learning journey and I felt much more relaxed, which made it easier to learn, ask questions and actually have fun. P.S.: My fellow mentees/developers (Shuveksha Tuladhar, Stacy D. and Nicholas Rocco) are incredibly knowledgeable, and I’ve enjoyed the rotation process, which has allowed me to collaborate with each of them on different parts of the project. Whoever gets to call them colleagues in the future will be truly fortunate!