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