"Connect Grid" is a sports trivia website that I designed and developed from the ground up. Inspired by the popularity of the Immaculate Grid website, which focused on baseball trivia, I recognized the opportunity to create a similar platform that extended beyond baseball and incorporated additional features. As my first venture into website hosting, Connect Grid presented a valuable learning experience, allowing me to gain insights into web development, data management, design principles, and user engagement.

The idea for Connect Grid was sparked by the limitations of the existing Immaculate Grid website, which lacked an unlimited mode and support for sports beyond baseball. Determined to create a more versatile and engaging experience, I set out to build a sports trivia website that encompassed the two other major sports (NFL and NBA) and introduced an unlimited mode.

One of the initial challenges I faced was obtaining the necessary sports data. While there was no direct API available for retrieving team player information, I resorted to web scraping. This approach, however, brought me into contact with rate-limiting issues. To overcome this, I strategically managed my data retrieval methods by scraping various sites. I implemented data storage within a PostgreSQL database hosted by Heroku. This allowed me to efficiently manage the data for NFL and NBA teams.

With the data infrastructure in place, I shifted my focus to building the frontend. Using Figma, I prototyped a clean and user-friendly design that aligned with my vision for simplicity. Originally, I was utilizing Flask routes with a Python backend, but I encountered unexpected challenges when combining them with a Next.js frontend. Consequently, I transitioned to a Next.js frontend and a Python backend for more consistent functionality.

Complex Database Queries and Unique Hints

Building the core functionality involved crafting intricate database queries to generate unique hints for users. These hints, such as "All-NBA" distinctions and the player's college, enriched the trivia experience. Debugging and addressing bugs was a vital part of this stage, ensuring a smooth user interaction.

Connect Grid quickly gained traction, attracting 1,000 users within a span of just 2 or 3 days. The integration of Google Analytics provided valuable insights into user behavior, enabling me to refine the user experience. To increase the number of users, I explored marketing strategies and initiated a Twitter account to connect with potential users.

As new features were introduced, including various game modes and answers modals, the project's complexity grew beyond my initial expectations. This realization prompted me to transition from using Local Storage for data storage to Redux, enhancing the application's performance and data management capabilities.

Throughout the project, I dedicated significant time to honing my skills in web development technologies. I immersed myself in learning Tailwind CSS, React, Flexbox, and mobile responsiveness. Additionally, I acquired insights into SEO strategies and marketing techniques, underscoring the importance of attracting and retaining users.

Connect Grid stands as a testament to my journey of creating a versatile and engaging sports trivia platform. From overcoming data acquisition challenges and implementing complex database queries to enhancing user engagement and exploring new technologies, this project encapsulates my commitment to innovation and continuous improvement. As I continue to add new features and refine the website, Connect Grid remains a dynamic and evolving showcase of my skills and passion for web development.

My First Public Website: Building a Multi-Sport Trivia Website

Connect Grid

Created a sports trivia game using NextJS and hosted it on Vercel, acheiving 10K+ visitors.

🔥 My friend Allen pitched me this app idea called Fireplace. He wanted to create a platform that would streamline event planning and foster vibrant communities online. I decided to work with him in making this come to life, ready to dive into the tech side of things.

👨‍💻 My role involved establishing the app's core codebase and implementing sophisticated technical solutions. We harnessed the power of Neo4j, a specialized database, to architecturally organize data. To enhance the app's speed and responsiveness, I integrated Redis, a cache system, which helped speed up our queries to be mere milliseconds.

🚀 Beyond coding, our journey took us through accelerators and pitch competitions. These experiences exposed us to the startup ecosystem, demanding us to present Fireplace's vision to diverse audiences. Through these endeavors, we learned about business strategies, effective communication, and the nuances of entrepreneurship.

🛠️ Presently, I spearhead the technical development of Fireplace's app. Collaborating with Allen, we iteratively enhance the app's features, design, and functionality. We are using different graph algorithms and AI tools to make Fireplace truly useful in the world today, so we can foster meaningful connections that bridge physical distances.

 🌐 Fireplace is an exciting venture which is a vibrant part of the Northeastern entrepreneurship community. Our journey continues to evolve, as we refine Fireplace into a dynamic platform that enhances the way people connect and engage in the digital age.

Building Fireplace: My First Startup

Fireplace

Co-founded a social media startup and helped to develop the mobile app and website, using tools like Redis, Typescript and Neo4j.

Cactivate was a startup venture where I had the opportunity to contribute during a six-month co-op. As part of a team of three developers and five individuals in total, we were trying to create an online tool that would help businesses manage their online advertising efforts. Our primary focus was on enhancing return on investment (ROI) by optimizing ad content and making it simpler for businesses to operate in the online ad space with a simple set and forget. Looking ahead, we aimed to incorporate artificial intelligence to generate ad creatives to make it even simpler for the user. The company was only working with Facebook ads when we started there.

Since it was a startup we were given many responsibilities almost from day one. We went through a short training period where we learned the ropes and then went from there. 

I optimized our use of the Facebook API to dramatically increase the speed of collecting data by using various techniques including batching.

I integrated Shopify into the website and allowed users to connect a Shopify account. This involved an extensive review process from Shopify and building out the entire use case.

Increased loading time of dashboard by caching data on S3. We did this by using EventBridge to schedule a lambda function to run every hour. This lambda function would get the users Facebook data and then upload it to a S3 bucket which the dashboard would then fetch the data using API Gateway and calling the appropriate Lambda function. 

Worked on the React frontend and Redux and helped populate our data with React code. I also helped to quash various bugs.   

Built an ad translator that would take all Facebook ads and convert them to our system. This involved extensive database management and getting images and videos uploaded to Facebook onto our platform.

We helped with interviewing potential new full time developers by asking algorithm questions and eventually ended up hiring one. 

Cactivate was a very exciting co-op and taught me a lot about the entrepreneurship world. I learned how to work in a development setting and be a dependable member of a team. This experience also provided me with the opportunity to actively participate in team growth and contribute to shaping the company's trajectory. The environment was super friendly and I loved getting to enjoy Pizza Friday with the co-founders.  I am forever grateful for the opportunity and it will always hold a special place in my heart.

Cactivate - Working at My First Startup

Cactivate

Collaborated with a team of 3 engineers to enhance the online ad tech platform, specializing in React frontend development, backend logic, and seamless integration of Facebook and Shopify APIs.

As a Project Lead for the Scout club at Northeastern University, I led a team of three designers and developers in a semester-long project for a fitness startup called Watz. The Scout club specializes in collaborating with clients over an entire semester to develop new brands and create corresponding websites. Our client, Watz, founded by former professional race car driver Ale Latif, sought our expertise in rebranding and designing their fitness startup's online presence.

Our primary goal was to create a comprehensive brand book and design elements that resonated with Watz's identity as a fitness startup. Additionally, we aimed to craft high-fidelity prototypes of the Watz website, ensuring a user-friendly and engaging experience. As Project Lead, my responsibilities included overseeing the design and development processes, conducting weekly client meetings, and providing guidance to the team.

Throughout the project, we faced several challenges, such as aligning the brand with Watz's unique positioning, integrating fitness-focused design elements, and maintaining consistent communication with the client. To address these challenges, we conducted in-depth research on fitness industry trends, collaborated closely with the client to understand their vision, and held regular team meetings to discuss design iterations and gather feedback.

One notable achievement was the successful creation of a comprehensive brand book that encapsulated Watz's core values, mission, and visual identity. This brand book served as a foundation for all design decisions and ensured a consistent brand image across various touchpoints.

Moreover, the development of high-fidelity prototypes allowed us to showcase the future website's look and feel to the client, fostering excitement and collaboration.

 In addition to managing the project's design and development aspects, I played a pivotal role in mentoring two freshman developers on the team. Through one-on-one discussions, code reviews, and collaborative problem-solving, I helped them enhance their skills and integrate seamlessly into the project. We also built in time for team bonding activities, including visiting Boda Borg in Boston!  Balancing this mentorship role with project management allowed for a dynamic learning environment within the team.

The Scout club's collaboration with Watz was a rewarding experience that showcased the power of design and teamwork in bringing a brand to life. The project's success was marked by the creation of a brand book, visually engaging designs, and high-fidelity prototypes that aligned perfectly with Watz's fitness-focused identity. By overseeing the project's various aspects and fostering a collaborative atmosphere, I not only contributed to the success of the project but also provided valuable mentorship to fellow team members.

Managing a Team at Scout 

Scout

Led a team of developers and designers to create a branded website and dashboard for Watz, a fitness AI company with 2M+ in funding.

Hermann Ebbinghaus found that on average “more than 50% of what we learn is forgotten within an hour, 2/3rd's by the end of the day and 80% by the end of the month”. How can you easily get notes attached to each meeting? dnotes. dnotes is a Slack app that integrates Google Docs and Slack to bring you meeting notes shared into the Slack conversations that you want. Get rid of the hassle and have notes ready to go at the click of a few buttons.

The clutter to find notes taken for meetings is a problem faced by individuals universally. We were inspired by the question, “what if we could make notes for meetings easier and hassle-free?”. We were brought to this question after going through a variety of different ideas that stemmed from our own experiences with Slack. We knew Slack already had a variety of extensions and shortcuts so we started with installing the different Slack apps to see what their user experience was like and how useful it would be everyday Slack life. We came upon the Google drive Slack app and started to think about what we could do with the tools already provided by Google. We thought about the idea we wanted to implement by mulling it over for a few days. We initially had ideas ranging from a pomodoro tracker, a reminder feature, categorizing saved messages, etc. We came up with initial questions such as what operations do we need, what data structures are we using, what algorithms can we make use of if any, or what is our pseudocode?

Whether there is a meeting or not, our project (dnotes) simplifies the process of producing notes for conversations in Slack by creating, organizing, and sharing via Google Docs. dnotes is designed to be used by anyone who uses Slack. It simplifies the process of creating notes at the click of a few buttons. We’ve built our home page to display upcoming meetings with the option to join the meeting. 

We also display past meetings for the user with the option to view the notes that were created specific to that meeting. This feature would redirect the user at a click of a button to the document as opposed to the traditional way of things where the steps would akin to first login onto Google, sift through the many documents, open and close the many Google Docs before maybe finding the one needed. This is an example of how our app simplifies a process and makes it easy to use. The home page also has buttons towards the top, “create meeting” and “create note”. The “create meeting” button opens a modal view with basic information such as the conversation to post the meeting notes in, the meeting information (title of document/meeting, time, date), and the option of specifying a sub-folder. 

 The “create note” button has a similar modal view with the exception of meeting information, this feature’s intended use is for wanting to create a document to jot down ideas to share in a Slack conversation without requiring the need for a meeting. The “create meeting” button has the feature of then sending a message one hour before the meeting time in the designated Slack conversation. The “create note” button simply shares the document with the specified information to the chosen Slack conversation. Within a Slack conversation in which a document was shared, a message from the dnotes Slack bot gives information regarding the document and a button that redirects the user to those specified notes. If it’s a meeting note then a checkbox with if the meeting is complete or not, allows the user to check the box to indicate the meeting is now complete which will change the editing feature of the document to viewing. This feature was thought of as a way to protect the integrity of the content of the meeting notes.

Create notes for a meeting to be shared in a Slack conversation

Create notes to be shared in a Slack conversation (dnotes is not only for meeting notes)

View upcoming meetings with the option to join meetings

View past meetings with the option to view the meeting’s notes

Send out a message for a meeting with a redirecting button to the meeting notes an hour before in the Slack conversation

Choose to check a box that indicates a meeting is finished which changes the notes settings from editable to viewable.

To get things started we decided to first make trial Slack apps by following the Slack API. Following some Slack app tutorials, we agreed on using VS code as the IDE. For the development language we decided on JavaScript based on both of us having the same level of knowledge. We decided to use the Bolt framework and found using ngrok to be better for our use for dealing with the client side of things. We each individually made our own apps to gain familiarity with the tools and extent of things we could accomplish. After doing some research by consulting with frequent users of Slack such as friends and coworkers, we gathered feedback of wanting a way to keep notes from meetings. That gave us our idea of integrating Google drive/docs with our Slack app to create notes to distribute to conversations in Slack. Our idea builds a bridge between the two applications and wraps it in a user friendly interface. We called the Google API in order to create folders and files in the google drive. We added custom permissions based on the progress of the meeting and the channel participants. We put Google Doc's created in a channel in a similarly named folder in the Google Drive which is all encompassed by a workspace folder.

All the challenges we faced came with a learning factor. Some of the challenges that came from working collaboratively were recognizing differences of opinions on decisions, working to find a consistent time to meet weekly, balancing our project with our school/work schedules, etc. Challenges such as what should be the behavior if a user is removed or leaves a channel then they shouldn’t have access to the Google Docs anymore for security reasons, or if the individual who created the Google Docs leaves then what happens to the docs they created, or how should we handle when individuals who leave and whether they still would have access to the documents? Other challenges we faced were centered around getting through Google drive permissions to be able to pull the user’s Google login information. We also faced user interface issues such as not being able to implement “field required” for a certain block and using the Block Kit to get the desired layout was sometimes difficult because there were some things we wanted to display in a certain manner but were not able to due to the limitations of the Block Kit. Some of these problems may have had easy fixes but it definitely was a challenge to navigate through and we learned a lot.

The successful integration of the Google APIs and the Slack APIs including authorization

Creating Google folders for each channel and being accurate with the names

Organizing documents into the right folders

Custom permission for each participant in the channel and being able to adjust them by a checkbox

This journey taught us a lot about using/integrating different APIs and making it work for our ideas. We learned how to use JavaScript, a language the both of us had little exposure with. We learned how to use Block Kit to build user interfaces. We learned how to distribute tasks between two individuals and work collaboratively to meet our end goal. We both were living states apart, so we learned how to schedule times to meet. We learned how to use ngrok and how it works. We learned how to get a Slack app running and how to use existing tutorials from Slack to develop our own Slack app. We learned how to get more comfortable with command line commands. We learned about how to research our targeted audience and how to develop an idea taking into consideration the many factors that came along and being able to prioritize those factors in our ideas based off of our audience.

We would love to fully deploy the app. We would like to add more features like recurring notes and being able to view old meetings. We would love to organize our code better by utilizing databases and other JavaScript features. We would love to update the UI as well.

dNotes: My Entry in a Slack Hackathon

dNotes

Created a Slack app that integrates Google Docs to bring shared meeting notes into Slack, culminating in being named a finalist of the Slack hackathon.