Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mar-alv/ignite-todo-list
1st ReactJs challenge of Ignite, Rocketseat's programming course, a To Do List, where you can list, create and delete To Dos
https://github.com/mar-alv/ignite-todo-list
challenge css html javascript jest js react react-testing-library rocketseat storybook styled-components ts typescript vite
Last synced: 7 days ago
JSON representation
1st ReactJs challenge of Ignite, Rocketseat's programming course, a To Do List, where you can list, create and delete To Dos
- Host: GitHub
- URL: https://github.com/mar-alv/ignite-todo-list
- Owner: mar-alv
- License: mit
- Created: 2023-01-01T18:33:06.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-28T22:33:20.000Z (3 months ago)
- Last Synced: 2024-08-28T23:39:39.741Z (3 months ago)
- Topics: challenge, css, html, javascript, jest, js, react, react-testing-library, rocketseat, storybook, styled-components, ts, typescript, vite
- Language: TypeScript
- Homepage:
- Size: 2.69 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Ignite ToDo List
[](https://opensource.org/licenses/MIT)
[🎨 Design](https://www.figma.com/file/HV7C6SQl1SyA1mN8Xur2bv/ToDo-List-%E2%80%A2-Desafio-React-(Copy)?type=design&node-id=56-96&mode=design&t=MDvKh9d18LPYlRNA-0)
[🇵🇹 Português](./docs/README-pt.md)
## 📚 Summary
- [❕ About](#about)
- [📖 Instructions](#instructions)
- [📥 Install](#install)
- [🚀 Run Locally](#locally)
- [📋 Run Unit Tests](#unit-tests)
- [📔 Run Storybook](#storybook)
- [📂 Structure](#structure)
- [🧰 Technologies](#technologies)
- [📸 Screenshots and 🎥 Recordings](#screenshots-prints)
- [👤 Author](#author)
- [📄 License](#license)
### ❕ About
This is my implementation of the challenge project "ToDo List" from the first ReactJS module of [Ignite](https://www.rocketseat.com.br/ignite), an intermediate and advanced course in various programming languages and technologies offered by [Rocketseat](https://www.rocketseat.com.br/).
It implements the following functionalities, which will be demonstrated in photos and videos later on:
- **Task Creation:** Describe in the text field and press Enter or click the adjacent button to create the task with the specified description.
- **Task Deletion:** Click on the trash can icon of the task to delete it.
- **Complete Tasks:** Check the box next to the text or click on it to mark the task as done.
### 📖 Instructions
#### 📥 Install
Paste the 1º command into a terminal open within a folder of your preference to clone the project
```sh
git clone https://github.com/mar-alv/ignite-todo-list.git
```
Then run one of the versions of the 2º command to install the dependencies
```sh
npm i
```
```sh
npm install
```
#### 🚀 Run Locally
Paste the command into a terminal, the application will be accessable through this [link](http://localhost:5173)
```sh
npm run dev
```
#### 📋 Run Unit Tests
Paste the command into a terminal, they will be exectued one after the other mentioning if there were failed tests
```sh
npm run tests
```
#### 📔 Run Storybook
Paste the command into a terminal, the project's components documentation will be accessible through this [link](http://localhost:6006)
```sh
npm run storybook
```
### 📂 Structure
```
│ .storybook/
│ └── ...
│ .tests/
│ └── ...
│ docs/
│ └── ...
│ src/
│ ├── assets/
│ │ └── ...
│ ├── components/
│ │ ├── componente x/
│ │ │ └── ...
│ │ └── ...
│ ├── contexts/
│ │ └── ...
│ ├── styles/
│ │ └── ...
│ ├── interfaces/
│ │ └── ...
│ └── ...
│ stories/
│ ├── components/
│ │ └── ...
│ └── ...
│ tests/
│ └── ...
```
### 🧰 Technologies
#### Build Tools
[](https://vitejs.dev/)
#### Documentation
[](https://storybook.js.org/)
#### Front-end Framework
[](https://reactjs.org/)
[](https://www.typescriptlang.org/)
#### Styling
[](https://phosphoricons.com/)
[](https://styled-components.com/)
#### Testing
[](https://testing-library.com/docs/react-testing-library/intro)
[](https://jestjs.io/)
### 📸 Screenshots and 🎥 Recordings
For a longer video demonstration click here and like my post on LinkedIn
Empty list
Filled list
Creating task
Removing task
Toggle task
Generic stories
Components stories
### 👤 Author
Marcelo Alvarez
Front-end Developer
"Some AI generated funny quote here 😗"
### 📄 License
Licensed under [MIT](./LICENSE)