To-Do List Fullstack Application

Introduction

This is a Fullstack To-Do List Application that allows users to create an account, authenticate using tokens, and perform CRUD operations on their to-do items.

Technologies Used

  • Node.js
  • Express.js
  • React
  • PostgreSQL
  • Docker

Getting Started

To run this project locally, follow these steps:

Prerequisites

  • Node.js installed
  • Docker installed and running (for database)
  • npm or yarn installed

Installation

  1. Clone the repository: git clone https://github.com/yabad-codes/todo-fullstack.git
  2. Change into the project directory: cd todo-fullstack
  3. Install server dependencies: cd server && npm i
  4. Install client dependencies: cd ../client && npm i
  5. Create a PostgreSQL database and update the configuration in cd database && make then access the database docker container using docker exec -it postgres sh and run psql -U postgres then select todoapp database \c todoapp then create your tables using SQL queries in data.sql file.
  6. Modify .env values with the right ones before launching the server and client.
  7. Update packages for server using npm update.
  8. Run the server: npm run server
  9. Run the client: npm run client

Authentication

  • Users can create an account by providing email and password.
  • Authentication is handled using tokens generated by the server (JWT).

CRUD Operations

  • Once authenticated, users can perform CRUD operations on their to-do items.
  • Create: Add new to-do items.
  • Read: Fetch and display existing to-do items.
  • Update: Modify the content or status of to-do items.
  • Delete: Remove to-do items.

API Endpoints

  • POST /signup: Register a new user.
  • POST /login: Log in and receive an authentication token.
  • GET /todos/:userEmail: Get all to-do items for the authenticated user.
  • POST /todos: Create a new to-do item.
  • PUT /todos/:id: Update a specific to-do item.
  • DELETE /todos/:id: Delete a specific to-do item.

Configuration

  • Server configuration can be found in server/server.js.
  • Client configuration can be found in client/App.js.

Credits

  • The authentication mechanism is built using jsonwebtoken.
  • The React application is bootstrapped with vite.

Contact

For questions or issues, contact me in discord [yabad#8007].

Login and Register

register login

Login and Register error handling

Screen Shot 2023-11-12 at 4 11 38 PM Screen Shot 2023-11-12 at 4 11 17 PM register error handling 1

Home page

Screen Shot 2023-11-12 at 4 11 54 PM

Adding todo item

Screen Shot 2023-11-12 at 4 12 08 PM Screen Shot 2023-11-12 at 4 12 30 PM

Editing todo item

Screen Shot 2023-11-12 at 4 12 48 PM Screen Shot 2023-11-12 at 4 17 32 PM

Deleting todo item by pressing delete

Screen Shot 2023-11-12 at 4 18 16 PM

Logout

Screen Shot 2023-11-12 at 4 19 06 PM