This is a simple TodoList app built using React and Django, designed to help you manage your tasks efficiently. You can add, edit, and delete tasks, sort them by due date or priority, and filter them by their completion status. The app also uses JWT (JSON Web Tokens) for user authentication.
demo.mp4
- User authentication: Users can log in to their accounts, and their tasks will be associated with their user ID.
- Add and Edit Tasks: You can easily add new tasks and edit existing ones with a title, priority, and due date.
- Priority Levels: Tasks can be assigned priority levels (high, medium, low) to help you manage your workload effectively.
- Sorting and Filtering: Sort tasks by due date or priority, and filter them by "All," "Completed," or "Active."
- Task Completion: Mark tasks as completed or active, and they will be visually represented accordingly.
- Task Deletion: Easily delete tasks you no longer need.
- Responsive Design: The app is designed to work on both desktop and mobile devices.
- Clone the repository to your local machine.
- Install the required dependencies for both the React front-end and Django back-end.
- Configure the Django settings, such as database and JWT authentication.
- Start the Django server.
## create virtual env
python -m venv venv
#enable virtual env
venv\Scripts\Activate.ps1
## install requirements
pip install -r requirements.txt
## Start Django backend
python manage.py runserver
- Install the required dependencies of frontend by running
npm i
in the frontend folder . Start the React development server by runningnpm start
. - Access the app in your web browser at
http://localhost:3000
.
- React: Front-end development and user interface.
- Django: Back-end server and database management.
- JWT (JSON Web Tokens): User authentication and authorization.
- HTML/CSS: Front-end styling and structure.
frontend/
: Contains the React front-end code.backend_api/
: Contains the Django back-end code.
-
List all tasks:
GET /api/task-list/?user=<user_id>
-
Task details:
GET /api/task-detail/<str:pk>/
-
Create a new task:
POST /api/task-create/
-
Update a task:
POST /api/task-update/<str:pk>/
-
Delete a task:
DELETE /api/task-delete/<str:pk>/
-
Obtain JWT Token:
POST /api/token/
-
Register a new user:
POST /api/register/
-
Refresh JWT Token:
POST /api/token/refresh/
-
Get available API routes:
GET /api/routes/
-
Test endpoint with authentication:
GET /api/test-endpoint/
POST /api/test-endpoint/
Use these endpoints to interact with the TodoList app and manage tasks, authentication, and more.
- Users can register by providing an email, username, password, and confirming the password.
- The registration request is sent to the Django back end using a POST request to
/api/register/
. - If the registration is successful, the user is redirected to the login page.
- Users can log in by providing their email and password.
- The login request is sent to the Django back end using a POST request to
/api/token/
. - If the login is successful, a JSON Web Token (JWT) is obtained and stored in the local storage.
- The user is redirected to the main application page.
- Users can log out by clicking the "Log Out" button.
- The stored JWT is removed from local storage.
- The user is redirected to the login page.
- Proper error handling is in place, and users receive clear messages for successful and failed operations.
- SweetAlert2 is used to display custom alerts for a better user experience.