Task Tango - Advanced MERN Todo App

Features • Technologies • Getting Started • Contact

Task Tango is an intuitive task management application built using the MERN stack (MongoDB, Express.js, React, Node.js) with TypeScript.

🌟 Features

• User Authentication: Secure login and registration with JWT tokens and password hashing
• Task Management: Create, edit, delete, and mark tasks as complete with real-time updates
• Time Tracking: Automatic timestamp tracking for task creation, updates and completion
• Responsive Design: Full mobile and tablet compatibility with modern UI components
• Dark/Light Mode: System-synced theme switching for better user experience
• Form Validation: Client and server-side validation using Zod schemas
• Data Caching: Optimized data fetching with TanStack Query
• Type Safety: Full TypeScript support across frontend and backend
• API Security: CORS protection and request compression
• Modern Stack: Built with React, Express, and MongoDB
• Clean Architecture: Well-structured codebase with consistent code formatting
• Developer Experience: Hot reloading and fast build times with Vite
• Accessibility: ARIA compliant components using Radix UI
• Error Handling: Toast notifications for user feedback

🛠️ Technologies

Frontend

• React 18 with TypeScript
• TanStack Router for routing
• TanStack Query for state management
• Tailwind CSS with shadcn/ui for styling
• Radix UI for accessible components
• Lucide React for icons
• Axios for HTTP requests
• React Hook Form with Zod for form validation
• React Hot Toast for notifications
• Vite for build tooling

Backend

• Node.js with Express
• TypeScript for type safety
• MongoDB with Mongoose
• JWT for authentication
• bcrypt for password hashing
• Compression for response optimization
• CORS for cross-origin requests
• Cookie Parser for cookie handling
• dotenv for environment variables
• Zod for schema validation

Development

• ESLint for linting
• Prettier for code formatting
• TypeScript ESLint for TS-specific linting

🚀 Getting Started

1. Clone the repository

git clone git@github.com:Kris1027/mern-advanced-todo-app.git
cd mern-advanced-todo-app

2. Install dependencies

# Install all dependencies (both frontend and backend)
npm install

3. Environment Setup

• Create .env file in the server folder

MONGODB_URI=your_mongodb_uri
JWT_SECRET=your_secret_key
PORT=3000
NODE_ENV=production

4. Available Scripts

# Development
npm run dev         # Run both frontend and backend in development mode
npm run client     # Run only frontend in development mode
npm run server     # Run only backend in development mode

# Build
npm run build      # Build both frontend and backend
npm run build-client  # Build only frontend
npm run build-server  # Build only backend

# Production
npm run start      # Run both frontend and backend in production mode
npm run start-client  # Run only frontend in production mode
npm run start-server  # Run only backend in production mode

👏 Acknowledgments

• shadcn/ui for UI components
• TanStack for awesome React tools
• React for frontend library
• Tailwind for simple styling
• Express for fast backend
• MongoDB for modern database
• TypeScript for safer code
• Zod for schema validation
• React-Hook-FormReact Hook Form for better forms
• Lucide for beautiful icons
• Vitefor fast development
• ESLint for clean code
• Prettier for consistent formatting
• JWTJWT for secure auth

📧 Contact

• Krzysztof Obarzanek - LinkedIn
• About me - Portfolio
• Business - Web-Services