afsify / boxlist-scheduler

A simple and intuitive Todo application built with React. Manage your tasks effortlessly, add new ones, mark them as complete, and keep track of your productivity.

Boxlist Task Scheduler

Welcome to the Boxlist Task Scheduler, your go-to solution for efficient task management! This intuitive to-do list application empowers users to seamlessly organize their daily activities with a user-friendly interface. Whether you're a meticulous planner or a spontaneous taskmaster, the Boxlist Task Scheduler has you covered.

Features

• User Authentication: Securely log in and manage your tasks with confidence using our robust user authentication system.
• Dynamic Task Creation: Easily add tasks with or without specific time constraints, tailoring your schedule to your unique preferences.
• Database Storage: Save your task lists effortlessly to our MongoDB database, ensuring your important plans are accessible and secure.
• Date and Name Tagging: Categorize your tasks by specifying a date and giving each list a meaningful name for quick and convenient retrieval.
• Effortless Editing: Update, modify, or enhance your tasks at any stage, granting you the flexibility to adapt to changing priorities.
• Intuitive User Interface: Navigate through tasks seamlessly, with a user interface designed for maximum simplicity and convenience.
• Edit, Add, Delete, Read: Perform essential operations with ease, enabling you to manage your tasks effortlessly at any given moment.

Tools and Technologies

Client-Side Libraries

• React.js: A JavaScript library for building user interfaces.
• Redux.js: A predictable state container for JavaScript apps.
• TailwindCSS: A utility-first CSS framework for rapidly building custom designs.
• Ant Design: A design system for enterprise-level products.

HTTP Client:

• Axios: A promise-based HTTP client for making requests to APIs. Axios is used to interact with the server-side API.

Server-Side Technologies

• Node.js: A JavaScript runtime built on Chrome's V8 JavaScript engine.
• Express.js: A minimal and flexible Node.js web application framework.
• MongoDB (Mongoose): A NoSQL database used to store and retrieve data.
• JWT Token: JSON Web Token for user authentication.

Access the live project

The live project can be accessed at https://boxlist.vercel.app

Getting Started

1. Clone the repository:

   git clone https://github.com/mhdafs/boxlist-scheduler.git

2. Set up environment variables:

   Create a .env file in the root directory or rename the current .env.sample file and configure necessary variables for client and server sides.

   Client ENV

   VITE_GOOGLE_ID = google-auth-id
   VITE_USER_URL = user-backend-url

   Server ENV

   MONGO_URL =  mongo-atlas-url
   JWT_SECRET = jwt-secret-code
   GMAIL_USER = smtp-gmail-email
   GMAIL_PASS = smtp-gmail-password

3. Navigate to the client directory:

   Open a terminal in Visual Studio Code and split it into two terminals. In the first terminal, navigate to the client directory:

   cd client

4. Install client side dependencies:

   npm install

5. Start the client-side application:

   npm start

6. Start the client-side application:

   npm start

   The client-side application will be running on http://localhost:3000

7. Navigate to the server directory:

   In the second terminal, navigate to the server directory:

   cd server

8. Install server side dependencies:

   npm install

9. Start the server:

   npm start

   The server will be running on http://localhost:5000

API Documentation

Detailed API documentation can be found in the Boxlist_API_Documentation.docx

Database Design

The database design can be viewed in Boxlist_DB_Design.pdf

Figma Prototype Design

The Figma prototype design can be viewed Boxlist_UI

Module List

The list of modules can be found in the Boxlist_Modules.docx

Contributing

Contributions are welcome! Feel free to open issues and pull requests.