https://github.com/arislooi/todo-list-app
A simple React Todo List application using Bootstrap for styling. Perfect for learning React hooks and state management.
https://github.com/arislooi/todo-list-app
beginner bootstrap javascript learning react todolist webapplication webdevelopment
Last synced: 3 months ago
JSON representation
A simple React Todo List application using Bootstrap for styling. Perfect for learning React hooks and state management.
- Host: GitHub
- URL: https://github.com/arislooi/todo-list-app
- Owner: ArisLooi
- Created: 2024-12-04T04:18:07.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-04T13:15:13.000Z (over 1 year ago)
- Last Synced: 2025-04-01T09:07:44.744Z (over 1 year ago)
- Topics: beginner, bootstrap, javascript, learning, react, todolist, webapplication, webdevelopment
- Language: JavaScript
- Homepage:
- Size: 44.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Todo List App
Welcome to the Todo List App! This is a simple React application that allows you to add and view todo items. It's a great starting point for learning React hooks, state management, and Bootstrap for styling.
## Features
- Add todo items
- View the list of todo items
## Getting Started
### Prerequisites
To run this project, you need Node.js and npm installed on your machine.
### Installation
1. Clone the repository:
```bash
git clone https://github.com/ArisLooi/todo-list-app.git
2. Navigate to the project directory:
```bash
cd todo-list-app
3. Install the dependencies:
```bash
npm install
## Usage
1. Start the development server:
```bash
npm run dev
2. Open your browser and navigate to the local host URL provided by the development server.
3. Use the input field to add new todo items and view them in the list.
## Project Structure
todo-list-app/
├── src/
│ ├── App.css
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
├── public/
│ ├── index.html
├── package.json
├── README.md
└── vite.config.js
- src/App.jsx: The main React component that contains the logic for adding and viewing todo items.
- src/TodoList.jsx: A component that renders the list of todo items.
- src/index.css: The CSS file for styling the application.
- public/index.html: The HTML file that serves as the entry point for the application.
- package.json: The file that contains the project's dependencies and scripts.
- vite.config.js: The configuration file for Vite.
## Functions
- addTodo(): Adds a new todo item to the list.
- TodoList Component: Renders the list of todo items.
## Contributing
Contributions are welcome! Please fork the repository and create a pull request with your changes.
## Acknowledgments
Thanks to all the developers who have contributed to open-source projects and made learning to code accessible to everyone.
Happy coding! 😊