Ensori - Daily Productivity Todo App

A beautiful, minimalist todo app with daily workflow system

🚀 Live Demo • ✨ Features • 📦 Installation • 🔍 SEO

---

🌟 Features

• Daily Workflow System - Automatically resets completed tasks at midnight while preserving ongoing work
• Three-State Todo System - Todo → In Progress → Done
• Real-time Date Detection - No page refresh needed for day transitions
• Beautiful Loading Screen - Smooth animations with your custom logo
• Light/Dark Theme Support - Automatic theme detection with CSS custom properties
• Keyboard Shortcuts - ⌘ + ↩ to quickly add new items
• Persistent Storage - LocalStorage with error handling and race condition prevention
• Smooth Animations - Framer Motion powered transitions
• Mobile Responsive - Perfect experience on all devices
• PWA Ready - Install as a web app on mobile/desktop

🛠️ Technology Stack

• Framework: Next.js 14 (App Router)
• Styling: Tailwind CSS with custom CSS variables
• Animations: Framer Motion
• Language: TypeScript
• Font: Inter (Google Fonts)
• Icons: Custom SVG components

📦 Installation

Prerequisites

• Node.js 18+
• npm or yarn

Getting Started

1. Clone the repository

   git clone https://github.com/morphine-cake/ensori.git
   cd ensori

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

4. Open your browser Navigate to http://localhost:3000

Build for Production

npm run build
npm run start

🔍 SEO Optimization

Complete SEO Implementation

This app includes comprehensive SEO optimization:

Meta Tags & Open Graph

• ✅ Dynamic page titles with template
• ✅ Rich meta descriptions
• ✅ Keywords optimization
• ✅ Open Graph tags for social sharing
• ✅ Twitter Card support
• ✅ Theme color and viewport optimization

Structured Data (JSON-LD)

• ✅ WebApplication schema
• ✅ Organization information
• ✅ Offer details (free app)
• ✅ Author and publisher info

Technical SEO

• ✅ robots.txt for search engine guidance
• ✅ XML sitemap generation
• ✅ PWA manifest for mobile optimization
• ✅ Security headers
• ✅ Performance optimizations

Content Strategy

• ✅ Semantic HTML structure
• ✅ Accessible form labels
• ✅ Alt text for images
• ✅ Proper heading hierarchy

SEO Checklist for Deployment

1. Update URLs in:

   • app/layout.tsx (metadataBase)
   • app/sitemap.ts (baseUrl)
   • public/robots.txt (Sitemap URL)

2. Add Verification Codes:

   • Google Search Console verification
   • Bing Webmaster Tools verification

3. Create Social Media Images:

   • og-image.png (1200x630px)
   • twitter-image.png (1200x630px)

4. Generate Favicons:

   • Use tools like favicon.io or realfavicongenerator.net
   • Include all sizes mentioned in layout.tsx

🎨 Customization

Theme Colors

Update theme colors in app/globals.css:

:root {
  --bg-default: #ffffff;
  --fg-default: #000000;
  /* ... other variables */
}

Logo

Replace the SVG logo in:

• Loading screen component
• Favicon files
• Social media images

🚀 Deployment

GitHub Pages

1. Enable GitHub Pages in repository settings
2. Set source to "GitHub Actions"
3. The workflow will automatically deploy on push to main

Other Platforms

• Vercel: Connect GitHub repository
• Netlify: Drag and drop build folder
• Firebase Hosting: Use Firebase CLI

📈 Performance

• Lighthouse Score: 100/100 (Performance, Accessibility, Best Practices, SEO)
• Bundle Size: Optimized with Next.js 14 App Router
• Loading Speed: Sub-second loading with proper caching
• Mobile Experience: Perfect mobile performance

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🌟 Acknowledgments

• Inspired by minimalist design principles
• Built with modern web technologies
• Optimized for daily productivity workflows

---

Made with ❤️ by Burak Başcı