A full-stack web application for task management, similar to Trello, built using the MERN (MongoDB, Express.js, React, Node.js) stack.
- Create, update, and manage tasks within different columns
- User authentication (sign up, log in)
- Google OAuth integration for easy login
- Drag-and-drop functionality for tasks
- Responsive design with Tailwind CSS
- React (with Vite)
- React Router Dom
- Tailwind CSS
- Axios
- Sonner (for toast notifications)
- Lucide React (for icons)
- React Beautiful DnD
- Node.js
- Express.js
- MongoDB (with Mongoose)
- Passport.js (for Google OAuth2)
- JSON Web Tokens (JWT)
- Bcrypt
- Zod (for validation)
Before you begin, ensure you have the following installed:
- Node.js (v14 or later)
- npm (v6 or later)
- MongoDB
-
Clone the repository:
git clone https://github.com/tapadar13/task-manager.git cd task-manager
-
Install backend dependencies:
cd server npm install
-
Install frontend dependencies:
cd ../client npm install
-
Set up environment variables:
- In the
server
directory, create a.env
file and add the following:PORT=3000 MONGODB_URI=your_mongodb_connection_string JWT_SECRET=your_jwt_secret GOOGLE_CLIENT_ID=your_google_client_id GOOGLE_CLIENT_SECRET=your_google_client_secret FRONTEND_URL="http://localhost:5173" BACKEND_URL="http://localhost:3000"
- In the
-
Configure the API URL:
- In the
client/src/services/api.js
file, ensure theAPI_URL
is set correctly:export const API_URL = "http://localhost:3000/api";
- If you need to use a different URL for local development, you can modify this line accordingly.
- In the
-
Start the backend server:
cd server npm run dev
-
In a new terminal, start the frontend development server:
cd client npm run dev
-
Open your browser and navigate to
http://localhost:5173
to view the application.
Here's a brief overview of the main API endpoints:
POST /api/auth/register
: Register a new userPOST /api/auth/login
: Log in a userGET /api/auth/google
: Initiate Google OAuth2 authenticationGET /api/auth/google/callback
: Google OAuth2 callback route
GET /api/tasks
: Retrieve all tasks for the authenticated userPOST /api/tasks
: Create a new taskPUT /api/tasks/:id
: Update a taskDELETE /api/tasks/:id
: Delete a task
- The client initiates Google OAuth2 authentication by redirecting the user to
/api/auth/google
. - After successful authentication with Google, the user is redirected to
/api/auth/google/callback
. - The callback route authenticates the user, generates a JWT token, and redirects to the frontend dashboard with the token and user ID as query parameters.
Example of the Google OAuth2 routes implementation:
router.get(
"/google",
passport.authenticate("google", { scope: ["profile", "email"] })
);
router.get(
"/google/callback",
passport.authenticate("google", {
session: false,
failureRedirect: "/login",
}),
(req, res) => {
const { user, token } = req.user;
res.redirect(
`${process.env.FRONTEND_URL}/dashboard?token=${token}&userId=${user._id}`
);
}
);
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License.
- Tailwind CSS for the utility-first CSS framework
- Vite for the blazing fast frontend tooling