bookmarked

What it does

The Bookmarked website is a productivity tool designed to streamline the way users manage their meetings, tasks, and projects. It combines AI-powered automation with a user-friendly interface to provide an all-in-one office management solution. Here's what it offers:

Core Features:

1. Simplified Meeting Scheduling:

• Users can schedule meetings by selecting attendees, setting durations, and choosing from automatically suggested time slots based on everyone’s availability.

• Meetings are synced with third-party calendars like Google Calendar for seamless integration.

1. AI-Powered Task Management:

• After meetings, the built-in AI analyzes notes and identifies follow-up actions, automatically converting them into structured tasks.

• Users can add tasks manually, assign them to team members, set deadlines, and categorize them under specific projects.

1. Centralized Dashboard:

• The website offers a personalized dashboard that provides a daily overview of meetings, tasks, and notifications.

• It helps users stay organized and prioritize their responsibilities.

1. Project Organization:

• Users can view and manage all tasks, meetings, and files related to specific projects under a single tab.

• This feature reduces fragmentation and ensures everything related to a project is easily accessible.

1. Notifications and Real-Time Updates:

• The platform provides real-time notifications to keep users informed about task deadlines, meeting reminders, and updates from collaborators.

1. Third-Party Integrations:

• Google Calendar API integration allows users to sync schedules and manage events across platforms.

• Potential to integrate with other tools like Slack or Microsoft Teams in the future.

1. Secure and Accessible:

• With Firebase Authentication, users can securely log in and access their data from any device, ensuring productivity on the go.

Value Proposition:

• Bookmarked eliminates the need to juggle multiple tools by combining task management, meeting scheduling, and project organization into a single platform.

• By automating repetitive tasks and providing real-time updates, it empowers users to focus on their work instead of managing logistics.

How we built it

Frontend Development

• Framework: Built the user interface with React.js, enabling a dynamic and responsive experience.

• Design System: Utilized Material-UI to ensure a modern, cohesive, and accessible design across all components.

• Key Features:

  • Created reusable React components for tasks, meetings, and project views.
  • Enabled real-time updates on the dashboard for seamless user interaction.

Design Process

• Figma:

  • Designed wireframes and high-fidelity prototypes using Figma.
  • Collaborated as a team to refine layouts and ensure a user-centered design.
  • Focused on creating an intuitive user flow with minimal friction for key features like adding tasks and scheduling meetings.

Backend and Database

• Firebase:

  • Firestore Database: Used Firebase Firestore, a real-time NoSQL database, to store and sync data efficiently across users.
  • Authentication: Integrated Firebase Authentication to handle secure user logins, including email/password credentials.

• Third-Party API Integration:

  • Connected with the Google Calendar API to synchronize meeting schedules and provide real-time updates.

AI Features [future expansion]

• Natural Language Processing (NLP):

  • Leveraged AI to analyze meeting notes and extract follow-up actions, converting them into structured tasks.
  • Simplified task prioritization based on deadlines and context.

Collaboration and Tools

• Version Control:

  • Used Git and GitHub for efficient code collaboration and version management.

• Development Environment:

  • Worked in Visual Studio Code, taking advantage of its debugging tools and extensions for React and Firebase.

Challenges and Solutions

• Real-Time Data Syncing:

  • Achieving real-time updates for tasks and meetings was challenging but successfully implemented using Firestore’s capabilities.

• Third-Party Integration:

  • Optimized the integration of the Google Calendar API, overcoming authentication complexities and ensuring smooth syncing.

Development Workflow

1. Planning:

• Identified user needs and features through brainstorming sessions.

1. Design:

• Created mockups and prototypes in Figma, iterating based on team feedback.

1. Implementation:

• Divided responsibilities for frontend, database, and third-party API integrations.

1. Testing and Debugging:

• Conducted rigorous testing to ensure functionality, usability, and performance.

Challenges we ran into

One of the biggest challenges that we faced is definitely the time constraint put in place due to the nature of this hackathon. I think our group started out being extremely ambitious as we wanted to do many many things with the application. However, with only 5 days to code out the website, and with most of us being relatively new to software engineering, too many problems and bugs found their way to us and we had to cut down on the scope of our project.

This hackathon has also been a huge technical challenge for us. Many of are still relatively new to software engineering and have limited familiarity with certain tools and frameworks that we are using for our website. Moreover, taking this hackathon as a learning experience, we took this as an opportunity to learn and try to code for features that we have not done before. As a result, the learning curve was still relatively steep and we encountered many bugs and errors along the way. 

With multiple members working on the code at the same time, our team also faced some difficulties integrating different features and branches together. 

Accomplishments that we're proud of

One of our most significant achievements was taking an idea and transforming it into a tangible, working platform. Despite time constraints and technical hurdles, we successfully created a website that provides the core functionalities we envisioned. This accomplishment demonstrates our ability to turn a concept into reality through dedication and teamwork.

We tackled various technical obstacles throughout the development process, such as integrating APIs, optimizing database structures, or ensuring seamless interactions between frontend and backend systems. These challenges pushed us to think critically and learn new skills, and solving them not only improved our technical expertise but also reinforced our problem-solving abilities.

Our team’s ability to collaborate effectively was another highlight of this journey. From brainstorming ideas to dividing tasks and integrating our work, we demonstrated excellent teamwork and communication. Each team member contributed their unique strengths, and we worked together to overcome differences and achieve a common goal.

Throughout the project, we embraced a growth mindset, constantly learning from challenges and refining our approach. Whether it was mastering new technologies, improving our coding practices, or gaining insights into project management, this experience has been a tremendous opportunity for personal and professional growth.

As the saying goes, reach for stars and land on the moon. We are all really proud of ourselves for what we have created over this short span of 5 days, for never giving up, and for having picked up and learnt something along the way. 

What we learned

This project provided us with invaluable learning experiences across technical, collaborative, and personal growth areas. On the technical front, we deepened our understanding of integrating multiple technologies and tools to create a cohesive solution. For instance, working with [insert specific technologies, if any] challenged us to learn new frameworks or libraries, which not only enhanced our technical skills but also expanded our ability to troubleshoot and debug complex issues efficiently. Additionally, we refined our skills in designing and implementing scalable systems, ensuring the solution was both functional and robust.

From a project management perspective, this endeavor reinforced the importance of clear planning and effective time management. With a defined timeline and limited resources, we had to prioritize tasks and make strategic decisions about which features to implement. This process taught us how to break down a large project into smaller, manageable milestones and monitor progress effectively. We also learned how to adapt to unforeseen challenges, such as [mention specific challenges, like technical issues or tight deadlines], which required us to think creatively and remain flexible in our approach.

In terms of teamwork, this project emphasized the value of open communication and collaboration. Working with a diverse team allowed us to leverage each member's unique strengths and perspectives. We learned how to delegate responsibilities effectively and ensure everyone had a clear understanding of their role. Additionally, we developed stronger interpersonal skills by navigating differences in working styles and resolving any conflicts constructively. This experience underscored the importance of fostering a positive team dynamic to achieve a shared goal.

Finally, on a personal level, this project encouraged us to push beyond our comfort zones and embrace challenges as opportunities for growth. It strengthened our resilience and problem-solving abilities, as we often encountered situations that required quick thinking and innovative solutions. The knowledge and skills we gained during this process have prepared us to take on even more ambitious projects in the future, equipping us with the confidence to tackle complex problems with a methodical and collaborative mindset.

In summary, this project has been a valuable learning journey that not only improved our technical expertise but also honed our project management and teamwork skills. The lessons we have taken away from this experience will undoubtedly shape how we approach future projects and challenges, making us more effective and resourceful individuals.

What's next for bookmarked

The journey of developing Bookmarked has been both exciting and rewarding, but it is far from over. While we have successfully laid the foundation for our platform, there are numerous opportunities for growth and improvement that we are eager to explore. The next steps for Bookmarked revolve around enhancing functionality, improving user experience, and expanding the platform’s reach to fulfill the vision we initially set out to achieve.

One immediate priority is the integration of features that were initially planned but not implemented during the first phase of development. These features are critical to realizing our platform’s original goal of providing a seamless, engaging, and user-centric experience. Whether it’s advanced search functionalities, personalized recommendations, or interactive tools, we believe these enhancements will significantly enrich the value Bookmarked offers to its users. By revisiting and refining our feature backlog, we aim to strategically roll out updates that address user needs and set our platform apart.

Additionally, we plan to prioritize creating a stronger connection with our target audience. Although we didn’t conduct user feedback during the initial phase, gathering insights from actual users will now become a cornerstone of our strategy. Surveys, beta testing, and focus groups will allow us to understand how users interact with the platform and identify areas where improvements can be made. This will help us refine our features and prioritize updates that align with user preferences.

Finally, expanding Bookmarked’s reach is an exciting prospect for the future. We envision collaborations with educational institutions, libraries, or even content creators to make Bookmarked a trusted and widely-used resource. Marketing efforts will also play a critical role in this expansion, leveraging social media, blogs, and partnerships to drive engagement and attract new users. With a focus on creating meaningful connections and growing our community, we believe Bookmarked can achieve its full potential as a leading platform in its domain.

Built With

• figma
• firebase
• react