A simple Todo project.
Built with React.js + FastAPI.
Use Typescript.
This little toy project is for beginners at JOJ to get familiar with our tech stack, and gain some basic knowledge about web development.
Your main goal is to write a version of your own Todo app with React.js and FastAPI.
These are some suggested libraries. You can find basic feature list of a Todo app at the end of this doc. You are also encouraged to add your own fearures (Juan).
- React.js
- React Router
- Required. Allow you to route inside an SPA (Single Page Application).
- Used in JOJ2.0.
- But not in this toy example. You shall try to split the app into pages and use react-router.
- Ant Design
- Optional. You can also choose Bootstrap.css/Material UI/Bulma/Semantic UI.
- Used in JOJ2.0
- Mobx and Mobx React
- Optional. A state management library. Not so handy for a small project.
- Not used in JOJ2.0
- Umi.js
- A framework to build frontend quickly. If you are familiar with React.js, you can try this.
- Used in JOJ2.0
For more detailed knowledge and learning path, please refer to our docs.
- Poetry
- A python package and dependency manager (better and easier then
pip
) . - Used in JOJ2.0
- A python package and dependency manager (better and easier then
- FastAPI
- High performance, easy to learn, fast to code, ready for production.
- Used in JOJ2.0
- SQLModel
- SQLModel is based on Pydantic and SQLAlchemy.
- Pydantic: Data validation and settings management using python type annotations.
- SQLAlchemy: Python Object Relational Mapper (ORM).
- In the todo app, we use SQLite for simplicity (no need to install extra service).
- Used in JOJ2.0 (PostgreSQL instead of SQLite)
- Docker
- Optional. Used for deployment.
- pytest
- Write and run unit test on your code. You think you write the right code? Then test it.
- Used in JOJ2.0
For more detailed knowledge and learning path, please refer to our docs.
- python >= 3.7 (poetry >= 1.0)
- node.js >= 12.0
https://realpython.com/installing-python/#how-to-install-on-ubuntu-and-linux-mint
curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | python -
If the terminal cannot find poetry
, please close the terminal window and try again, or source your terminal profile.
You may also check your environment variable, and add the following statement in your terminal profile:
export PATH="$HOME/.poetry/bin:$PATH"
(Invoke-WebRequest -Uri https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py -UseBasicParsing).Content | python -
You can use package managers to install node.js, but we recommend to use nvm for easier version management.
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
Add the following lines to .bashrc
, .zshrc
according to the shell you use:
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
Download nvm-windows [https://github.com/coreybutler/nvm-windows] from release page and install.
After installation of nvm, use source
to reload your shell, or restart your shell, and enter
nvm install lts
You can try to launch and play with this project to get a rough idea of a Todo app, and how frontend communicate with the backend.
cd backend
poetry install # a virtual environment will be created automatically
poetry run python -m todo serve --debug # run __main__.py in the module "todo" in debug mode (enable auto reloading), using the poetry environment
# Or you can run `poetry shell && python -m todo serve --debug`, which may run cmd in windows
cd backend
poetry run pytest
cd frontend
yarn install
yarn start
在顶部输入待办事项后按下回车或点击按钮,快速创建事项。
所有事项(未完成,已完成,过期)均可删除(未完成任务在菜单中删除)
标记为已完成后会归入已完成
设置标题、内容、优先级、到期时间。
查看不同状态的待办事项:未完成、已完成、过期。
内置4级优先级,不同优先级有不同颜色代表。菜单中可快捷提高/降低优先级。
待办事项可以根据优先级、日期排序。
- 待办事项可以设置优先级
- 待办事项可以设置 expire date (前后端均有校验)
- 支持按照不同的方式排序,如优先级,expire date
- API 带有测试用例
- 前端使用 TypeScript