Overview
This prompt guides developers in creating a full-stack activity tracking application using modern technologies. It benefits programmers seeking to enhance their skills in React.js, Node.js, and TypeScript while implementing user authentication and database management.
Prompt Overview
Purpose: This application tracks user activities through projects and tasks, enhancing productivity management.
Audience: Targeted at developers and teams seeking efficient time tracking and project management solutions.
Distinctive Feature: It combines user authentication with real-time timer functionality for precise task management.
Outcome: Users will effectively manage projects and tasks while monitoring time spent on each activity.
Quick Specs
- Media: Text
- Use case: Generation
- Industry: Development Tools & DevOps, General Business Operations, Productivity & Workflow
- Techniques: Plan-Then-Solve, Role/Persona Prompting, Structured Output
- Models: Claude 3.5 Sonnet, Gemini 2.0 Flash, GPT-4o, Llama 3.1 70B
- Estimated time: 5-10 minutes
- Skill level: Beginner
Variables to Fill
No inputs required — just copy and use the prompt.
Example Variables Block
No example values needed for this prompt.
The Prompt
Build a full-stack activity tracking application using **React.js** and **Node.js** with **TypeScript**, incorporating user authentication and **MongoDB** as the database.
### Specifications:
– The app should allow users to create and manage projects.
– Each project can have multiple tasks associated with it.
– Users should be able to start and stop a timer for each task to record how much time is spent.
– Implement authentication to ensure that users can securely access and manage their own projects and tasks.
– Use TypeScript for both frontend and backend code.
– The backend should be built with Node.js, using Express.js or a similar framework.
– Use MongoDB to store user data, projects, tasks, and time tracking entries.
### Step-by-step Guidance:
1. Setup the project structure for both client and server with TypeScript configurations.
2. Design and implement MongoDB schemas/models for:
– Users
– Projects
– Tasks
– Timer entries
3. Build API endpoints for:
– Authentication (register, login, logout)
– CRUD operations for projects and tasks
4. On the client side, create React components for:
– User authentication forms
– Project list and creation
– Task list under each project with create, update, and delete capabilities
– Timer controls (start, stop) per task showing elapsed time
5. Implement state management and API integration to synchronize client actions with the backend.
6. Ensure proper security measures, including password hashing and token-based authentication (e.g., JWT).
7. Provide error handling and feedback for user interactions.
### Output Format:
– Provide the full file structure and code files necessary for the application, organized into backend and frontend directories.
– Each directory should include:
– Configuration files
– Source code files written in TypeScript
– README files with setup instructions
### Include:
– Sample code snippets demonstrating:
– How projects and tasks are created
– How timers start and stop
– How authentication is handled
### Notes:
– Focus on the core functionality first (projects, tasks, timers, authentication), then optionally add advanced reporting features.
– The solution should be modular and maintainable, using best practices for React.js, Node.js, and MongoDB.
– Assume the user has basic environment setup (Node.js, npm, MongoDB) but include necessary commands to run the project.
Screenshot Examples
How to Use This Prompt
- Copy the prompt provided above.
- Paste the prompt into your coding environment.
- Follow the step-by-step guidance for implementation.
- Ensure to include all specified features and functionalities.
- Test the application thoroughly for any issues.
- Document your code and provide setup instructions.
Tips for Best Results
- Project Structure: Organize your application into clear directories for frontend and backend, ensuring TypeScript configurations are in place for both.
- MongoDB Schemas: Define schemas for Users, Projects, Tasks, and Timer entries to maintain a structured database.
- API Endpoints: Create RESTful API endpoints for user authentication and CRUD operations for projects and tasks to facilitate data management.
- React Components: Develop user-friendly React components for authentication, project/task management, and timer controls to enhance user experience.
FAQ
- What technologies are used in the activity tracking application?
The application uses React.js, Node.js, TypeScript, and MongoDB for development. - How do users manage their projects in the app?
Users can create, update, and delete projects, and associate multiple tasks with each project. - What feature tracks time spent on tasks?
The app includes a timer feature that users can start and stop for each task. - How is user authentication implemented?
User authentication is handled through secure registration, login, and token-based methods like JWT.
Compliance and Best Practices
- Best Practice: Review AI output for accuracy and relevance before use.
- Privacy: Avoid sharing personal, financial, or confidential data in prompts.
- Platform Policy: Your use of AI tools must comply with their terms and your local laws.
Revision History
- Version 1.0 (February 2026): Initial release.
