# Project export: Custom Task Manager This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small. ## Project metadata - Hackathon: Cal Hacks 10.0 - Tagline: It's a hassle to have to move between your calendar and filling out availability! We hope to combine the two: you can put in all your tasks, and look up your friends' availabilities! - Devpost: https://devpost.com/software/custom-task-manager - GitHub: https://github.com/daisyw2003/calhacks2023 - Demo: https://tasktogether.reflex.run/ - Team: 1 GitHub contributor(s) — Daisy Wang (14 commits) ## Devpost submission (written by the team) ### Inspiration Our project draws inspiration from the real-world challenges faced by college students when working on group projects, including the frustration of using multiple availability tools. As college students ourselves, we've personally experienced the struggle of coordinating project times and managing individual tasks. Group projects often entail the need for effective collaboration, tight deadlines, and the necessity to harmonize diverse schedules. The motivation behind our project is to address these common issues and make life easier for college students, who are frequently juggling multiple classes, part-time jobs, extracurricular activities, and personal commitments. Our vision was to provide a solution that simplifies the task management and schedule coordination process for students and groups, while also eliminating the inconvenience of having to use separate availability tools. This endeavor aims to reduce the stress associated with group project planning, improve time management, and foster seamless collaboration. We understand the value of creating a platform where college students can effortlessly organize tasks, set deadlines, and coordinate their schedules, all in one place. TLDR: We are lazy people and instead of opening up Google Calendar, to-do list, when-to-meet, google map; we try to make a web app to schedule group projects. <3 Even though we know half of the team is going to be “sick”, “sorry busy, didn’t see the text”, and LITERALLY MIA (missing in action). ### What it does Our custom task manager, developed using Reflex, is a web application that simplifies task management and coordination for college students and groups. While we're still in the development phase, here are the key features that are currently available: Task Management: Users can create and organize their tasks, making it easier to keep track of their responsibilities. Task Management: Users can create and organize their tasks, making it easier to keep track of their responsibilities. Single-User Task Entry and Lookup: The application allows single users to add tasks and look up their tasks using their name and email. This is a useful feature for individual task organization. Single-User Task Entry and Lookup: The application allows single users to add tasks and look up their tasks using their name and email. This is a useful feature for individual task organization. Schedule for Multiple People: Users can view the schedules for a list of multiple people, making it convenient for group project coordination and event planning. Schedule for Multiple People: Users can view the schedules for a list of multiple people, making it convenient for group project coordination and event planning. User-Friendly Interface: We've ensured that the platform has an intuitive and user-friendly interface to make task management straightforward. While we have not yet implemented all the features, we're actively working on enhancing the platform. Our goal is to provide a simple and effective task management solution for college students, including the ability to view schedules for multiple people, and we're excited about the potential for further development and improvements in the near future. User-Friendly Interface: We've ensured that the platform has an intuitive and user-friendly interface to make task management straightforward. While we have not yet implemented all the features, we're actively working on enhancing the platform. Our goal is to provide a simple and effective task management solution for college students, including the ability to view schedules for multiple people, and we're excited about the potential for further development and improvements in the near future. //TLDR: to-do-list and also letting u track down ur friend/groupmate’s to-do-list to figure out why they are ghosting you :sob: ### How we built it We built our custom task manager using Reflex, an open-source, full-stack Python framework that revolutionizes the way we create and deploy web applications. Reflex provided us with the tools and capabilities to build and launch our web app in a matter of minutes. "Custom Task Manager" is our first hackathon project, reflecting our enthusiasm for innovation. We selected the Reflex framework to expedite development. It offered a comprehensive foundation for our project, empowering us to create a functional solution and an intuitive user interface. On the back end, Reflex facilitated the implementation of task management, schedule coordination, and user authentication. While "Custom Task Manager" marks our debut in the world of hackathons, it signifies the beginning of our journey into tech innovation. We're eager to continue our exploration of hackathons and the further development of this project, with the goal of making a positive impact on college students' lives. //TLDR: web-app with reflex… THANK GOD FOR REFLEX or we will have no idea where to start! :cry: :on-the-ground-bowing: ### Challenges we ran into As this is our first hackathon, we encountered some tricky challenges while creating "Custom Task Manager." Learning to code, especially on the front and back ends, felt like picking up a new language quickly. The hackathon was our first, with tight deadlines and high hopes, making it both exciting and a bit overwhelming. On top of this, all of our team had little experience with web development, which meant we had to learn JavaScript, HTML, and CSS from scratch. It was like trying to learn a new musical instrument while performing live on stage. Despite these difficulties, we embraced the learning process, asked for help when needed, and celebrated even the small wins. These moments made our first hackathon experience a lot more memorable. //Oh… and most notably the WiFi connections XD. ### Accomplishments we're proud of Our journey in developing "Custom Task Manager" has resulted in notable achievements. We successfully created a functional prototype during our first hackathon, establishing a solid foundation for the app. Key features include single-user task entry and lookup, and an intuitive user interface. This process has been a valuable learning experience, improving our web development and project management skills. These accomplishments inspire us to continue refining "Custom Task Manager," aiming to simplify task management and schedule coordination for college students and groups, making their lives easier. //TLDR: IT ACTUALLY WORKED!!!! AND WENT PASS THE BRAINSTORM STAGE! SHEESH!!! ### What we learned Our journey with "Custom Task Manager" has been profoundly educational. One standout lesson from this experience is our newfound proficiency with the Reflex framework, which has streamlined our web application development process. As newcomers to the hackathon scene, we've significantly enhanced our front-end skills, delving deeper into the intricacies of HTML, CSS, and JavaScript. Simultaneously, our exploration into back-end development and broader web development principles has endowed us with a versatile skill set. The integration of user authentication further underscores the importance of data security in web applications. In summary, our journey with "Custom Task Manager" has not only expanded our technical knowledge but has also enriched our practical experience in both front-end and back-end development. //TLDR: Shout-out #2 to Reflex, or we will prob stuck in the brainstorm stage!!! ### What's next Visual Calendar Blocks: We're working on a visual representation of calendar blocks, making schedules more intuitive and customizable. Visual Calendar Blocks: We're working on a visual representation of calendar blocks, making schedules more intuitive and customizable. Free Time Feature: We're implementing a feature that finds shared free time between users, simplifying group scheduling. Free Time Feature: We're implementing a feature that finds shared free time between users, simplifying group scheduling. Geographical Recommendations: In the future, we aim to recommend meetup locations based on users' previous locations or their 'Home' setting. Geographical Recommendations: In the future, we aim to recommend meetup locations based on users' previous locations or their 'Home' setting. These enhancements align with our goal of user-friendliness and feature-rich functionality. We look forward to improving task management and schedule coordination for our users. //TLDR: making it more smancy-fancy :sparkle-emoji: ## README (from the GitHub repository) # Welcome to Our Custom Task Manager While this is not a complete project is, please check out User Database to see how our tasks are managed. ## About Our Project Oftentimes, it's a hassle to have to move between your calendar of events and filling out your availabilities in something like a When2Meet or a LettuceMeet. With our task manager, we're hoping to be able to combine the two into one webapp where you can put in all your tasks and time, and easily be able to look up your friends' availabilities! ### What We Have So Far So far we have our database where you can add tasks and look up yours or someone else's tasks using their name and email. This is in Single User Entry and Lookup. Since as of now, it's for personal use, there are no passwords or such, but one could be implement if needed. You can also look up multiple people's tasks and times, however, you cannot add any one the Multi-User Lookup page. ### What's to be Done 1. We hope to include a visual where you can see the calendar blocks lined up side by side as well as make it color-customizable. This way it can be more visual and easier to understand. We can do this once I figure out how to wrap the React Calendar properly. 2. We hope to include a feature that automatically produces all of the "free time" between two ore more people, aka when are both people available according to the task manager. a. Along with this we hope that one day we can incldue a geographical feature to recommend locations for these free blocks of time by either finding a close location based on the users' last location (so where they listed their location in their task before) or their 'Home' location. ## Detected evidence (automated analysis) Indexed codebase: 37 recognized source files, 115 KB. - CSS (language) — detected in the code - JavaScript (language) — detected in the code - Next.js (technology) — detected in the code - Python (language) — detected in the code - React (technology) — detected in the code - Tailwind CSS (technology) — detected in the code ## Codebase structure (from repository index) ### Files (58 of 58) ``` .DS_Store .gitignore .Rproj.user/9E79955E/pcs/files-pane.pper .Rproj.user/9E79955E/pcs/source-pane.pper .Rproj.user/9E79955E/pcs/windowlayoutstate.pper .Rproj.user/9E79955E/pcs/workbench-pane.pper .Rproj.user/9E79955E/rmd-outputs .Rproj.user/9E79955E/saved_source_markers .Rproj.user/shared/notebooks/patch-chunk-names .web/.gitignore .web/bun.lockb .web/components/reflex/chakra_color_mode_provider.js .web/components/reflex/radix_themes_color_mode_provider.js .web/env.json .web/jsconfig.json .web/next-sitemap.config.js .web/next.config.js .web/package.json .web/pages/_app.js .web/pages/_document.js .web/pages/404.js .web/pages/dashboard.js .web/pages/index.js .web/pages/multi_user_lookup.js .web/pages/single_user_entry_lookup.js .web/postcss.config.js .web/reflex.json .web/styles/code/prism.js .web/styles/styles.css .web/styles/tailwind.css .web/tailwind.config.js .web/utils/client_side_routing.js .web/utils/components.js .web/utils/context.js .web/utils/helpers/dataeditor.js .web/utils/state.js .web/utils/theme.js calhacks2023/__init__.py calhacks2023/.DS_Store calhacks2023/calhacks2023.py calhacks2023/components/__init__.py calhacks2023/components/.DS_Store calhacks2023/components/sidebar.py calhacks2023/pages/__init__.py calhacks2023/pages/.DS_Store calhacks2023/pages/dashboard.py calhacks2023/pages/data.csv calhacks2023/pages/index.py calhacks2023/pages/multi_user_lookup.py calhacks2023/pages/single_user_entry_lookup.py calhacks2023/state.py calhacks2023/styles.py calhacks2023/templates/__init__.py calhacks2023/templates/template.py package.json README.md requirements.txt rxconfig.py ``` ### Dependencies - .web/package.json: @chakra-ui/icons@^2.0.19, @chakra-ui/react@^2.6.1, @chakra-ui/system@^2.5.7, @emotion/react@^11.11.0, @emotion/styled@^11.11.0, autoprefixer@10.4.14, axios@1.4.0, focus-visible@5.2.0, framer-motion@^10.16.4, gridjs@^6.0.6, gridjs-react@^6.0.1, json5@2.2.3, next@13.5.4, next-sitemap@4.1.8, next-themes@0.2.0, postcss@8.4.24, react@18.2.0, react-dom@18.2.0, react-markdown@^8.0.7, react-syntax-highlighter@^15.5.0, rehype-katex@^6.0.3, rehype-raw@^6.1.1, remark-gfm@^3.0.1, remark-math@^5.1.1, socket.io-client@4.6.1, tailwindcss@^3.3.2, universal-cookie@4.0.4 - package.json: @fullcalendar/daygrid@^6.1.9, @fullcalendar/react@^6.1.9, fullcalendar@^6.1.9 - requirements.txt: reflex@==0.3.1 ### Recent commits (newest first) - fix merge - merge - typo - last - IM SO TIRED - fixed where table wasn't getting read everytime - updated 'dashboard' - fixed multi-user-lookup - mmm i fixed the read me - ok so like the data table display works - temp - lets see - this errors rn - test - reflex - deleted the confusing r Proj - first commit ## Key source files (fetched from GitHub, selected and truncated for size) ### requirements.txt ``` reflex==0.3.1 ``` ### package.json ``` { "dependencies": { "@fullcalendar/daygrid": "^6.1.9", "@fullcalendar/react": "^6.1.9", "fullcalendar": "^6.1.9" } } ``` ### .web/package.json ``` { "name": "reflex", "scripts": { "dev": "next dev", "export": "next build && next export -o _static", "export-sitemap": "next build && next-sitemap && next export -o _static", "prod": "next start" }, "dependencies": { "@chakra-ui/icons": "^2.0.19", "@chakra-ui/react": "^2.6.1", "@chakra-ui/system": "^2.5.7", "@emotion/react": "^11.11.0", "@emotion/styled": "^11.11.0", "axios": "1.4.0", "focus-visible": "5.2.0", "framer-motion": "^10.16.4", "gridjs": "^6.0.6", "gridjs-react": "^6.0.1", "json5": "2.2.3", "next": "13.5.4", "next-sitemap": "4.1.8", "next-themes": "0.2.0", "react": "18.2.0", "react-dom": "18.2.0", "react-markdown": "^8.0.7", "react-syntax-highlighter": "^15.5.0", "rehype-katex": "^6.0.3", "rehype-raw": "^6.1.1", "remark-gfm": "^3.0.1", "remark-math": "^5.1.1", "socket.io-client": "4.6.1", "tailwindcss": "^3.3.2", "universal-cookie": "4.0.4" }, "devDependencies": { "autoprefixer": "10.4.14", "postcss": "8.4.24" } } ``` ### calhacks2023/pages/index.py ```python """The home page of the app.""" from calhacks2023 import styles from calhacks2023.templates import template import reflex as rx @template(route="/", title="Home", image="/github.svg") def index() -> rx.Component: """The home page. Returns: The UI for the home page. """ with open("README.md", encoding="utf-8") as readme: content = readme.read() return rx.markdown(content, component_map=styles.markdown_style) ``` ### .web/pages/index.js ```javascript import { Fragment, useContext, useEffect, useRef, useState } from "react" import { useRouter } from "next/router" import { Event, getAllLocalStorageItems, getRefValue, getRefValues, isTrue, preventDefault, refs, spreadArraysOrObjects, uploadFiles, useEventLoop } from "/utils/state" import { ColorModeContext, EventLoopContext, initialEvents, StateContext } from "/utils/context.js" import "focus-visible/dist/focus-visible" import "katex/dist/katex.min.css" import { Box, Center, Code, Heading, HStack, Image, Link, ListItem, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, OrderedList, Spacer, Text, UnorderedList, VStack } from "@chakra-ui/react" import { getEventURL } from "/utils/state.js" import NextLink from "next/link" import ReactMarkdown from "react-markdown" import remarkMath from "remark-math" import remarkGfm from "remark-gfm" import rehypeKatex from "rehype-katex" import rehypeRaw from "rehype-raw" import { Prism } from "react-syntax-highlighter" import { light } from "/styles/code/prism" import { HamburgerIcon } from "@chakra-ui/icons" import NextHead from "next/head" export default function Component() { const state = useContext(StateContext) const router = useRouter() const [ colorMode, toggleColorMode ] = useContext(ColorModeContext) const focusRef = useRef(); // Main event loop. const [addEvents, connectError] = useContext(EventLoopContext) // Set focus to the specified element. useEffect(() => { if (focusRef.current) { focusRef.current.focus(); } }) // Route after the initial page hydration. useEffect(() => { const change_complete = () => addEvents(initialEvents()) router.events.on('routeChangeComplete', change_complete) return () => { router.events.off('routeChangeComplete', change_complete) } }, [router]) return ( {isTrue(connectError !== null) ? ( {`Connection Error`} {`Cannot connect to server: `} {(connectError !== null) ? connectError.message : ''} {`. Check if server is reachable at `} {getEventURL().href} ) : ( )}
{`Home`} {`Dashboard`} {`Multi-User Lookup`} {`Single User Entry and Lookup`}