This web application is a simple application to manage a list of things to do.
- Sortable Task - User can drag & drop to sort todo
- Due Date - User can add due date to any todo and also filter with them
- Infitite Scroll - User can add many todo as they want, initially 20 todos will be loaded and as user scroll to the end of the list more 20 will be leaded till all displayed.
-
User can sort any todo at any places.
-
React library used: react-sortable-hoc
-
Test cases
- To run test execute command
npm testin frontend folder. Once cypress window open then click on the file sorttodos.spec.js
- To run test execute command
-
User can add due date to any todo, with filter option.
-
React library used: @material-ui/pickers, @date-io/date-fns, date-fns
-
Test cases
- To run test execute command
npm testin frontend folder. Once cypress window open then click on the file addtodos.spec.js
- To run test execute command
-
This app supports infinite scroll, user can add as many todos as they want.
-
Initially app will load 20 todos, once user scroll down to the end it will load next 20 todos till all todos loaded.
-
React library used: react-infinite-scroll-component
-
Test cases
- To run test execute command
npm testin frontend folder. Once cypress window open then click on the file infinitescroll.spec.js
- To run test execute command
This applications consists of two parts:
- Frontend: Single Page Application built with: React and Material.
- Backend: HTTP REST API built with Node.js, Express and MongoDB.
to start the application open the terminal/command line go to frontend folder and execute npm install then :
npm start
once the app is running you can open: http://localhost:3000 on your browser.
Open ./backend/src/config/config.js file and replace MongoDB connection string in dbConnectString variable.
To run the api open the terminal/command line go to backend folder and execute npm install then:
npm start
Make sure frontend(react) is running.
npm test
- End-to-end tests using cypress libray.
- Test case 1: Add 60 todos
- Test case 2: Add due date & filter
- Test case 3: Infinite scroll
Make sure backend server(nodejs) is not running.
npm test
- CRUD operation in todos.
- Library used: mocha, chai, chai-http
- Test cases: All CRUD operation on todo
- Frontend: Refactor initial code, converted all section in to parent-child components. Added ErrorBoundry class to catch all run time error and log them into logs collection into database.
- Backend: Refactor initial code, converted apis routes for
todo&logwith catching run time error and log them into logs collection into database.