DEV Community

Cover image for TCL-22 Recap
Luis Augusto for The Collab Lab

Posted on

7 3

TCL-22 Recap

Combining the collective minds of some very talented and enthusiastic individuals with a fascination for avocados and mochi ice cream, TCL-22 set out on a quest to create a fun and engaging shopping list app, aptly titled AvoCart!

AvoCart Home Page

Built with React, Material UI, Styled Components, and Firebase, AvoCart was an effective use case for both the team to understand how effective communication can create less friction and allow for more creativity and a greater developer experience in group projects.

How does it work?

As a user, you will enter items (e.g., “Greek yogurt” or “Paper towels”) into your list. Each time you buy the item, you mark it as purchased in the list. Over time, the app comes to understand the intervals at which you buy different items. If an item is likely to be due to be bought soon, it rises to the top of the shopping list.

Highlights

The team clicked right from the beginning with fun pairings like team Baltimore and team Canada. Everyone worked collaboratively and effectively throughout the entire project. Some of the highlights from working together on this project include:

  • The team was able to implement and learn new packages very quickly, such as Notistack, Material UI, and Styled Components, and everyone was open to learning new tools.
  • Everyone was very proactive and did not need a lot of direction from the mentors when it came to pairing up and communicating with each other. They began discussing UI in a thread before any of the mentors really knew!
  • All team members provided constructive feedback in a respectful manner.
  • The growth on the team was amazing. Kudos to Abbey, Karan and Caitlin for each securing jobs during the experience!
  • Daria’s curiosity and ability to explain difficult concepts was incredibly helpful, especially with out-of-scope topics such as the pre-built token generator. She does a great job of digging deep into the technical details.
  • Everyone on the team was positive and enthusiastic about creating software that was fun to use, and everyone agreed on the avocado theme.
  • The team created a Figma board to track moodboard inspiration, and build designs for the avocart site. The designs included both mobile and desktop. Both Figma, and responsive design was something that the team learned by themselves.

You can watch the demo of the project below, and also visit AvoCart through the hosted application on Firebase or at our Github repo!


The Design

Our team built out the design prototypes in Figma before developing the UI, and it was a great experience for collaborating and whiteboarding UX and design ideas for the project! Feel free to take a look at our Figma board or preview the images below!

Figma Designs

More Figma Designs


Authors

Advisors

Bravocado

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

Best practices for optimal infrastructure performance with Magento

Running a Magento store? Struggling with performance bottlenecks? Join us and get actionable insights and real-world strategies to keep your store fast and reliable.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️