Inspiration

I want to build a to do list based on calendar to manage my time well, not rely on other time management app

What it does

This website has a form can save the task information and It can be presented visually on the calendar, also it can delete the last task on calendar too.

How we built it

The core functionality of the project is to add events, allowing users to add events for specific dates and times, including the event's title, description, start time, and end time. The recommended technology stack includes React + Redux for the front end, Node.js + Express for the back end, and MongoDB for the database. The data model design includes an Event model, consisting of fields such as title, description, start time, end time, and an optional user ID for association with users.

The implementation steps involve setting up the MongoDB database, creating Express routes to implement the API for adding events, creating a form interface for adding events, and sending POST requests to the backend API when the form is submitted. Test cases include normal event addition and input validation.

Future expansions may include implementing features such as event editing and deletion, displaying events in different views, and implementing a user system. This project establishes a basic framework for a calendar planning website that can be further expanded upon.

Challenges we ran into

Integration Complexity: Integrating different technologies like React, Redux, Node.js, Express, and MongoDB can be challenging due to their diverse nature and learning curves.

Data Management: Managing complex data flows and state management, especially when dealing with asynchronous operations and user interactions, posed challenges.

Error Handling: Handling errors gracefully across the frontend and backend, including validation errors, network errors, and server-side errors, required careful planning and implementation.

Accomplishments that we're proud of

I did the full stack project by myself!

What we learned

I learned various technologies such as React, Redux, Node.js, Express, and MongoDB, enhancing our understanding of frontend and backend development.

What's next for full stack calendar app

  1. Enhanced functions: Add editing, recurring events, reminders and sharing functions.
  2. Improved UI/UX: Improved design, added animations and optimized for different screen sizes.
  3. Authentication: Implement user authentication to ensure data security.
  4. Mobile Apps: Develop iOS and Android versions using React Native or Flutter.
  5. Third-party integration: Sync with Google, Outlook or Apple calendar.
Share this project:

Updates