/heatmap-1

My mvc node express CRUD shopping list app.

Primary LanguageCSS

Daily Task Heatmap


heatmap.mov


Node, Express, MongoDB, EJS, Javascript, HTML & CSS - Track and celebrate the completion of user's daily tasks with a GitHub-style heatmap!

Link to app

Introduction

A calendar heatmap showing how many tasks the user completed on each day. I customized mine to be a 100devs daily task tracker.

Be sure to add that lovely star 😀 and fork it for your own copy

Objectives

  • It's a 100-hour project created to understand how MVC concept and logins are added, as well how to take advantage of MongoDB and ejs to present and modify data to provide great UI/UX.

🌟 User can register and log in to view, create, edit and delete their daily entry of tasks

🌟 User get to see a heatmap showing all dates start 9 months ago

🌟 User can do a quick add, or click on the last square(today) to log today's assignments

🌟 Use can hover over each square to see the date and number of tasks completed

🌟 When clicking on a square, a popup window will appear showing which tasks have been checked off. The user can update or delete the entry

Who is this for?

  • It's for beginners & intermediates with little more experience, to help understand the various aspects of building a node app with some complex features

Packages/Dependencies used

bcrypt, connect-mongo, dotenv, ejs, express, express-flash, express-session, mongodb, mongoose, morgan, nodemon, passport, passport-local, validator

Install all the dependencies or node packages used for development via Terminal

npm install

Things to add

  • Create a .env file and add the following as key=value
    • PORT: 1000 (can be any port example: 3000)
    • DB_STRING= your database URI

Have fun testing and improving it! 😎

Special thanks to: