Taskat is a task management system built with Node.js using Express for the backend and Next.js for the frontend. This guide will help you get the application up and running on a Windows environment.
Before you begin, ensure you have the following installed on your machine:
- Node.js: Download & Install Node.js
- MongoDB: Download & Install MongoDB, and ensure it is running on your machine.
Follow these steps to set up and run your project locally.
To get started, clone the repository to your local machine:
git clone https://github.com/mohjak/taskat.git
cd taskatNavigate to the project directory and install the required dependencies:
# Install backend dependencies
npm install
# Navigate to the frontend directory
cd frontend
# Install frontend dependencies
npm installCreate a .env file in the root of your backend directory to store configuration settings such as your database connection string.
# .env file configuration
PORT=3000
MONGO_URI=mongodb://127.0.0.1:27017/taskat
Ensure MongoDB is running before you start the application.
Createa .env file in the frontend directory to store configuration settings such as your server api url.
NEXT_PUBLIC_API_URL=http://localhost:3001
To run the application, you need to start both the backend and the frontend servers.
Open a command prompt in the taskat directory:
node server.jsYou should see a message indicating that the server is running on port 3001 and connected to MongoDB.
Open another command prompt in the taskat/frontend directory:
npm run devThis will start the Next.js development server on http://localhost:3000.
To use the application, open a web browser and navigate to http://localhost:3000. Here, you'll find the task management interface.
To create a new task:
- Navigate to
http://localhost:3000 - Enter the task details in the input fields provided on the main page.
- Click the "Create Task" button to submit the form.
- The new task will be added to the MongoDB database, and you should see it listed on the page.
To update an existing task:
- Navigate to
http://localhost:3000. - Find the task you wish to update in the task list displayed on the page.
- Click the "Edit" button next to the task you want to modify.
- The task's details will populate the input fields at the top of the page, allowing you to make changes.
- Adjust the task's name, description, or due date as needed.
- Click the "Update Task" button to submit the changes.
- The task details will be updated in the MongoDB database, and you will see the updated information reflected in the task list on the page.
- If you decide not to proceed with the changes, you can click the "Cancel Edit" button to revert the form to its initial state for creating tasks.
To delete an existing task:
- Navigate to
http://localhost:3000. - Locate the task you want to remove in the task list displayed on the page.
- Click the "Delete" button next to the task you want to delete.
- A confirmation prompt will appear to ensure you want to delete the task. Confirm the deletion.
- The task will be removed from the MongoDB database, and it will no longer appear in the task list on the page.
To view all existing tasks:
- Navigate to
http://localhost:3000. - Upon loading the page, a list of all tasks stored in the MongoDB database will be displayed.
- Each task entry shows the task name, description, and due date, along with "Edit" and "Delete" buttons for further actions.