{"id":25099655,"url":"https://github.com/marco5dev/checkmate","last_synced_at":"2026-02-18T07:32:18.504Z","repository":{"id":275541376,"uuid":"926261395","full_name":"Marco5dev/checkmate","owner":"Marco5dev","description":"CheckMate is a sleek and intuitive app designed to help you stay on top of your tasks, organize your thoughts, and find daily inspiration. Whether you're managing a busy schedule, jotting down important ideas, or capturing memorable quotes, CheckMate has got you covered.","archived":false,"fork":false,"pushed_at":"2025-04-16T23:37:36.000Z","size":99871,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-25T19:58:14.765Z","etag":null,"topics":["api","backend","frontend","fullstack","javascript","js","mongodb","nextjs15","nodejs","notes","notes-app","pwa","quotes","quotes-application","reactjs","todolist"],"latest_commit_sha":null,"homepage":"https://checkmate.marco5dev.me","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Marco5dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-02-02T23:02:34.000Z","updated_at":"2025-04-16T23:37:39.000Z","dependencies_parsed_at":"2025-10-04T13:28:13.608Z","dependency_job_id":null,"html_url":"https://github.com/Marco5dev/checkmate","commit_stats":null,"previous_names":["marco5dev/todo-list-app-cs50x","marco5dev/checkmate"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Marco5dev/checkmate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marco5dev%2Fcheckmate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marco5dev%2Fcheckmate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marco5dev%2Fcheckmate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marco5dev%2Fcheckmate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Marco5dev","download_url":"https://codeload.github.com/Marco5dev/checkmate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marco5dev%2Fcheckmate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29572412,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-18T06:19:27.422Z","status":"ssl_error","status_checked_at":"2026-02-18T06:18:44.348Z","response_time":162,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","backend","frontend","fullstack","javascript","js","mongodb","nextjs15","nodejs","notes","notes-app","pwa","quotes","quotes-application","reactjs","todolist"],"created_at":"2025-02-07T19:37:15.651Z","updated_at":"2026-02-18T07:32:18.477Z","avatar_url":"https://github.com/Marco5dev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CheckMate - Todo List App\n\n## CS50x Final Project 2025\n\nBy Mark Maher Eweida (marco5dev)\n\n### Video Demo: [Video Link](https://youtu.be/wKu0s_gWPyM)\n- **Project Title:** CheckMate\n- **Name:** Mark Maher Eweida\n- **Github \u0026 EDX username:** marco5dev\n- **city and country:** Port Said, Egypt\n- **Date:** 10/2/2025\n\n## Project Description\n\nCheckMate is a modern task management application built using Next.js and React. It allows users to efficiently organize and track their daily tasks with a clean, intuitive interface. The project demonstrates the culmination of skills learned in CS50x, particularly in web development and user interface design.\n\n### Key Features\n\n- Task Management: Create, edit, and delete tasks\n- Status Tracking: Mark tasks as complete or incomplete\n- Priority System: Organize tasks by importance level\n- Responsive Design: Works seamlessly on desktop and mobile devices\n- Real-time Updates: Changes reflect immediately without page refresh\n\n### Technical Implementation\n\nThe application leverages several modern web technologies:\n\n- **Next.js 15**: For server-side rendering and routing\n- **React**: For building the user interface components\n- **Tailwind CSS**: For responsive and customizable styling\n- **DaisyUI**: For pre-built UI components\n- **CSS Modules**: For component-scoped styling\n- **Vercel**: For deployment and hosting\n\n### Project Structure\n\n```\nproject-root/\n├── .env                      # Environment variables for the project\n├── .gitignore                # Specifies files for Git to ignore\n├── bun.lock                  # Dependency lock file for Bun\n├── jsconfig.json             # JavaScript project configuration\n├── next.config.mjs           # Next.js configuration file\n├── package.json              # Project dependencies and scripts\n├── postcss.config.mjs        # PostCSS configuration file\n├── README.md                 # Project documentation\n├── tailwind.config.mjs       # Tailwind CSS configuration\n│\n├── public/                   # Static assets\n│   ├── favicon.ico           # Website favicon\n│   ├── logo.png              # Project logo\n│   ├── manifest.json         # Web app manifest\n│   ├── Fonts/                # Font files directory\n│   │   ├── Edu_font/         # Edu font files\n│   │   │   ├── EduAUVICWANTPre-Bold.ttf\n│   │   │   ├── EduAUVICWANTPre-Medium.ttf\n│   │   │   ├── EduAUVICWANTPre-Regular.ttf\n│   │   │   ├── EduAUVICWANTPre-SemiBold.ttf\n│   │   │   └── EduAUVICWANTPre-VariableFont_wght.ttf\n│   │   └── Merriweather/     # Merriweather font files\n│   │       ├── Merriweather-Black.ttf\n│   │       ├── Merriweather-BlackItalic.ttf\n│   │       ├── Merriweather-Bold.ttf\n│   │       ├── Merriweather-BoldItalic.ttf\n│   │       ├── Merriweather-Italic.ttf\n│   │       ├── Merriweather-Light.ttf\n│   │       ├── Merriweather-LightItalic.ttf\n│   │       └── Merriweather-Regular.ttf\n│   ├── previews/             # Preview images\n│   │   ├── preview1.png\n│   │   ├── preview2.png\n│   │   ├── preview3.png\n│   │   └── theme-preview.png\n│   └── wallpapers/           # Wallpapers for the app\n│       ├── Fantasy-Mountain.png\n│       ├── Fog-Forest-Everforest.png\n│       ├── Lake.png\n│       ├── Lofi - Chill Room2.jpeg\n│       ├── Lofi-Cafe1.png\n│       ├── Lofi-Cafe2.png\n│       ├── Lofi-Desktop-Man-Studying.png\n│       ├── space.jpg\n│       ├── Street.png\n│       ├── Under_Starlit_Sky.png\n│       ├── Video Game - The Blackstreets.jpeg\n│       └── Wall.png\n│\n└── src/                      # Source code directory\n    ├── middleware.js         # Middleware functions\n    ├── app/                  # Next.js app directory\n    │   ├── favicon.ico       # Favicon for the app\n    │   ├── globals.css       # Global styles\n    │   ├── layout.jsx        # Root layout component\n    │   ├── page.jsx          # Home page component\n    │   ├── sitemap.js        # Sitemap generator\n    │   ├── actions/          # User-related actions\n    │   │   └── user.js       # User action logic\n    │   ├── api/              # API routes\n    │   │   ├── auth/         # Authentication routes\n    │   │   │   ├── logout/   # Logout endpoint\n    │   │   │   │   └── route.js\n    │   │   │   └── [...nextauth]/ # NextAuth route\n    │   │   │       └── route.js\n    │   │   ├── folders/      # Folder-related API\n    │   │   │   └── route.js\n    │   │   ├── notes/        # Notes-related API\n    │   │   │   ├── route.js\n    │   │   │   └── [id]/     # API for specific notes\n    │   │   │       └── route.js\n    │   │   ├── notes-folders/ # Notes and folder combination API\n    │   │   │   ├── route.js\n    │   │   │   └── [id]/\n    │   │   │       └── route.js\n    │   │   ├── og/           # Open Graph image generation\n    │   │   │   └── route.jsx\n    │   │   ├── profile/      # User profile API\n    │   │   │   └── avatar/\n    │   │   │       └── route.js\n    │   │   ├── quotes/       # Quotes API\n    │   │   │   └── route.js\n    │   │   ├── tags/         # Tags API\n    │   │   │   ├── route.js\n    │   │   │   └── [id]/\n    │   │   │       └── route.js\n    │   │   ├── tasks/        # Task API\n    │   │   │   └── route.js\n    │   │   ├── upload/       # File upload API\n    │   │   │   └── route.js\n    │   │   ├── user-settings/ # User settings API\n    │   │   │   └── route.js\n    │   │   └── wallpapers/   # Wallpaper-related API\n    │   │       └── route.js\n    │   ├── home/             # Home page directory\n    │   │   └── page.jsx\n    │   ├── login/            # Login page directory\n    │   │   ├── form.jsx\n    │   │   └── page.jsx\n    │   ├── notes/            # Notes page\n    │   │   └── page.jsx\n    │   ├── privacy/          # Privacy policy page\n    │   │   └── page.jsx\n    │   ├── profile/          # User profile page\n    │   │   └── page.jsx\n    │   ├── settings/         # User settings page\n    │   │   └── page.jsx\n    │   ├── tasks/            # Task management page\n    │   │   └── page.jsx\n    │   └── terms/            # Terms and conditions page\n    │       └── page.jsx\n    ├── components/           # Reusable components\n    │   ├── Editor.jsx        # Rich text editor component\n    │   ├── Header.jsx        # Header component\n    │   ├── HeaderWrapper.jsx # Header wrapper component\n    │   ├── HomeClient.jsx    # Client-side Home component\n    │   ├── ImageCropModal.jsx # Image crop modal\n    │   ├── ImageGallery.jsx  # Image gallery component\n    │   ├── LegalPageLayout.jsx # Layout for legal pages\n    │   ├── LoadingScreen.jsx # Loading screen component\n    │   ├── LogoutButton.jsx  # Logout button\n    │   ├── NotesClient.jsx   # Notes client component\n    │   ├── PasswordModal.jsx # Password modal\n    │   ├── ProfileDrawer.jsx # Profile drawer component\n    │   ├── ProfileEditor.jsx # Profile editor\n    │   ├── SettingsClient.jsx # Settings client component\n    │   ├── TasksClient.jsx   # Task client component\n    │   └── loadings/         # Loading skeleton components\n    │       ├── LoadingAvatar.jsx\n    │       ├── LoadingFolderItem.jsx\n    │       ├── LoadingHeader.jsx\n    │       └── LoadingTaskCard.jsx\n    ├── constants/            # App constants and configurations\n    │   └── legalContent.js\n    ├── contexts/             # React context providers\n    │   └── SettingsContext.jsx\n    ├── lib/                  # Utility functions and helpers\n    │   └── authOptions.js\n    ├── models/               # Database models\n    │   ├── DailyQuote.js\n    │   ├── Folder.js\n    │   ├── Notes.js\n    │   ├── NotesFolder.js\n    │   ├── Tags.js\n    │   ├── Task.js\n    │   ├── User.js\n    │   └── UserSettings.js\n    ├── svg/                  # SVG components\n    │   ├── apple.jsx\n    │   └── google.jsx\n    └── utils/                # Utility functions\n        ├── emailService.js\n        ├── getUserData.js\n        ├── mongodb.js\n        └── SessionsProvider.jsx\n```\n\n### How to Run\n\n1. Clone the repository\n2. Install dependencies:\n\n```bash\nnpm install\n```\n\n3. Build the app:\n\n```bash\nnpm run build\n```\n\n4. Start the App:\n\n```bash\nnpm run start\n```\n\n6. Open [http://localhost:3000](http://localhost:3000) in your browser\n\n### Design Decisions\n\n- Chose Next.js for its built-in performance optimizations and server-side rendering capabilities\n- Implemented Tailwind CSS for rapid UI development and consistent styling\n- Used DaisyUI to maintain a professional look while reducing development time\n- Implemented real-time updates for better user experience\n\n### Challenges Overcome\n\n1. **Authentication Implementation**\n\n   - Implementing user authentication was one of the biggest challenges as it was my first time working with auth systems\n   - Faced numerous errors with token validation and session management\n   - Overcame these by thoroughly studying Next.js authentication documentation and implementing JWT-based auth with proper error handling\n   - Successfully implemented secure login/signup flows after multiple iterations\n\n2. **Dynamic Wallpaper System**\n\n   - Encountered significant issues with wallpaper loading and rendering\n   - Faced challenges with image optimization and responsive scaling\n   - Resolved by implementing proper image loading strategies and adding error boundaries\n   - Created a fallback system for failed wallpaper loads\n\n3. **Rich Text Note Editor**\n   - Building a note editor component was particularly challenging as it required deep understanding of React state management\n   - Struggled with maintaining cursor position and formatting options\n   - Solved by implementing a custom editor component using a third-party library\n   - Added features like markdown support and real-time preview gradually\n\n### Possible Future Improvements\n\n- User authentication system\n- Task categories and tags\n- Data persistence with a database\n- Task sharing capabilities\n- Mobile application version\n\n### About the Developer\n\nMy name is Mark Maher, and I'm a CS50x student from Egypt - Port Said. Prior to taking CS50x, I had alot of experince in programming. This course has been an incredible journey, starting from the basics of C programming and culminating in this web development project.\n\nThroughout CS50x, I've learned fundamental concepts like algorithms, data structures, and software design principles. The transition from C to Python, and then to web development with JavaScript, has given me a comprehensive understanding of different programming paradigms.\n\nThis final project combines everything I've learned, particularly from Week 8 (HTML, CSS, JavaScript) and Week 9 (Flask, Python). While the technologies used (Next.js, React) go beyond CS50x's curriculum, the core principles learned in the course - especially regarding problem-solving and writing clean, efficient code - were instrumental in building this application.\n\nI chose to create CheckMate because I wanted to solve a real-world problem while challenging myself with modern web technologies.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarco5dev%2Fcheckmate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarco5dev%2Fcheckmate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarco5dev%2Fcheckmate/lists"}