This guide will help you set up and run the Task Manager web application, which features a React frontend and a Flask backend.
Before you begin, ensure you have the following installed:
- Node.js and npm (Node Package Manager)
- Python 3 and pip (Python Package Installer)
- Navigate to the
backend
directory from the root of the project. - Create a virtual environment:
python3 -m venv venv
- Activate the virtual environment:
- On Windows:
venv\Scripts\activate
- On macOS/Linux:
source venv/bin/activate
- Install the required Python packages:
pip install -r requirements.txt
- Navigate to the
frontend
directory from the root of the project. - Install the required Node.js packages:
npm install
To ensure the frontend of the application works as expected, you can run the suite of automated tests included with the project. Follow these steps to execute the tests:
- Ensure you are in the
frontend
directory. - Run the test command:
npm test
This command will start the test runner in the interactive watch mode. You will see the results of the tests in the terminal, including which tests passed and which failed. For more detailed information about each test, you can consult the documentation of the testing framework used in the project.
- Ensure you are in the
backend
directory and the virtual environment is activated. - Start the Flask server:
python run.py
- Open a new terminal and navigate to the
frontend
directory. - Start the React development server:
npm start
After starting both the backend and frontend servers, open http://localhost:3000 in your browser to view the application.
To stop the application, press Ctrl+C
in both the backend and frontend terminal windows. Deactivate the Python virtual environment in the backend terminal by running deactivate
.
Below are animated demonstrations showcasing the Task Manager web application in action. These GIFs provide a quick overview of its key features and the user interface.
This GIF demonstrates the core functionalities of the application, including task creation, editing, and deletion.
Here, you can see how the application adapts to different screen sizes, ensuring a seamless user experience across all devices.
With a simple click on the dark mode icon, users can activate the dark theme, providing a sleek and eye-friendly interface for nighttime use or for those who prefer darker color schemes.
- React: Chosen for component-based architecture, enhancing maintainability and simplifying state management.
- Modular Components:
TodoItem
,TodoList
,TodoModal
for easier debugging, testing, and scalability. - Accessibility: ARIA labels, semantic HTML, and keyboard navigation ensure wide accessibility.
For a detailed breakdown, click here to jump to the Accessibility Considerations in the Frontend section.
- Flask: Selected for simplicity in creating RESTful APIs, allowing quick setup and frontend integration.
- SQLite: Used for lightweight, file-based data persistence, ideal for small-scale applications.
- REST Principles: Ensures scalable and maintainable architecture.
- Error Handling: Try-catch blocks in API calls enhance user experience and application stability.
- Jest and React Testing Library: For unit testing, ensuring code reliability.
In developing the Task Manager web application, several decisions were made to enhance accessibility, ensuring that the application is usable by as many people as possible, including those who rely on assistive technologies. Below are the key accessibility-focused decisions and implementations:
ARIA (Accessible Rich Internet Applications) labels and roles were extensively used to provide screen reader users with more context about interactive elements and regions. For example, in the TodoItem
component, ARIA labels were added to checkboxes and buttons to clearly describe their actions:
<input
type="checkbox"
checked={todo.completed}
onChange={(e) => {
toggleTodoCompletion(todo.id);
}}
aria-label={`Mark ${todo.title} as ${
todo.completed ? "incomplete" : "complete"
}`}
/>
Keyboard navigation is essential for accessibility. Modal components can be closed with the Escape key, improving usability for keyboard-only users:
const handleKeyDown = (event) => {
if (event.key === "Escape" && showModal) {
setShowModal(false);
}
};
Focus is set to the first input in modals upon opening, aiding users with keyboards and screen readers:
const firstInputRef = useRef(null);
useEffect(() => {
if (showModal) {
firstInputRef.current.focus();
}
}, [showModal]);
Supports dark mode for user preference and visual impairment accommodation. The theme toggle is keyboard and mouse accessible:
function ThemeToggle({ isDarkMode, toggleTheme }) {
return (
<button
onClick={toggleTheme}
className={isDarkMode ? "btn btn-light btn-sm" : "btn btn-dark btn-sm"}
aria-pressed={!isDarkMode}
aria-label={isDarkMode ? "Activate light mode" : "Activate dark mode"}
>
{isDarkMode ? "Light Mode" : "Dark Mode"}
</button>
);
}
These features aim to enhance accessibility, following WCAG guidelines for a broader user interaction with the application.