Necessary Library/Modules
Make sure the following npm library installations are made in order to run the file:
- npm install firebase
- npm install date-fns
- npm i react-router-dom
Inspiration
Our inspiration for this project came from our own personal struggles with staying productive and focused during online learning. We noticed that many of our peers were experiencing the same struggles, and we wanted to create a tool that could help us and others stay on top of our tasks and responsibilities.
What it does
Our project is a web application that helps users keep track of their daily tasks and goals. It features a real-time database for authentication and task storage, allowing users to access their to-do lists from any device. The interface is designed to be simple and easy to use, with recorded task completion dates and listing system.
How we built it
We built our application using React.js, with Firebase as our real-time database. We also used HTML and CSS for styling and design. We started by sketching out our the necessary functions on the board, creating user stories, and the languages required. From there, we began research the very new front-end coding languages that we were no accustomed to by looking up tutorials and coding documentation whilst thoroughly testing the functionality of our app.
Challenges we ran into
During DeerHacks, we faced a few challenges while working on the To-Do List React Website w/ Realtime Database Authentication. Firstly, majority of the group were not familiar with React.js and Firebase, which made it a bit difficult for us to integrate the real-time database authentication feature into our web application. We had to spend most of the time learning the basics of these languages and platforms. We had trouble with styling some of the task list of the website and spent a considerable amount of time adjusting the CSS to get the desired result. Additionally, we faced issues with the database connectivity, which took us some time to debug and resolve. But we kept our cool and persevered, testing and tweaking our code until we were satisfied with the final product. Overall, the challenges we faced during DeerHacks taught us to work collaboratively, ask for help when needed, and to be persistent in the face of coding obstacles.
Accomplishments that we're proud of
We're proud of being able to create a functional and visually appealing application within the time constraints of the hackathon. We're also proud of being able to overcome the challenges we faced with Firebase and authentication.
What we learned
Through this project, we learned more about React.js and Firebase, as well as how to work effectively as a team. We also learned the importance of planning and organization in order to create a successful project within a limited time frame.
What's next for To-Do List React Website w/ Realtime Database Authentication
In the future, we plan on adding more features to our app, such as the ability to set reminders and notifications for upcoming tasks. We also want to explore the possibility of integrating with other productivity tools and platforms, such as Google Calendar and Trello. Overall, we hope to continue improving and refining our application to better serve the needs of our users.