:rocket: Todoodles | A React Redux Todo App

Todoodles is a CRUD todo app created as a Redux Toolkit study.

Features

Users can create, read, update and edit entries via Redux state management.

DEMO

Technology

1. Reactjs 18 | Installed using the Redux & Redux Toolkit template
2. Redux Toolkit | Getting Started
3. React Router 6 | React Router
4. TailwindCSS | TailwindCSS
5. Redux DevTools for Chrome | Dev Tools

Getting Started

These instructions will give you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on deploying the project on a live system.

Development setup

Download and extract the Zip file or clone this repo your system.

After downloading/cloning this repo, go to its root directory and run:

$ npm i
$ npm start

Deployment

This project is hosted on Netlify. To deploy your own copy, you will need to set up a Netlify account. Netlify offers a generous free tier to developers.

Before deploying to Netlify you need to create a build:

$ npm run build

It is a good idea to test your build by serving it on your localhost. Once you are happy with your build, open up your Netlify Account.

For a basic deploy, you can simply drag and drop the build folder onto your Netlify Sites directory. See Get started with Netlify for details.

:books: Learning Resources

Tutorial

• CRUD Operations with React and Redux Toolkit by Cand Dev

Layouts with React Router 6

• React Router v6 Shared layouts
• React Router Example

Use of Index Files

• How do index.js files work in React component directories?

:memo: Notes

1. Nanoid

Nanoid is now part of React Toolkit, so you do not have to add a separate package unless your project requires a different universal identifyer.

2. React File Structure

Redux / Redux Toolkit currently recommends structuring files as Feature folders with all files for a feature in the same folder:

• Redux Style Guide

React File Structure

• File Structure from Reactjs
• Delightful React File/Directory Structure

3. Use of Index Files in Folders

As your React project grows, index files can really help clean up your file imports, making your code easier to read. This is especially useful for larger projects with multiple Redux slice reducers.

Instead of:

app.js

import { Routes, Route } from 'react-router-dom'
import AddTodo from "./features/todos/AddTodo";
import EditTodo from "./features/todos/EditTodo";
import TodoList from "./features/todos/TodoList";
import Layout from './components/Layout
import NotFound from './components/NotFound

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<TodoList />} />
        <Route path="add-todo" element={<AddTodo />}/>
        <Route path="edit-todo/:id" element={<EditTodo />}/>
        <Route path="*" element={<NotFound />}/>
      </Route>
    </Routes>
  );
}

export default App

In projects with multiple slice reducers, the imports list would grow exponentially and cause the code to be hard to read. Use cleaner imports:

app.js

import { Routes, Route } from 'react-router-dom'
import { TodoList, AddTodo, EditTodo } from './features/todos'
import { Layout, NotFound } from './components'

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<TodoList />} />
        <Route path="add-todo" element={<AddTodo />}/>
        <Route path="edit-todo/:id" element={<EditTodo />}/>
        <Route path="*" element={<NotFound />}/>
      </Route>
    </Routes>
  );
}

export default App

Sample Index:

components/index.js

import Button from "./Button";
import Header from "./Header";
import Layout from "./Layout";
import NotFound from './NotFound'
import TextField from "./TextField";
import FormContainer from "./FormContainer";

export { Button, Header, Layout, TextField, NotFound, FormContainer }