A simple Todo App built with React, TypeScript, and Axios, which fetches data from the JSONPlaceholder API and displays it in a paginated table. The app is designed to be responsive, mobile-friendly, and handles error and loading states gracefully. It uses Recoil for state management to provide an efficient and scalable way to manage application state.
- React and TypeScript: Ensures a strongly typed application with reusable components.
- Axios: Handles HTTP requests to fetch todo data from the JSONPlaceholder API.
- Recoil: Manages the global state of todos, loading, error, and pagination.
- Pagination: View the todos in pages
- Responsive Design: Works well on mobile and desktop screens.
- Error Handling: Gracefully handles API errors and loading states.
Follow these instructions to get the project up and running on your local machine.
- Node.js (v12.x or later)
- npm (v6.x or later)
-
Clone the repository
-
Install the dependencies:
```bash npm install ```
-
Create a
.envfile in the root of the project and add the following:```bash REACT_APP_TODO_API=https://jsonplaceholder.typicode.com/todos ```
-
Start the development server:
```bash npm start ```
-
Open http://localhost:3000 to view the app in the browser.
This application uses Recoil for state management, which is a modern and efficient state management library for React applications. Recoil allows for a fine-grained reactive state model where state is shared across components with minimal boilerplate.
Recoil atoms store the state, while selectors compute derived state and offer flexibility to handle more complex logic in a scalable way. In this Todo App, Recoil atoms are used to manage:
- The list of todos
- Loading and error states
- Pagination details like current page and items per page
To learn more about Recoil, visit the official documentation:
- React - A JavaScript library for building user interfaces.
- TypeScript - Typed JavaScript at Any Scale.
- Axios - Promise based HTTP client for the browser and Node.js.
- Recoil - State management library for React.
This project is licensed under the MIT License - see the LICENSE file for details.