Simple Javascript Todo App

Full Stack Simple JS application

Project Date: March 2020, in Course: Learn Javascript: Full-Stack from Scratch

This was my first attempt at a Full Stack Javascript Todo List application as part of the Full-stack Javascript course. The app was quickly put together and so is not well structured. It consists of 2 files – one for the server side handling, and one for the browser side handling.

The server side using Node.js in combination with the Express server package. The list of “todos” is stored in a MongoDB database. I have the program setup where you can switch between a LOCAL database (which is on our own machine if developing) or using the cloud based MongoDB Atlas database. There is no costs to setup a basic Atlas configuration. Any TODOs that are created are passed through a HTML sanitizer so as to prevent any Javascript code injection.

The browser side HTML is routed from the Node.js server using ExpressJS. The initial page will setup the list of existing Todos from the database. The frontend includes the Axois library for communicating with the server (through GET and POSTs, etc). This communication makes use of JS Promises for making asynchronous requests.

Standard Bootstrap is used for styling – no special CSS required.

I spent a significant amount of time trying to setup an ability to switch between your local database and the cloud (Atlas) database. This failed to open or update; which I now believe was related to the asynchronous nature of opening the databases. I could not get the databases to close and open – I had to open both databases at startup and then flick between them.

In terms of development environment setup, it uses node and npm. Hence all you need to do locally is type “npm run start”  The application is setup on to run on Heroku in the link below.

Note: There is a simple user name and password block (to prevent robots running amuck); just use User: “test” with Password: “test123

Launch Project

GitHub Page

Language(s) Used