This is a ToDo App built with Next.js, leveraging modern React features and best practices. The app allows users to manage their tasks efficiently with features like adding, deleting, and managing todos.
- Add Todos: Create new tasks with a title.
- Delete Todos: Remove tasks from the list.
- Optimistic UI Updates: Instant feedback for user actions using React Query.
- Responsive Design: Fully responsive layout for mobile and desktop.
- Feedback Modal: A simple feedback form displayed in a modal.
- Productivity Tips: A section for helpful productivity tips.
- Framework: Next.js
- State Management: React Query
- Styling: Tailwind CSS
- Icons and Images: Next.js Image Optimization
- Fonts: Geist Sans and Geist Mono
Ensure you have the following installed:
- Node.js:
>= 16.x - npm, yarn, or pnpm
-
Clone the repository:
git clone git@github.com:ingridnovak/todo-app.git cd todo-app -
Install dependencies:
npm install # or yarn install # or pnpm install
To start the development server:
npm run dev
# or
yarn dev
# or
pnpm devOpen http://localhost:3000 in your browser to view the app.
To create a production build:
npm run build
# or
yarn build
# or
pnpm buildTo test the production build:
npm start
# or
yarn start
# or
pnpm start- Used Tailwind CSS for consistent and responsive styling.
- Avoid inline styles unless necessary.
- Used React Query for server state management and caching.
- Implement optimistic updates for a better user experience.
- Used semantic HTML.
- Optimized images using Next.js's
Imagecomponent. - Used dynamic imports (
next/dynamic) for large components to reduce initial load time.
todo-app/
├── src/
│ ├── app/
│ │ ├── components/
│ │ │ ├── Footer/
│ │ │ │ └── footer.js
│ │ │ └── CreateToDo/
│ │ │ │ └── create.js
│ │ │ ├── List/
│ │ │ │ └── list.js
│ │ │ └── Pagination/
│ │ │ │ └── pagination.js
│ │ ├── feedback/
│ │ │ └── page.js
│ │ ├── about/
│ │ │ └── page.js
│ │ ├── tips/
│ │ │ └── page.js
│ │ ├── ui/
│ │ │ └── about.js
│ │ │ └── feedback.js
│ │ │ └── modal.js
│ │ │ └── tips.js
│ │ └── layout.js
│ ├── hooks/
│ │ ├── useCreateTodo.js
│ │ └── useDeleteTodo.js
│ └── globals.css
│ └── layout.js
│ └── page.js
│
├── public/
│ ├── file.svg
│ ├── globe.svg
│ ├── todo.jpg
│ └── window.svg
├── .next/ (generated after build)
├── README.md
└── package.json
This project is licensed under the MIT License. See the LICENSE file for details.