Why carry a planner with you when it already exists on the device you carry? With our virtual planner, teachers and students can put their assignments and TO DO lists online to keep them organized.
The inspiration sparked after reviewing the prompts and realizing a virtual planner would motivate students and teachers to complete tasks daily. As students ourselves, we wanted to improve our soft skills of time management and wanted to do so in a way that would be different from the usual booklet planner. We agreed on a website that would let users enter their tasks on a weekly calendar with options on the layout of the planner.
Initially we wanted to have a planner where the user got to customize the tasks they wanted included like goals and for them to be able to differentiate school tasks from personal tasks with color and with inspirational quotes that would be automatically updated everyday. What we were able to create was a login and register page for users when they first join the website. After login it takes the user to their task they have where it also displays when they are. It also includes the opportunity to mark tasks as finished.
Initially, with the implementation of Canva, we built a mood-board for our project and then designed a wireframe structure of what it should look like. We them wrote the code with tools such as Visual Code Studio and GitHub that allowed us to work on different parts of the code at the same time. With the coding languages of HTML, CSS and JavaScript, we were able to design and code the detailed parts of the program.
As beginner coders and first time taking part in a hackathon, we had a few challenges. Some we faced included combining all of our code with frontend and backend into one harmonious program that would run. Additionally, we ran into issues with combining our logo into the design of the program as most of us are beginners and do not have much HTML/CSS experience. However, after a lot of discussion and trial and error, we were able to figure out that in order for the logo to work, it had to be in the public folder and referenced appropriately in the HTML file.
We all celebrated a lot of accomplishments as well as we were able to make a feasible program that runs between different pages seamlessly. With the aid of tutorials online and our teammates, we were also able to add the database structure to the program that allows the user to login with their own username and password, and if incorrect, the program will display an error message, thus keeping the individual's information private. Additionally, the user could also logout of the program too.
A great lesson learned was how to plan out a project effectively from idea to end product. This included discussing a project game-plan, a moodboard, fonts and colors for the design and discussions on the database would look to implement it all. We also learned more about UX/UI design and how to effectively implement aspects in a website that would make the user experience worth it with a great color scheme, easy to follow instructions and a great menu. Being able to learn how to implement the right database and classes was a great learning experience too.
If we were to expand this project, our focus is to add important details such as allowing the user to input more of their tasks that would be saved to their profile. Also, Twilio components would allow for email notifications , a calendar that individuals can choose dates they wish to add specific tasks to and a color key that would group tasks in order of priority from urgent to least urgent. Adding components with users being able to choose between the type of view they wish to have from a weekly view of tasks to monthly views of tasks. This would allow our project to gain a wider audience and be more accessible for others.
Log in or sign up for Devpost to join the conversation.