Dockerized the project

Dockerfile

@@ -0,0 +1,12 @@
+FROM node:lts-alpine
+
+COPY package*.json ./
+
+WORKDIR '/var/www/app'
+
+RUN npm install --save express redis ejs dotenv
+
+COPY . .
+
+EXPOSE 3000
+

README.md

@@ -1,47 +1,62 @@
-# redis-TODO-List
+# A Simple To-do List using Docker
 
-This is TODO List made using **Redis**, **EJS**, **Express**, **Node.js** and **Bootstrap 4**. Where you can write and delete any element that you want.
+This is dockerized version of the [original app](https://github.com/VictorAlonsoCM/redis-TODO-List) that uses Node.js, Express, Bootstrap and Redis. 
+It uses Docker compose to build both the frontend and backend.
 
-## Project preview
-![Project preview](readme-images/website-preview.png)
+<img width="1323" alt="Screen Shot 2022-04-21 at 4 05 40 PM" src="https://user-images.githubusercontent.com/313480/164441075-6e9fec0d-e762-41de-b91d-a234593f7bfb.png">
 
-## Getting started:
-If you want to view the web application in your computer, first you need to have Installed [NodeJS](https://nodejs.org/es/), second you will need to install a [Redis Server and CLI](https://redis.io/download), finally you will need to type the following instructions on your terminal inside the project folder 
-```shell
-npm install 
-```
-and then 
-```shell
-node .
-```
-After these instructions, open your browser and go to the next url [http://localhost:3000/](http://localhost:3000/)
 
-### Details about the project and code
----
-* The server where the data is storage is Redis and it is saving the data in a list element.
-* Using a Redis client we can write, read and delete the elements of the list.
-* You can install the Redis client by using the following instruction: 
-  ```shell
-  npm install redis --save
-  ```
-* Use ``client.RPUSH('key', value)`` to insert a value to the right of the elements
-* Use ``client.LRANGE('key', 0, -1)`` to get all the values of the list
-* Use ``client.LREM('key', 0, 'value')`` to remove an element of the list by value
+## Tech Stack
+
+- NPM – a node package manager used for Node.js app development 
+- Node.js – our runtime for building web applications
+- Express – a backend web-application framework for Node.js 
+- Bootstrap – a toolkit for responsive, front-end web development
+- Redis – an in-memory, key-value, NoSQL database used for caching, data storage, and message brokering
+- Docker Desktop – a suite of software-development tools for creating, sharing, and running individual containers
+
+
+## Pre-requisite
+
+- [Download and Install Docker Desktop](https://docs.docker.com/desktop/) 
+
 
 
-For **Redis** client declaration you can use the following instruction inside where you need it
+## Bring up the application
 
-```js
-const client = redis.createClient();
+We will be using `docker-compose` utility to bring up the app.
 
-client.on('connect', () => {
-  console.log('Connected to Redis...');
-});
 ```
+services:
+
+  app:
+    build: ./
+    volumes:
+       - ./:/var/www/app
+    ports:
+      - 3000:3000
+    environment:
+      - REDIS_URL=redis://db:6379
+      - NODE_ENV=development
+      - PORT=3000
+    command:
+       sh -c 'node app.js'
+    depends_on:
+      - db
+
+  db:
+    image: redis
+ ```
+
+
+Bring up the app: 
+
+```
+docker-compose up -d
+```
+
+## Accessing the app
+
+Open https://localhost:3000 to see the todo-list app up and running.
+
 
-### Dependencies used for this project are:
----
-* body-parser: 1.18.3
-* ejs: 2.6.1
-* express: 4.16.3
-* redis: 2.8.0

app.js

@@ -1,32 +1,29 @@
-//Declarations
 const express = require('express');
 const path = require('path');
 const bodyParser = require('body-parser');
+const port = 3000
 const redis = require('redis');
 
-//Initialization of express
 var app = express();
 
-//Redis Client
-const client = redis.createClient();
+const client = redis.createClient({ url: process.env.REDIS_URL });
+
 
 client.on('connect', () => {
   console.log('Connected to Redis...');
 });
 
-//View engine
 app.set('views'), path.join(__dirname, 'views');
 app.set('view engine', 'ejs');
 
-//Normalization of the elements used
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({extended: false}));
 
-app.use(express.static(path.join(__dirname, 'public')));
 
-//This is our router
+app.use(express.static(path.join(__dirname, 'public')))
+
 app.get('/', (req, res) => {
-  var title = 'Redis TODO List';
+  var title = 'A Simple Todo List App';
   var counter = 0;
   client.LRANGE('todo', 0, -1, (err, reply) => {
     if(err){
@@ -40,7 +37,6 @@ app.get('/', (req, res) => {
   });
 });
 
-//Add messages on redis
 app.post('/todo/add', (req, res, next) => {
   var todo = req.body.todos;
   client.RPUSH('todo', todo, (err, reply) => {
@@ -51,7 +47,6 @@ app.post('/todo/add', (req, res, next) => {
   });
 });
 
-//Delete messages on redis by index
 app.post('/todo/delete', (req, res, next) => {
   var delTODO = req.body.todo;
   var deleted = '__DELETED__';
@@ -64,9 +59,8 @@ app.post('/todo/delete', (req, res, next) => {
   });
 });
 
-//Port listen of the app
 app.listen(3000, () => {
   console.log('Server Started at port 3000...');
 });
 
-module.exports = app;
+module.exports = app;

docker-compose.yml

@@ -0,0 +1,19 @@
+services:
+
+  app:
+    build: ./
+    volumes:
+       - ./:/var/www/app
+    ports:
+      - 3000:3000
+    environment:
+      - REDIS_URL=redis://db:6379
+      - NODE_ENV=development
+      - PORT=3000
+    command:
+       sh -c 'node app.js'
+    depends_on:
+      - db
+
+  db:
+    image: redis

package.json

@@ -1,22 +1,31 @@
 {
-  "name": "redis-TODO-List",
+  "name": "todolist",
   "version": "1.0.0",
-  "description": "Simple to do list",
+  "description": "A Sample Todo-List app",
   "main": "app.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "node app.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ajeetraina/todolist.git"
   },
   "keywords": [
-    "Redis",
-    "ExpressJS",
-    "EJS"
+    "node.js"
   ],
-  "author": "Victor Contreras",
+  "author": "Ajeet Singh Raina",
   "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ajeetraina/todolist/issues"
+  },
+  "homepage": "https://github.com/ajeetraina/todolist#readme",
   "dependencies": {
-    "body-parser": "^1.18.3",
-    "ejs": "^2.6.1",
-    "express": "^4.16.3",
-    "redis": "^2.8.0"
+    "dotenv": "^16.0.0",
+    "ejs": "^3.1.6",
+    "express": "^4.17.3",
+    "redis": "^4.0.6"
+  },
+  "devDependencies": {
+    "nodemon": "^2.0.15"
   }
 }

views/index.ejs

@@ -5,26 +5,27 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="stylesheet" href="https://bootswatch.com/4/slate/bootstrap.min.css">
-  <title>Redis TODO List</title>
+  <title>A Simple ToDo List App</title>
 </head>
 <body>
   <div class="container">
     <h1 class="text-center"> <%= title %> </h1>
+    <img src="/images/todo.jpeg" class="center"  width="300" alt="">
     <form action="/todo/add" method="POST">
       <div class="form-group">
-        <input type="text" class="form-control" name="todos" placeholder="Send a message...">
+        <input type="text" class="form-control" name="todos" placeholder="Start typing and press Enter...">
       </div>
     </form>
     <form action="/todo/delete" method="POST">
 
       <% todo.forEach( (list) => { %>
-        <div class="alert alert-success">
+        <div class="alert alert-light">
           <input type="checkbox" class="form-check-input mt-2" name="todo" value="<%= counter %>">
           <h4 class="d-inline">> </h4> <strong><%= list %></strong>
         </div>
         <% counter++ %>
       <% }) %>
-        <input type="submit" value="Remove" class="btn btn-primary">
+        <input type="submit" value="Remove from the List" class="btn btn-primary">
     </form>
     <br>
   </div>