A Simple To Do List App where users can:
- Create, Rename or Delete Lists
- Add, Remove or Rename Tasks
- Mark tasks as Complete or Incomplete
- MarkLogic Server as database
- To store data in XML format
- Express.js in Node.js as backend
- Takes care of conversion of data between XML format for database and JSON format for frontend
- Create API endpoints for creation, renaming, deletion of lists and tasks as well as for marking tasks as complete or incomplete
- React to build the frontend
- Sends request to backend endpoints based on user input events and handles the responce
- Conditional Rendering of To Do Lists and Task components
- Styling with CSS for great visual design
Description: Develop a simple to-do list application where users can add tasks, mark tasks as completed, and delete tasks.
Implementation:
- Create a React component for the to-do list.
- Use React state (useState hook) to manage the list of tasks.
- Implement event handlers for adding, completing, and deleting tasks.
- Use conditional rendering to display completed tasks differently.
- Apply basic CSS for styling the to-do list and task items.
- MarkLogic Server must be set up and running with a new database created for the To Do List App.
- Node JS must be installed and
npm
andnpx
should be executable from Command Line. - Git must be installed to clone this repository or download the code from this repository directly.
git clone https://github.com/himdek/to-do-app/
Replace values as necessary or according to your database setup
cd to-do-app
echo "
FRONTEND_URL=http://localhost:3000
BACKEND_PORT=3001
MARKLOGIC_USER=replace_user_name
MARKLOGIC_PASSWORD=replace_password
MARKLOGIC_HOST=localhost
MARKLOGIC_PORT=8000
MARKLOGIC_AUTH_TYPE=digest
MARKLOGIC_DATABASE=replace_database_name
" > .env
Make sure variables from .env
are loaded into your environment.
cd backend
npm install
npm run serve
cd frontend
echo "REACT_APP_BACKEND_URL=http://localhost:3001" > .env
npm install
npm run build
npm install -g serve
serve -s build
Visit localhost:3000 or whatever host you deployed to.