FocusDay
FocusDay is a full-stack productivity web application that allows users to create, manage, and organise to-do items and notes. Built as a technology demonstration project, it showcases a modern JavaScript stack combining a React frontend with a Node.js backend and MongoDB persistence layer. The source code is available on GitHub.
What It Does
FocusDay provides a clean, focused interface for managing daily tasks and notes. Users can create new to-do items, mark them as complete, and remove them when no longer needed. Notes can be added for capturing ideas or reminders that do not fit into a task-based workflow. All data is persisted to a MongoDB database, so users retain their information across sessions. The application also features JWT-based authentication, allowing individual users to maintain their own private set of tasks and notes.
Technical Architecture
The frontend is built with Next.js and React, taking advantage of React Hooks for state management throughout the application. The useState and useEffect hooks manage local component state, while SWR (stale-while-revalidate) handles data fetching with automatic caching, revalidation, and optimistic UI updates. This combination provides a responsive user experience where the interface feels fast and data stays fresh without manual refresh actions.
On the backend, Node.js serves a RESTful API that handles CRUD operations for tasks and notes. Mongoose provides the ODM layer for interacting with MongoDB, defining data schemas and handling validation. JWT authentication secures the API endpoints, ensuring that each user’s data remains private and accessible only with valid credentials.
Material-UI was chosen as the component library, providing a polished set of pre-built React components that follow Material Design principles. This allowed rapid UI development while maintaining a consistent and professional visual appearance.
Key Features
- Task management — create, complete, and delete to-do items
- Notes — capture freeform text notes alongside tasks
- Persistent storage — all data saved to MongoDB and available across sessions
- JWT authentication — secure user accounts with token-based authentication
- Real-time data fetching — SWR keeps the UI synchronised with the backend
- Responsive design — Material-UI components adapt to different screen sizes
Live Project
Open https://focus-day.vercel.app/ in your browser to see the result. The application is deployed on Vercel’s serverless platform, which provides automatic scaling and fast global delivery. You can start testing the app by adding, removing and clearing Notes and Tasks.
Local Testing
First, run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.