The React Todo Application

Welcome to the Todo App repository! This project is a feature-rich and user-friendly application designed to help you manage your tasks efficiently. The app offers a clean and modern interface, ensuring a seamless user experience across both desktop and mobile devices.

Project Features

• Add Todo: This feature allows users to create a new task.
• Delete Todo: This feature enables users to delete a task from their list.
• Toggle Completion: This feature allows users to change the status of a todo.
• Rename Todo: This feature lets users update the title of a todo.
• Toggle All: This feature provides a quick way for users to change the status of all their tasks at once.
• Theme switching: This feature allows users to switch between dark and light themes for the application's interface.

Frontend technologies that were used

• React.js: serves as the core framework for building the user interface with reusable components.
• Vite.js: is used to bundle and serve the project during development.
• React Toastify: is utilized to display notifications to users, enhancing the user experience.
• Axios: handles HTTP requests to fetch or send data to backend APIs.
• Typescript: adds type safety and helps catch errors early in the development process.
• Bulma.css: provides pre-styled components and utility classes.
• SCSS: allows for advanced styling techniques and keeps the CSS code organized.

Backend technologies that were used (the link to the backend repo is down below)

• Fastify: serves as the web server framework, handling incoming HTTP requests, routing, and serving responses.
• Prisma ORM: acts as the bridge between the application code and the database.

Database that was used

• PostgreSQL: serves as the relational database, storing the application's data.

To run project locally

To run project you need to have Node.js v18 and higher.

• Clone repo to your locall folder:
  git clone https://github.com/hattoriKanto/react-todo-app-with-db.git
• Install all dependencies:
  npm i
• To run project locally you must use this command:
  npm run dev

Links

The project was deployed on Vercel, ensuring fast and reliable hosting.

Link to the backend repo: BACKEND

Link to the preview: DEMO LINK