✅TodoPro

See live demo

TodoPro is an advanced todo application built with React.js, Node.js, Express, and MongoDB, utilizing TypeScript for development. It provides a dynamic user interface for efficient todo tracking, secure authentication with Google, and customizable theme options with dual theme functionality. Features include creating, deleting, and editing todo tasks, as well as updating todo progress. With sorting by priority and timestamps, TodoPro offers enhanced organization and management of todos.

Key Features:

• Dynamic UI: Developed with React.js and TypeScript for a dynamic user experience.
• Secure Authentication: Utilizes Google authentication for secure user access.
• Dual Theme Functionality: Offers both dark and light themes for customizable UI options, powered by Tailwind CSS.
• Todo Management: Allows users to create, delete, and edit todo tasks.
• Progress Update: Integrated Redux for state management, enabling todo progress updates.
• Sorting Options: Provides sorting by priority and creation timestamps for better todo organization.

UI demo

Run this locally in your system:

1. Clone the repository:

   git clone https://github.com/SHUHAIB-T/TodoPro-MERN.git

2. Navigate to the project directory:

   cd TodoPro

3. Install dependencies for both frontend and backend:

   cd client
   npm install
   cd ..
   cd server
   npm install

4. Set up environment variables:
   • Create a .env file in the server directory and add necessary environment variables.
   • Example:

     ## server-env
     PORT=5000
     ENVIRONMENT=development
     FRONTENT_URL=http://localhost:4000
     FRONTENT_URL_DEPLOYED=<deployed-url>
     MONGO_URI=<mongo-URI>
     JWT_SECRET=<JWT-secret-key>
     
     ## client-env
     VITE_CLIENT_Id=<your-google-client-id>
     VITE_BASE_URL=http://localhost:5000

5. Start the development server:

   cd client
   npm run dev
   cd ..
   cd server
   npm start

6. Access TodoPro in your browser at http://localhost:4000.

Technologies Used:

• React.js
• Node.js
• Express
• MongoDB
• TypeScript
• Redux
• Tailwind CSS

Contributing:

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